Problem With Darkmode

Resolved novakpeter
(@novakpeter)

4 years ago

Great plugin, thank you so much for this! I am trying to solve a little “glitch”, will be very thankful if any help is possible.
What I want to achieve. I am using “Cards Compact” theme. Added some simple CSS tweaks (I have my adjusted theme in my site theme folder). My only problem is that “wpp list li a” is rgb (85, 85, 85). But I want this black, not gray (readability, contrast).

Simple you say. Just put CSS into your Cards Compact theme saying they should be black. OK, done. But now, I have problem with Dark Mode plugin. After switching to dark, the titles stay black. OK, never mind, we can just put somewhere CSS with a selector saying “If dark mode is on, just change the color to gray.” The selector is easy, “html.wp-dark-mode-active” and we can add !important, of course. Well, this is not possible, because this plugin’s CSS is enclosured under Shadow DOM. So, when we are in the shadow DOM, we do not know, if outside is something like “html.wp-dark-mode-active”. And also, from outside, we know that dark mode is active, but we can not tweak CSS encapsuled in Shadow DOM. Ops, seams this can not be solved.

There is a 2 year old workaround trick. See here please: workaround at the end. The workaround says 1) put your added CSS to default theme. 2) Set widget to theme “None”. This should at the same time A) switch off the Shadow DOM closure so we can see the dark mode is on from within the plugin, B) use anyways the default Cards Compact theme.

OK, I tried this wild solution (if the plugin will be updated, could the default theme be overritten and the adjustmens lost?). Anyways, it did not work. The reason is if theme is set to “None” it actually does not use the default Cards Compact theme anymore (if I understand it right), so we are missing many lines of CSS here.

See my screenshots, please:
screenshots

The first image is theme “None” and the second one is theme “Cards Compact”. The style.css file is exactly the same in default Cards Compact theme and also my customized Cards Compact theme.

I even tried to use

`add_filter(‘wpp_additional_theme_styles’, ‘wpp_additional_css_rules’

and add the whole contents of style.css there but no effect.

I spent many hours on this and did not find a solution…any idea how to solve?

The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

Plugin Author Hector Cabrera
(@hcabrera)

4 years ago

Hi @novakpeter,

Indeed, since these themes are basically self-contained no CSS rules from the “outside” will affect them – as you already found out 😛

I think though that there may be a way to change things a bit via JS. I’ll try a few ideas and get back to you as soon as I can.

Thread Starter novakpeter
(@novakpeter)

3 years, 12 months ago

Dear Héctor, thank you so much! Looking forward to any suggestion!
Plugin Author Hector Cabrera
(@hcabrera)

3 years, 12 months ago
Hey @novakpeter,

So here’s how I would do it.

As I mentioned before, you can use JavaScript to interact with the embedded popular posts list. Here’s an example (although I recommend loading this script in a JS file and not to inline it as shown below):
```
/**
 * Adds a custom CSS class to a shadowRoot'ed popular posts list.
 *
 * @author Hector Cabrera
 */
function wpp_dark_mode_detection() {
	?>
	<script>
		document.addEventListener('DOMContentLoaded', function() {
			document.body.addEventListener('wpp-onload', function(e) {
				/**
                                 * @To-Do
				 *
				 * Add logic here to detect when the site is in dark mode.
				 */
				
				let is_dark_mode = true;
				
				if ( is_dark_mode ) {
					e.target.querySelector('.popular-posts-sr').shadowRoot.querySelector('.wpp-list').classList.add('dark-mode');
				}
			});	
		});
	</script>
	<?php
}
add_action('wp_head', 'wpp_dark_mode_detection');
```
Basically, the script above hooks into a JavaScript event called “wpp-load” that fires up when a given popular post list is loaded. This relies on having the “Ajaxify Widget” option on (see Settings > WordPress Popular Posts > Data).

When the event is fired, we find the actual list inside the shadowRoot and give it a “dark-mode” CSS class.

Your homework now is 1) to update the script so it can detect when your site goes into Dark Mode (after all, you don’t want to add the dark-mode class to your popular posts list if your site isn’t in Dark Mode), and 2) to update the cards-compact/style.css stylesheet that’s inside your theme’s folder so links are grey when the .wpp-list UL element has the dark-mode CSS class.

If you have any questions please let me know.
Thread Starter novakpeter
(@novakpeter)

3 years, 11 months ago

Dear Héctor, I appreciate your response very much! Though I know HTML, CSS very well and have some PHP basics, I don’t really know JS. So I will try to put something together based on documentation etc. Hopefully I will be able to find somehow the detection logic as you mention and add the shown code to my themes function.php. However I have no idea how to “load the script in a JS file and not to inline it as shown” as mentioned. Nvm, meanwhile I will think about that detection logic, thank you.
Thread Starter novakpeter
(@novakpeter)

3 years, 11 months ago
Dear Héctor, I found the logic and finished the script! Works nicely now! The code is:
```
function wpp_dark_mode_detection() {
	?>
	<script>
		document.addEventListener('DOMContentLoaded', function() {
			document.body.addEventListener('wpp-onload', function(e) {

				const my_html = document.querySelector('html');
				
				if (my_html.classList.contains('wp-dark-mode-active')) {
				        is_dark_mode = true;
				} else {
                        		is_dark_mode = false;
				}
		 
				
				if ( is_dark_mode ) {
					e.target.querySelector('.popular-posts-sr').shadowRoot.querySelector('.wpp-list').classList.add('dark-mode');
				}
			});	
		});
	</script>
	<?php
}
add_action('wp_head', 'wpp_dark_mode_detection');
```
And to my style.css I added:
```
.wpp-list li a {
color: #000000;
}
.wpp-list.dark-mode li a {
color: #e5e0d8;
}
```
Please, can you advice how to “load the script in a JS file and not inline as shown” as mentioned?
Plugin Author Hector Cabrera
(@hcabrera)

3 years, 11 months ago
Awesome, good job @novakpeter! (And thanks for sharing the solution here, hopefully it’ll help someone in the future).

Now, to load the script in a JS file:

1. Create a file called wpp-dark-mode-switcher.js (or however you like).

2. Move the contents from the <script> tag into wpp-dark-mode-switcher.js (or whatever you named it). When you’re done delete the wpp_dark_mode_detection() function from your functions.php file as you won’t be needing it anymore.

3. Place the wpp-dark-mode-switcher.js file somewhere inside your theme’s folder (eg. assets/js/wpp-dark-mode-switcher.js or js/wpp-dark-mode-switcher.js).

4. In functions.php, hook into wp_enqueue_scripts to have your theme load this .js file, like so for example:
```
/**
 * Enqueue theme assets.
 *
 * @since 1.0.0
 */
function wp14342_enqueue_assets() {
	wp_enqueue_script(
		'wpp-dark-mode-switcher',
		get_template_directory_uri() . '/path/to/wpp-dark-mode-switcher.js',
		array(),
		'1.0.0'
	);
}
add_action( 'wp_enqueue_scripts', 'wp14342_enqueue_assets' );
```
See wp_enqueue_script() for more details.

If everything went well you should see that the browser is now loading our new JavaScript file and that your popular posts list changes its appearance when your site is in dark mode.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Problem With Darkmode’ is closed to new replies.

Tags