Skip to content
AdmindekDocs

Theming

Customize colors, dark mode, and the Theme Customizer.

Theme Customizer

The Theme Customizer is accessible via the gear icon in the dashboard header. It opens a drawer panel that lets you configure the visual appearance of the entire application in real time without touching any code.

The customizer exposes the following options:

  • Color Preset — 10 built-in palettes: Ocean Blue, Royal Purple, Rose Pink, Crimson Red, Vibrant Orange, Golden Yellow, Forest Green, Aqua Cyan, Dark, and Navy.
  • Color Scheme — switch between Light, Dark, or System (follows the OS preference).
  • Sidebar Theme — independently set the sidebar to Light or Dark regardless of the main scheme.
  • Text Direction — toggle between LTR (left-to-right) and RTL (right-to-left) layouts.
  • Container Mode — choose between a full-width Fluid layout or a centered Boxed layout.
  • Locale — switch the UI language via the built-in locale switcher.

All selections are persisted in localStorage so the user's preferences survive page reloads.

Color Presets

Each color preset is implemented as a set of CSS custom properties applied to the :root element (or [data-theme] attribute). Components reference these variables through Tailwind's utility classes, so switching a preset instantly repaints the entire UI without a full page reload.

The primary color variables used across components are:

/* Primary brand color */
--primary: 210 100% 56%;
--primary-foreground: 0 0% 100%;

/* Sidebar accent color */
--sidebar-primary: 210 100% 56%;
--sidebar-primary-foreground: 0 0% 100%;

/* Ring / focus outline */
--ring: 210 100% 56%;

The selected preset name is saved to localStorage under the key admindek-color-preset and re-applied on every page load by the theme initialisation script.

Dark Mode

Dark mode is managed by the ThemeProvider which wraps the entire application. It supports three values:

  • light — always use the light scheme.
  • dark — always use the dark scheme.
  • system — match the OS-level preference via prefers-color-scheme.

The active theme is stored in localStorage under the key admindek-theme. A toggle button in the dashboard header cycles between light and dark. The dark class is applied to <html> so all Tailwind dark: variants respond automatically.

Creating Custom Colors

To add a new color preset, open components/dashboard/theme-customizer.tsx and extend the color presets array with your new entry. Each preset defines an object with a label, an identifier, and HSL values for the primary variables.

// Inside theme-customizer.tsx
const COLOR_PRESETS = [
  // ... existing presets
  {
    name: "Emerald",
    value: "emerald",
    primary: "152 69% 40%",
    primaryForeground: "0 0% 100%",
  },
];

After adding the entry the new preset will appear automatically in the customizer drawer. Update your global CSS file with the corresponding :root[data-preset="emerald"] block that sets the CSS custom properties for that palette.

Sidebar Theme

The sidebar has its own independent light/dark toggle, separate from the main application color scheme. This lets you, for example, keep the main content area in light mode while running a dark sidebar — a common pattern in professional dashboards.

The sidebar theme is stored in localStorage under the key admindek-sidebar-theme and applied via a data-sidebar-theme attribute on the sidebar wrapper element. SCSS variables scoped to that attribute handle the color differences.