Theme Node

Themes allow you to customize the look and feel of your application from a central stylesheet.

Themes are powered by Chakra UI. Please refer to their documentation for a complete reference of all theme properties.

Dynamic Themes

Themes are functions evaluated client-side within the current page's scope upon page load. They may contain any TypeScript you would like. Dynaboard bundles a handful of helpful utility functions to get you started building dynamic themes.

Examples

Defining a custom color

This custom theme defines two custom colors, available as brand.100 and brand.200 in most places where colors are available.

return {
colors: {
brand: {
100: '#7B61FF',
200: '#AAA9FF',
},
},
}

Properties

Theme

Proptheme
Typestring
Defaultreturn { colors: { light: { text: { primary: '#111215', muted: '#707173', accent: '#6967E2', warning: '#E5B847' }, surface: { 100: '#FFFFFF', 200: '#F6F6F6', 300: '#ECECED', 400: '#D9D9D9' } }, dark: { text: { primary: '#FFFFFF', muted: '#88888A', accent: '#7A79CD', warning: '#FCCA4C' }, surface: { 100: '#111215', 200: '#1A1B1E', 300: '#242527', 400: '#37383B' } } } }

The TypeScript function to run to generate the theme object.