Dark Theme helper

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.

The dark theme helper needs AlpineJS to work, and Livewire 3 automatically delivers AlpineJS only when there are Livewire components on the page. To ensure the dark theme helper works even if there are no Livewire components on the page, load AlpineJS using the @livewireScripts directive as mentioned in the documentation.

1. Enable the dark theme support in your TailwindCSS configuration file:

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

2. Add the helper on the html tag of your layout:

<html ...
      x-data="tallstackui_darkTheme()" 
      x-bind:class="{ 'dark bg-gray-700': darkTheme, 'bg-white': !darkTheme }">
    <!-- ... -->
</html>

Alternatively, 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('other-name')" 
      ...>
    <!-- ... -->
</html>

Starting from version 1.5.3 you can force the darkTheme variable to be initialized to true:

<html ...
      x-data="tallstackui_darkTheme('other-name', true)" 
      ...>
    <!-- ... -->
</html>

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

3. 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 tallstackui_darkTheme helper.
If you prefer, TallStackUI offer the Theme Switch component to easily manage the dark theme.

4. Rebuild your assets:

npm run build && php artisan optimize:clear

5. Now 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>
<div class="bg-white dark:gray-800">Hello World</div>