Challenge

Stack

Resolved On

Customize theme color of FumadocsFumadocs2025-06-20

Problem

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%);
}

Solution

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 */
}