Themes

launch.css includes automatic light and dark theme support using modern CSS.

How It Works

launch.css uses the CSS color-scheme property combined with the light-dark() function. This means themes work automatically based on the user's operating system preference, with no JavaScript required.

Default Behavior

By default, launch.css respects the user's system preference:

:root {
  color-scheme: light dark;
}

This means if a user's OS is set to dark mode, they'll see the dark theme. If set to light mode, they'll see the light theme.

Force a Specific Theme

You can force a specific theme by setting color-scheme on the root element:

/* Force light theme */
	:root {
	  color-scheme: only light;
	}

	/* Force dark theme */
	:root {
	  color-scheme: only dark;
	}

Theme Switching with JavaScript

To let users switch themes, you can toggle the color-scheme property:

// Set light theme
document.documentElement.style.colorScheme = 'only light';

// Set dark theme
document.documentElement.style.colorScheme = 'only dark';

// Reset to system preference
document.documentElement.style.colorScheme = 'light dark';

Example Theme Switcher

<button onclick="document.documentElement.style.colorScheme = 'only light'">
  Light
</button>
<button onclick="document.documentElement.style.colorScheme = 'only dark'">
  Dark
</button>
<button onclick="document.documentElement.style.colorScheme = 'light dark'">
  System
</button>

CSS Variables

launch.css defines color variables that automatically adapt to the theme:

:root {
  --color: light-dark(#09090b, #fafafa);
  --background: light-dark(#fafafa, #09090b);
  --border: light-dark(#d4d4d8, #27272a);
  --color-muted: light-dark(#71717a, #a1a1aa);
  /* ... and more */
	}

You can use these variables in your own CSS to ensure your custom styles also adapt to the current theme.