FluentCommunity Snippet: Force Dark Mode by Default via Tag

growably-snippets

This Growably snippet is built for sites using FluentCommunity and forces dark mode by default across your WordPress frontend. It works by adding a dark class and a data-color-mode="dark" attribute directly on the <html> tag using the language_attributes filter.

It’s ideal when your design system, CSS, or utility framework (for example Tailwind) relies on a .dark class or a data attribute at the root level, and you want your FluentCommunity area to always load in a dark theme by default.

Why Use This FluentCommunity Dark Mode Snippet

  • You want your FluentCommunity interface to open in dark mode by default.
  • Your global styles rely on the presence of .dark on the <html> tag or a data attribute such as data-color-mode.
  • You prefer a simple, code-driven solution instead of editing theme templates or core files.
  • You want a future-proof approach that can live either in a small plugin or in your theme’s functions.php.

What This Snippet Actually Does

  • Hooks into WordPress’ language_attributes filter, which is used when WordPress renders the <html> tag.
  • Checks if the output already contains a class attribute:
    • If there is no class, it adds class="dark".
    • If a class exists, it appends dark to the existing classes.
  • Adds data-color-mode="dark" if it’s not already present.
  • Provides a global signal that the site (and FluentCommunity pages) should render in dark mode by default.

Once this is in place, any CSS targeting .dark or [data-color-mode="dark"] at the root will automatically apply to your entire site, including your FluentCommunity community area.

The FluentCommunity Dark Mode Snippet

You can use this snippet either in a custom plugin or in your theme’s functions.php file.

function growably_snippet_language_attributes($output, $doctype = 'html') {

    if (strpos($output, 'class=') === false) {
        $output .= ' class="dark"';
    } else {
        $output = preg_replace('/class=("|\')([^"\']*)\1/', 'class=$1$2 dark$1', $output, 1);
    }

    // Add data-color-mode="dark"
    if (strpos($output, 'data-color-mode=') === false) {
        $output .= ' data-color-mode="dark"';
    }

    return $output;
}

add_filter('language_attributes', 'growably_snippet_language_attributes', 20, 2);

Option 1: Create a Small Custom Plugin (Recommended)

This method keeps the behavior independent from your theme, so your FluentCommunity dark mode default will survive theme changes and updates.

Step 1: Create the Plugin File

  1. Connect to your site via FTP/SFTP or your hosting file manager.
  2. Navigate to the plugins directory:
    wp-content/plugins/
  3. Create a new file, for example:
    growably-fluentcommunity-dark-mode.php
  4. Open that file and paste the code below.

Plugin Code

<?php
/**
 * Plugin Name: Growably – FluentCommunity Dark Mode Default
 * Plugin URI: https://growably.ro/snippets/fluentcommunity-dark-mode-html-tag/
 * Description: Forces dark mode by adding a dark class and data-color-mode="dark" on the <html> tag so FluentCommunity can use dark mode by default.
 * Author: Growably (https://growably.ro/)
 * Version: 1.0.0
 */

function growably_snippet_language_attributes($output, $doctype = 'html') {

    if (strpos($output, 'class=') === false) {
        $output .= ' class="dark"';
    } else {
        $output = preg_replace('/class=("|\')([^"\']*)\1/', 'class=$1$2 dark$1', $output, 1);
    }

    // Add data-color-mode="dark"
    if (strpos($output, 'data-color-mode=') === false) {
        $output .= ' data-color-mode="dark"';
    }

    return $output;
}

add_filter('language_attributes', 'growably_snippet_language_attributes', 20, 2);

Step 2: Activate the Plugin in WordPress

  1. Log in to your WordPress admin dashboard.
  2. Go to Plugins → Installed Plugins.
  3. Find “Growably – FluentCommunity Dark Mode Default”.
  4. Click Activate.

From now on, the &lt;html&gt; tag will include the dark class (either as class="dark" or appended to existing classes) and data-color-mode="dark", giving FluentCommunity a consistent dark mode foundation.

Option 2: Add the Snippet to Your Theme’s functions.php

If you prefer to keep this behavior inside your theme, you can add the snippet directly to functions.php. Ideally, use a child theme so theme updates don’t overwrite your changes.

Where to Find functions.php

  1. Go to your theme directory via FTP or file manager:
    wp-content/themes/your-theme/
    If you’re using a child theme, use its folder instead.
  2. Locate and open the functions.php file.
  3. Scroll to the bottom of the file.
  4. Paste the snippet below and save.

Snippet for functions.php

function growably_snippet_language_attributes($output, $doctype = 'html') {

    if (strpos($output, 'class=') === false) {
        $output .= ' class="dark"';
    } else {
        $output = preg_replace('/class=("|\')([^"\']*)\1/', 'class=$1$2 dark$1', $output, 1);
    }

    // Add data-color-mode="dark"
    if (strpos($output, 'data-color-mode=') === false) {
        $output .= ' data-color-mode="dark"';
    }

    return $output;
}

add_filter('language_attributes', 'growably_snippet_language_attributes', 20, 2);

After saving, reload your site. Your entire frontend, including FluentCommunity pages, will now treat dark mode as the default, as long as your CSS is configured to respond to .dark or [data-color-mode="dark"] on the root element.

Want More Than Just a FluentCommunity Snippet?

We can turn this dark mode tweak into a fully custom FluentCommunity experience — tailored layouts, member dashboards, and deep integrations built for your community.
Level Up My FluentCommunity

Want More Than Just a FluentCommunity Snippet?

We can turn this dark mode tweak into a fully custom FluentCommunity experience — tailored layouts, member dashboards, and deep integrations built for your community.
Level Up My FluentCommunity
Picture of By Denis Sandu

By Denis Sandu

Last Updated: November 19, 2025