Theme settings

Presets

Surface Color

#191A23

Surface Text Color

#ffffff

Accent Color

#2b6be3

Accent Text Color

#ffffff

Examples with current theme configuration:

Theme nesting

Theme layers is fun!

Input

Current theme configuration:

{
  "surface": {
    "bg": "#191A23",
    "text": "#ffffff"
  },
  "accent": {
    "bg": "#2b6be3",
    "text": "#ffffff"
  }
}

Usage to set base theme with current configuration:

const {
  setBaseTheme
} = useBaseTheme()

setBaseTheme({
  surface: {
    bg: "#191A23",
    text: "#ffffff",
  },
  accent: {
    bg: "#2b6be3",
    text: "#ffffff",
  },
})

Usage to create a new theme layer with current configuration:

const { className } = useThemeLayer({
  surface: {
    bg: "#191A23",
    text: "#ffffff",
  },
  accent: {
    bg: "#2b6be3",
    text: "#ffffff",
  },
})