Dark Mode
Learn how Neura handles dark mode and how to customize it
Overview
By default, Neura will handle the appearance of your application by adding a
dark class to the html element depending
on the user's system preference or selected appearance.
Neura includes a built-in theme switcher component that allows users to toggle between light, dark, and system preferences. The theme preference is automatically saved to localStorage and persists across page reloads.
Using the Theme Switcher
Neura provides a theme switcher component that you can add to your application:
<neura::theme-switcher variant="dropdown" />
The theme switcher component supports multiple variants:
dropdown, inline, and stacked.
Alpine.js Theme Magic
Neura provides an Alpine.js magic property
$theme that you can use in your components:
<button @click="$theme.setLight()">
Light Mode
</button>
<button @click="$theme.setDark()">
Dark Mode
</button>
<button @click="$theme.setSystem()">
System Preference
</button>
<div x-show="$theme.isResolvedToDark">
This content is only visible in dark mode
</div>
Available methods and properties:
| Method/Property | Description |
|---|---|
| $theme.setLight() | Set theme to light mode |
| $theme.setDark() | Set theme to dark mode |
| $theme.setSystem() | Use system preference |
| $theme.toggle() | Toggle between light and dark |
| $theme.isResolvedToLight | Check if currently in light mode |
| $theme.isResolvedToDark | Check if currently in dark mode |
Manual Theme Management
If you don't want Neura to handle theme management for you, you can remove the theme management from the JavaScript
globals and handle the appearance of your application manually.
To disable automatic theme management, you can comment out or remove the theme initialization in your JavaScript files.
Custom Dark Mode Styles
Neura uses Tailwind's dark mode variant. You can customize dark mode styles using the
dark: prefix:
<div class="bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white">
Content that adapts to theme
</div>