Challenge | Stack | Resolved On |
---|---|---|
Customize theme color of Fumadocs | Fumadocs | 2025-06-20 |
Limited information can be found in Fumadocs official docs
:root {
--color-fd-background: hsl(0, 0%, 100%);
}
.dark {
--color-fd-background: hsl(0, 0%, 0%);
}
The following css can be used in global.css to set theme color
:root {
--color-fd-card: #535353; /* sidebar */
--color-fd-background: #4B4C4E; /* background */
--color-fd-primary: #E7E5E4; /* primary text */
--color-fd-accent-foreground: #FFFFFF; /* hovered menu items */
--color-fd-muted-foreground: #ABB0B5; /* menu sub-items */
--color-fd-accent: #62676C; /* hovered area */
--color-fd-border: #787A7C; /* border */
--color-fd-popover: #3B3C45; /* search bar */
--color-fd-popover-foreground: #E7E5E4; /* search bar text */
--color-fd-secondary: #3B3C45;; /* small search bar */
--color-fd-muted: #3B3C45; /* hovered popover */
--color-fd-foreground: #E7E5E4; /* primary text */
--color-fd-secondary-foreground: #FFFFFF; /* secondary text */
}