ThemeModeToggle

Lets users switch between light and dark UI themes.

It leverages the store so that their selection is persisted.

Usage

For most users, this component will be automatically added to the header of shadmin's default <Layout>.

For custom layouts, or to put the theme switcher in a settings menu, simply render the component without props:

import { ThemeModeToggle } from "@/components/admin";
 
<ThemeModeToggle />;

Setting The Preferred Theme

Shadmin defaults to the system theme mode — it follows the operating system's light/dark setting. Once a user picks a mode with the toggle, their choice is persisted via the store and survives reloads.

Customizing the Themes

Shadmin leverages Shadcn/ui Theming to provide light and dark themes out of the box using CSS variables. You can customize these themes by editing the src/index.css file in your project.

:root {
  /* Light theme overrides */
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  /* Add more CSS variable overrides as needed */
}
 
.dark {
  /* Dark theme overrides */
  --primary: oklch(0.615 0.2 0);
  --primary-foreground: oklch(0.215 0 0);
  /* Add more CSS variable overrides as needed */
}

Check out the list of CSS variables provided by Shadcn/ui for more customization options.