Skip to main content

Dark Mode by default

Hi, I’d like to know if it’s possible to set dark mode as the default and disable light mode completely.
Thanks in advance for your help!

Ross FCA

You can disable dark mode from the settings so users can't switch. Then you can customise your "light" colours to be dark.

Donovan Owens

Ross FCA This feels like a smooth option.

Pablo Miatello

Yes, I need this "You can disable dark mode from the settings so users can't switch" but with ligth mode 😜, maybe is a simple feature to new versions...

Ross FCA

Pablo Miatello Maybe, I can't see them adding that to the core plugin when its technically possible to achieve just now. They might though! I'll be adding an option to set dark mode by default in my Quick Fixes plugin so will look to see if that still works with dark mode button disabled.

Sophia S

Pablo Miatello Ross H tried the above and didn't work so twinkled it a little bit to come up with the one below.

How it works

  1. Disable dark mode from settings > customization
  2. Add the code snippet below
  3. It must work straightaway
add_action('fluent_community/portal_head', function() {
    ?>
    <style>
        /* Dark mode styles */
        [data-mode="dark"] {
            color-scheme: dark;
            background-color: #121212;
            color: #ffffff;
        }
    </style>

    <script>
        // Apply dark mode immediately
        document.documentElement.classList.add('dark');
        document.documentElement.setAttribute('data-mode', 'dark');
    </script>
    <?php
});

Please lemme know if it helps 😀

Pablo Miatello

Sophia S Work perfect! thanks a lot!

Andrey A.

Sophia S does this code still work? It doesn't work for me. It shows dark mode only for a moment and then turns to light mode.