Dark Mode

Shiloh

December 7, 2025

3 min read

Shiloh includes a complete dark mode implementation with system preference detection and manual toggle.

How It Works #

The theme uses the theme-change library to handle theme switching. The current theme is stored in localStorage and persisted across page loads.

Theme Detection Order #

Check localStorage for saved preference
If no preference saved, check system preference (prefers-color-scheme)
Fall back to defaultAppearance from site configuration

Configuration #

Site-Wide Settings #

In params.toml:

defaultAppearance = "light"      # Initial theme: "light" or "dark"
autoSwitchAppearance = true      # Respect system preference

Toggle Visibility #

The theme toggle button appears in the header (navbar). Control its visibility:

[header]
  showAppearanceSwitcher = true  # Show/hide the toggle button

Built-in Themes #

Shiloh includes four daisyUI themes in assets/css/main.css:

Theme	Type	Description
`shiloh`	Light	Default light theme with warm, earthy tones
`shiloh-dark`	Dark	Dark companion to shiloh theme
`brodie`	Light	Alternative light theme with purple/violet accents
`brodie-dark`	Dark	Dark companion to brodie theme

Theme Definition Syntax #

Themes are defined using daisyUI v5’s @plugin syntax:

@plugin "daisyui/theme" {
  name: "shiloh";
  default: true;
  prefersdark: false;
  color-scheme: "light";
  --color-primary: oklch(52% 0.09 142);
  --color-secondary: oklch(62% 0.11 55);
  --color-accent: oklch(78% 0.12 85);
  --color-base-100: oklch(99.1% 0.005 109.000);
  --color-base-content: oklch(25% 0.02 90);
  /* ... more colors */
}

Dark Theme Example #

@plugin "daisyui/theme" {
  name: "shiloh-dark";
  default: false;
  prefersdark: false;
  color-scheme: "dark";
  --color-primary: oklch(65% 0.12 142);
  --color-secondary: oklch(70% 0.13 55);
  --color-accent: oklch(80% 0.13 85);
  --color-base-100: oklch(19% 0.01 240);
  --color-base-content: oklch(90% 0.01 109);
  /* ... more colors */
}

OKLCH Colors #

Shiloh uses OKLCH color space for perceptually uniform colors. This means:

Colors look consistent across different hues
Lightness values are visually accurate
Easier to create harmonious color schemes

Syntax Highlighting #

Code blocks automatically adapt to the current theme. The syntax highlighting colors are defined to work with daisyUI color variables:

Keywords use the primary color
Strings use the success color
Numbers use the warning color
Comments are muted

Creating Custom Themes #

To create your own theme:

Create assets/css/custom.css in your project (see Customization )
Add a new theme definition using the @plugin "daisyui/theme" syntax
Update colorScheme in your site configuration

/* assets/css/custom.css */
@plugin "daisyui/theme" {
  name: "my-theme";
  default: false;
  prefersdark: false;
  color-scheme: "light";
  --color-primary: oklch(50% 0.2 260);
  --color-secondary: oklch(60% 0.15 300);
  --color-accent: oklch(70% 0.18 80);
  --color-base-100: oklch(98% 0.01 260);
  --color-base-200: oklch(94% 0.02 260);
  --color-base-300: oklch(90% 0.03 260);
  --color-base-content: oklch(20% 0.02 260);
  --color-neutral: oklch(30% 0.02 260);
  --color-neutral-content: oklch(95% 0.01 260);
  --color-info: oklch(65% 0.1 240);
  --color-success: oklch(65% 0.12 160);
  --color-warning: oklch(70% 0.15 70);
  --color-error: oklch(55% 0.15 25);
}

Then in your params.toml:

colorScheme = "my-theme"

JavaScript API #

The theme-change library exposes a simple API:

// Get current theme
document.documentElement.getAttribute('data-theme')

// Set theme programmatically
document.documentElement.setAttribute('data-theme', 'shiloh-dark')

Browser Support #

Theme switching works in all modern browsers. The prefers-color-scheme media query is supported in:

Chrome 76+
Firefox 67+
Safari 12.1+
Edge 79+

Older browsers default to the light theme.

Author

Shiloh - A Happy Dog

Built with Tailwind CSS v4 and daisyUI v5