Tailwindcss dark mode can't change <html> or add class="dark" tag on production

I'm using Laravel with Vite and FluxUI (with Alpine.js) to implement a dark mode toggle in my application. Locally, everything works perfectly—the inline script in my sets the dark class on the element based on a value stored in localStorage (or system preference), and Tailwind’s dark mode styles apply as expected.

However, when I deploy to production (using a Laravel Forge–provisioned server with Nginx), the page loads in light mode, and I see a mixed state (or sometimes no dark mode at all) even though the user preference is set to dark. I suspect something in the production build or server configuration is interfering with my inline script.

I tried to set it it's removed immediately, even if I do it in the console.

like If in the console on the production server, write

Flux.dark = true

It prints true, but does not change to darkmode

Impossible to set

<HTML class="dark">

tailwind.config.js

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import colors from 'tailwindcss/colors';


/** @type {import('tailwindcss').Config} */
export default {
    darkMode: 'selector',
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        "./vendor/livewire/flux-pro/stubs/**/*.blade.php",
        "./vendor/livewire/flux/stubs/**/*.blade.php",
    ],

    theme: {
        extend: {
            colors: {
                // Re-assign Flux's gray of choice...
                zinc: colors.slate,

                // Accent variables are defined in resources/css/app.css...
                accent: {
                    DEFAULT: 'var(--color-accent)',
                    content: 'var(--color-accent-content)',
                    foreground: 'var(--color-accent-foreground)',
                },
            },
            fontFamily: {
                sans: ['Inter', 'sans-serif'],
            },
            typography: {
                DEFAULT: {
                    css: {
                        'h1, h2, h3, h4, h5, h6': {
                            fontWeight: '700', // Or 'bold'
                        },
                        // You can also adjust paragraph, links, etc.
                        'p': {
                            marginTop: '0',
                            marginBottom: '1rem',
                        },
                    },
                },
            },
        }
    },

    plugins: [forms],
};

Some resources i'v tried to use

https://fluxui.dev/docs/dark-mode#segmented-radio

https://tailwindcss.com/docs/dark-mode

LaryAI

1 year ago

Level 58

To address the issue of dark mode not working in production, there are a few steps you can take to troubleshoot and potentially resolve the problem:

Ensure Correct Dark Mode Configuration: Make sure your tailwind.config.js is correctly set up for dark mode. The darkMode property should be set to 'class' if you are toggling the dark class manually. The 'selector' option is not a valid configuration for Tailwind CSS dark mode. Update your configuration as follows:
```
export default {
    darkMode: 'class', // Change this to 'class'
    // ... rest of your configuration
};
```

Check JavaScript for Setting Dark Mode: Ensure that your JavaScript responsible for toggling the dark mode is executing correctly in production. You can add some console logs to verify if the script is running and if the dark class is being added to the <html> element.

document.addEventListener('DOMContentLoaded', () => {
    const isDarkMode = localStorage.getItem('darkMode') === 'true';
    if (isDarkMode) {
        document.documentElement.classList.add('dark');
    } else {
        document.documentElement.classList.remove('dark');
    }

    console.log('Dark mode:', isDarkMode);
});

Verify LocalStorage and Script Execution: Ensure that your script to toggle dark mode is included and executed before the page fully loads. You might want to place it in the <head> section or ensure it's one of the first scripts to run.
Check for CSS Caching Issues: Sometimes, CSS files might be cached, and changes might not reflect immediately. Clear your browser cache or try accessing the site in incognito mode to see if the issue persists.
Inspect Server-Side Rendering: If you are using server-side rendering, ensure that the initial HTML response includes the correct class based on user preferences. This might involve checking how the server-side logic determines the user's theme preference.
Debug in Production: Use browser developer tools to inspect the <html> element and see if the dark class is being added or removed. This can help identify if the issue is with the script execution or something else.
Check for JavaScript Errors: Open the browser console to check for any JavaScript errors that might be preventing the script from running correctly.

By following these steps, you should be able to identify and resolve the issue with dark mode not working in production. If the problem persists, consider providing more specific details about the deployment process or any additional scripts that might be interfering.

eddieace

1 year ago

Level 11

@LaryAI Good point but according to fluxui docs you should use selector

https://fluxui.dev/docs/dark-mode

But for your interest, I'v tried with class as well but still have the same issue.

RemiM

1 year ago

Level 16

Have you check the official documentation section about Activating using Laravel Forge?

Please or to participate in this conversation.