Skip to main content

FluentCommunity

#Tips

Default Dark Mode

Hi :) I have been struggling with setting default dark mode, even wrote to support but didn't get any good solution... Now I have found the solution and if anyone wants to do the same just put this code into code snippet plugin:

add_action('fluent_community/portal_head', function() {
?>

document.documentElement.classList.add('dark'); document.documentElement.setAttribute('data-mode', 'dark'); [data-mode=dark] { color-scheme: dark; }

<?php
});

Hope it helps πŸ˜„

  • 8 likes
  • 5 comments

Paul Hopkins

I have found that this is needed to be added to your code... thanks for all the work!

add_action('fluent_community/portal_head', function() {
?>
    <script>
document.documentElement.classList.add('dark'); document.documentElement.setAttribute('data-mode', 'dark'); [data-mode=dark] { color-scheme: dark; }
    </script>
<?php
});

Dave Safley

Thanks TjaΕ‘a PeterleΒ - Yes I like the dark mode and had been thinking about making it default, thanks for sharing the code! πŸ˜€

Tim Lord

Problem found with this, it only applies to FC portal not to any other WP page...

I have a few custom pages set as links in the side menu, can use the FC template on them but they then defsult to light mode even when the above is applied.

Really need an overal option to use either light or dark or give the option to users...

Martijn Meijer

Tim LordΒ This indeed, the ThemeCompatibility doensn’t switch with it. Thanks though!

Martijn Meijer

This worked for me:

// Native FC portal (geen WP-thema)
add_action('fluent_community/portal_head', function() {
    ?>
    <script>
        document.documentElement.classList.add('dark');
        document.documentElement.setAttribute('data-mode', 'dark');
    </script>
    <style>[data-mode=dark] { color-scheme: dark; }</style>
    <?php
});

// Theme Compatibility pagina's Γ©n de rest van de site
add_action('wp_head', function() {
    ?>
    <script>
        document.documentElement.classList.add('dark');
        document.documentElement.setAttribute('data-mode', 'dark');
    </script>
    <style>[data-mode=dark] { color-scheme: dark; }</style>
    <?php
}, 1);