Dark Mode

Zinc UI provides pre-built components for managing theme preferences. Use the following components in your layout to toggle between light and dark modes:

<x-theme-switcher variant="header" />
<x-theme-switcher variant="sidebar" />

Set up Tailwind config

Open the


    tailwind.config.js

file in your project. Set the


    darkMode

property to


    "selector"

 import defaultTheme from "tailwindcss/defaultTheme";
  
 /** @type {import('tailwindcss').Config} */
 export default {
+    darkMode: "selector", 
     content: [ ...
         "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
         "./storage/framework/views/*.php",
         "./resources/**/*.blade.php",
     ], 
     theme: {
         extend: {
             fontFamily: { ...
                 sans: ["Inter", ...defaultTheme.fontFamily.sans],
                 mono: ["JetBrains Mono", ...defaultTheme.fontFamily.mono],
             }, 
         },
     },
     plugins: [],
 };

Keyboard shortcuts

Zinc UI supports quick theme switching using default keyboard shortcuts, which you can also customize:

Alt+M : Enable dark mode
Alt+L : Enable light mode
Alt+P : Use system preference

To customize shortcuts, use the


    x-theme-switcher

component and Alpine.js bindings:

<x-theme-switcher variant="header" class="..."
    x-on:keydown.alt.l.window="lightMode()"
    x-on:keydown.alt.m.window="darkMode()"
    x-on:keydown.alt.p.window="systemMode()" />

Theme changes sync instantly across all open tabs, no refresh required. Open multiple tabs to see it in action!