Dark Theme

Helper to easily manage dark theme.

TallStackUI provides a simple yet powerful helper to add dark theme support to your application. The main idea of this helper is to offer an easy way to control the dark theme by persisting a value in the browser's local storage. After applying the helper, an AlpineJS variable called darkTheme will be offered to control the dark theme persisting the changes in the local storage.

Enable the dark theme support in your TailwindCSS configuration file:

export default {
    darkMode: 'class', 
 
    // ...
}

Add the helper on the html tag of your layout:

<html ... x-data="tallstackui_darkTheme()"> 
    <!-- ... -->
</html>

You can customize the name of the state stored in local storage of the browser, default name is dark-theme

<html ... x-data="tallstackui_darkTheme({ name: 'other-name' })"> 
    <!-- ... -->
</html>

You can also force the darkTheme variable to be initialized to true :

<html ... x-data="tallstackui_darkTheme({ default: 'dark' })"> 
    <!-- ... -->
</html>

This is useful if your theme is dark theme by default.

To avoid conflicts with the Livewire 3 wire:navigate , the class control block must be inserted in the body tag:

<body x-bind:class="{ 'dark bg-gray-700': darkTheme, 'bg-white': !darkTheme }"> 
    <!-- ... -->
</body>

After that, create a button to control the dark theme:

<x-button x-on:click="darkTheme = !darkTheme">Light / Dark Mode</x-button>

This button must be covered by the layout that received the helper. If you prefer, TallStackUI offer the Theme Switch component to easily manage the dark theme.

Rebuild your assets using this command:

npm run build && php artisan optimize:clear

Finally, all you need to do is adapt all your CSS classes to the dark theme variation:

<p class="text-gray-700 dark:text-white">Hello World</p>