Dark mode, light mode switching

  • When developing in fse mode

    • theme.json -> default mode
    • /styles/dark.json -> Different styles
      This is how we develop it.

    Website administrators can easily modify styles in the editor, but visitors will only see the changed styles.

    I would like to support dark mode for users using the color information in dark.json. Please let me know if fse provides this function.

    If it is not provided, please let me know if I can retrieve the information set in dark.json using PHP code.

    You can provide dark and light modes by simply defining CSS, but
    I don’t want to enter color values multiple times.

    Thanks for reading. Please help.

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

  • Hi there,

    I am not completely sure FSE provides this function but here is how I think you can do to achieve this in PHP.

    1. You will retrieve the contents from your dark.json file path

    $darkJson = file_get_contents(get_theme_file_path(‘/styles/dark.json’)); $darkData = json_decode($darkJson, true);

    2. You will have to generate a dynamic css code (this is quite tricky)

    $dynamic_css = ''; foreach ($darkData as $selector => $styles) { $dynamic_css .= $selector . '{'; foreach ($styles as $property => $value) { $dynamic_css .= $property . ':' . $value . ';'; } $dynamic_css .= '}'; }

    3. We have to enqueue these styles on our wordpress site

    function enqueue_dark_mode_css() {
    $dynamic_css_file = get_template_directory() . '/styles/dynamic-dark-mode.css';
    file_put_contents($dynamic_css_file, $dynamic_css); 
    wp_enqueue_style('dynamic-dark-mode', get_template_directory_uri() . '/styles/dynamic-dark-mode.css');
}
add_action('wp_enqueue_scripts', 'enqueue_dark_mode_css');

    4. Use Javascript to toggle the dark mode

    You will add a button

    <button id="dark-mode-toggle">Toggle Dark Mode</button>

    Add an event listener

    document.getElementById('dark-mode-toggle').addEventListener('click', function() {
document.body.classList.toggle('dark-mode');
});

    5. Write some code to regenerate your dynamic dark mode css

    function regenerate_dark_mode_css() {
// You will write your code to regenerate dynamic CSS based on saved styles
}
add_action('after_save_theme_settings', 'regenerate_dark_mode_css');

    I hope this helps

    Thread Starter devpandaking

    (@devpandaking)

    @howdoyoutech

    Sounds like a very smart idea!

    However, several issues make me hesitant to choose this method.
    This is because the user must do this every time the website is refreshed, and information that interprets the theme information the user has selected must be added to the cookie.

    Since the FSE engine holds all theme information, it would be great to create a built-in function that uses cookies internally, but it is unfortunate.

    I guess I have no choice but to create a separate css file and implement it with javascript.

    Thank you so much for your reply.

    Applause for your great idea!!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Dark mode, light mode switching’ is closed to new replies.