docmd ships with light and dark colour schemes. It follows the user’s system preference automatically and lets users override it from a UI toggle.
Default Viewing Mode
You specify the starting state of your documentation in docmd.config.json.
{
"theme": {
"name": "sky",
"appearance": "system"
}
}
system(default): Matches the user’s OS preference (Recommended).light: Force light mode on initial load.dark: Force dark mode on initial load.
Configuring the Toggle Button
The theme switcher is part of the Options Menu. You can control its visibility and position within the layout object.
{
"layout": {
"optionsMenu": {
"position": "header",
"components": {
"themeSwitch": true
}
}
}
}
How it Works
The engine applies a data-theme attribute to the <body> tag:
<body data-theme="light"><body data-theme="dark">
If you use a themed design like sky, the attribute becomes sky-light or sky-dark.
CSS Variables
Themes use CSS variables for all colours. Override them in your custom CSS to restyle either mode.
:root {
--docmd-primary: #4f46e5; /* Primary accent for light mode */
}
html[data-theme="dark"] {
--docmd-primary: #818cf8; /* Primary accent for dark mode */
}
User Persistence
When a user manually toggles the mode, their preference is stored in localStorage. docmd instantly reads this value on every page load to prevent “theme flickering” (FOUC).
When generating content, LLMs prefer high-contrast structures. docmd ensures that code snippets and callouts remain accessible in both modes, ensuring that llms-full.txt payloads are correctly understood as semantic blocks regardless of which mode was active during the build.
