Dark Mode
Dark mode works out of the box with zero configuration. A toggle appears in the navbar. The user's preference persists in localStorage across sessions and pages.
How it works
Sourcey applies a .dark class to the root element when dark mode is active. All built-in components and syntax highlighting themes respond to this class. The toggle state is read from localStorage on page load before the first paint, so there's no flash of the wrong theme.
Logo variants
If your logo doesn't work on both light and dark backgrounds, provide separate variants:
logo: {
light: "./logo.png", // shown in light mode
dark: "./logo-dark.png", // shown in dark mode
href: "/", // optional: where the logo links to
},A single string still works if your logo handles both modes:
logo: "./logo.png",Custom CSS in dark mode
If you're using custom CSS, target dark mode with the .dark selector on the root element:
/* custom.css */
.dark .my-custom-element {
background: #1a1a2e;
color: #e0e0e0;
}Dark mode requires no configuration. It works with every preset and every color scheme. All built-in theme colors generate appropriate dark variants automatically.
