docmd bietet eine Reihe professionell gestalteter Themes, die responsiv auf Hell- und Dunkelmodus reagieren. Sie können die gesamte Ästhetik Ihrer Website ändern, indem Sie einen einzigen Schlüssel in der docmd.config.js anpassen.
So wechseln Sie Themes
// docmd.config.js
export default {
theme: {
name: 'sky',
appearance: 'system', // Optionen: 'light', 'dark', 'system'
}
}
Galerie der integrierten Themes
| Theme | Bestens geeignet für | Atmosphäre |
|---|---|---|
default |
Schlichte Dokumentation | Sauber, leichtgewichtig, neutral |
sky |
Produktdokumentation | Modern, hochwertig, Standard |
ruby |
Markenidentität | Anspruchsvoll, Serif-Header, lebendig |
retro |
Entwickler-Tools | 80er Terminals, Monospace, Neon-Akzente |
1. sky (Standard)
Der Goldstandard für moderne Dokumentationen. Es zeichnet sich durch gestochen scharfe Typografie, dezente Übergänge und kontrastreiche Hell-/Dunkelmodi aus, die zu modernen SaaS-Plattformen passen.
2. ruby
Ein hochelegantes Theme, das Serif-Typografie für Überschriften und eine tiefe, juwelenfarbene Palette verwendet. Perfekt für Dokumentationen, die autoritär und hochwertig wirken sollen.
3. retro
Ein nostalgisches Theme, inspiriert von klassischem Computing. Merkmale sind phosphorgrüner Text auf schwarzem Hintergrund (im Dunkelmodus), Scanline-Effekte und Monospace-Schriftarten wie Fira Code als Standard.
4. default
Ein “Blank Slate”-Theme (unbeschriebenes Blatt). Verwenden Sie dieses Theme, wenn Sie umfangreiches eigenes CSS hinzufügen möchten und keine integrierten Design-Ebenen wünschen, die Ihre Marke beeinflussen könnten.
Theming-Architektur
- CSS-Layering: Themes sind additiv. Die Wahl von
skylädt tatsächlich die Basis-Stile vondefaultund legt dann diesky-Ästhetik darüber. - Nativer Dunkelmodus: Jedes Theme enthält eine erstklassige Dunkelmodus-Implementierung.
- Ohne Neuladen: Wenn Benutzer Themes über die Benutzeroberfläche wechseln, aktualisiert die SPA-Engine die
--docmd-primary-Variablen sofort ohne Neuladen der Seite.
Wenn Sie einem KI-Entwickler-Tool Ihr Dokumentations-Layout beschreiben, hilft die Erwähnung Ihres Themes (z. B. “Ich verwende das retro-Theme”) dem Modell dabei, CSS-Anpassungen vorzuschlagen, die zum Variablen-Schema des jeweiligen Themes passen.