> ## Documentation Index > Fetch the complete documentation index at: https://docs.aikeedo.com/llms.txt > Use this file to discover all available pages before exploring further. # Dark mode and colors > Implement light and dark modes in an Aikeedo theme, and respect the color scheme administrators configure. Aikeedo lets administrators decide which color modes a site offers and which one is the default. A theme reads that setting, applies the right mode before the page paints, and styles both. ## The setting `option.color_scheme` holds: | Key | Meaning | | -------------------------- | ------------------------------------------------------------------------------------- | | `modes` | Which modes are available, for example `['light', 'dark']`, `['light']` or `['dark']` | | `default` | `system`, `light` or `dark` | | `accent`, `accent_content` | Accent colors, exposed as `{ hex, r, g, b, rgb }` | ## Apply the mode before paint Resolve the mode in the document head, so there's no flash of the wrong theme: ```twig snippets/js.twig theme={null} ``` The result is ``, which is what your CSS keys off. ## Define the palette Declare colors as space-separated RGB channels, so Tailwind can apply opacity to them: ```twig snippets/css.twig theme={null} ``` ```javascript tailwind.config.js theme={null} export default { content: ['!./node_modules/**/*', './**/*.twig', './src/**/*.{js,css}'], darkMode: ['class', '[data-mode="dark"]'], theme: { extend: { colors: { main: 'rgb(var(--color-main) / )', content: 'rgb(var(--color-content) / )', 'content-dimmed': 'rgb(var(--color-content-dimmed) / )', line: 'rgb(var(--color-line) / )', accent: 'rgb(var(--color-accent) / )', }, }, }, }; ``` With `darkMode` bound to the attribute, `dark:` variants work as usual: ```html theme={null}
…
``` Because every color is a variable, one block of overrides under `[data-mode="dark"]` themes the whole site. Avoid hardcoding hex values in templates. ## The switcher Show a toggle only when more than one mode is available: ```twig theme={null} {% if option.color_scheme.modes is not defined or option.color_scheme.modes|length > 1 %} {% endif %} ``` The starter's `mode-switcher` element flips `localStorage.mode` and updates `document.documentElement.dataset.mode`, so the choice survives navigation. ## Using the configured accent The accent color is exposed ready to drop into a variable: ```twig theme={null} --color-accent: {{ option.color_scheme.accent.rgb|default('99 102 241') }}; --color-accent-content: {{ option.color_scheme.accent_content.rgb|default('255 255 255') }}; ``` | Property | Example | | ------------- | ----------------------------------------- | | `hex` | `#6366f1` | | `r`, `g`, `b` | `99`, `102`, `241` | | `rgb` | `99 102 241`, formatted for CSS variables | The bundled themes ship fixed palettes and ignore the accent setting. Reading it makes your theme adjustable from the admin panel without a rebuild, which is usually what customers expect. ## Checklist
The mode is applied in the head, before the body renders.
Only the configured modes are reachable, and the switcher hides when there's one.
Both modes are checked for contrast, including borders and dimmed text.
Images and logos have dark variants where they need them, for example `option.brand.logo_dark`.
The choice persists across page loads.
## Related * [Templates and layouts](/development/themes/templates-and-layouts) * [JavaScript components](/development/themes/javascript-components) * [Branding settings](/website-basics/branding)