Title: Problem With Darkmode
Last modified: June 9, 2022

---

# Problem With Darkmode

 *  Resolved [novakpeter](https://wordpress.org/support/users/novakpeter/)
 * (@novakpeter)
 * [4 years ago](https://wordpress.org/support/topic/problem-with-darkmode/)
 * 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](https://wordpress.org/support/topic/post-title-css-customization-not-working/page/2/)
   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](https://imgur.com/a/J8rXy40)
 * 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](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fproblem-with-darkmode%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  Plugin Author [Hector Cabrera](https://wordpress.org/support/users/hcabrera/)
 * (@hcabrera)
 * [4 years ago](https://wordpress.org/support/topic/problem-with-darkmode/#post-15724275)
 * Hi [@novakpeter](https://wordpress.org/support/users/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](https://wordpress.org/support/users/novakpeter/)
 * (@novakpeter)
 * [3 years, 12 months ago](https://wordpress.org/support/topic/problem-with-darkmode/#post-15728764)
 * Dear Héctor, thank you so much! Looking forward to any suggestion!
 *  Plugin Author [Hector Cabrera](https://wordpress.org/support/users/hcabrera/)
 * (@hcabrera)
 * [3 years, 12 months ago](https://wordpress.org/support/topic/problem-with-darkmode/#post-15728881)
 * Hey [@novakpeter](https://wordpress.org/support/users/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](https://wordpress.org/support/users/novakpeter/)
 * (@novakpeter)
 * [3 years, 11 months ago](https://wordpress.org/support/topic/problem-with-darkmode/#post-15745727)
 * 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](https://wordpress.org/support/users/novakpeter/)
 * (@novakpeter)
 * [3 years, 11 months ago](https://wordpress.org/support/topic/problem-with-darkmode/#post-15746517)
 * 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](https://wordpress.org/support/users/hcabrera/)
 * (@hcabrera)
 * [3 years, 11 months ago](https://wordpress.org/support/topic/problem-with-darkmode/#post-15746766)
 * Awesome, good job [@novakpeter](https://wordpress.org/support/users/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](https://developer.wordpress.org/reference/hooks/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()](https://developer.wordpress.org/reference/functions/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.

 * ![](https://ps.w.org/wordpress-popular-posts/assets/icon-256x256.png?rev=1232659)
 * [WP Popular Posts](https://wordpress.org/plugins/wordpress-popular-posts/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wordpress-popular-posts/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wordpress-popular-posts/)
 * [Active Topics](https://wordpress.org/support/plugin/wordpress-popular-posts/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wordpress-popular-posts/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wordpress-popular-posts/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)

 * 6 replies
 * 2 participants
 * Last reply from: [Hector Cabrera](https://wordpress.org/support/users/hcabrera/)
 * Last activity: [3 years, 11 months ago](https://wordpress.org/support/topic/problem-with-darkmode/#post-15746766)
 * Status: resolved