Skip to main content

Theming

Figdown has a two-variable theming system: theme sets the color mode, accent sets the highlight color. Both are declared as top-level meta lines at the very beginning of the file.

Theme​

Controls the overall color mode. Default is light.

theme: dark

# My Page
Content here.

Options: light, dark.

Accent​

Sets the primary highlight color used for buttons, links, and interactive elements. Default is blue.

accent: purple

blue button: Primary action
outline button: Secondary action

Options: blue, red, green, yellow, purple, gray.

Combining theme and accent​

Both can be set together at the top of the file.

theme: dark
accent: green

nav:
  logo: My App
  link: Home → /home

hero:
  title: Welcome
  green button: Get Started → /signup

Element-level color overrides​

Color modifiers on individual elements override the accent. A red button: stays red regardless of the page accent.

accent: blue

blue button: Primary
red button: Danger action
green badge: Active