Theme Node

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

Themes are powered by Chakra UI (opens in a new tab). 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

Prop	`theme`
Type	`string`
Default	return { colors: { light: { text: { primary: '#111215', muted: '#707173', accent: '#6967E2', warning: '#E5B847' }, border: { 100: '#ECECED', 200: '#D9D9D9', 300: '#B3B3B3' }, background: { chrome: '#F8F8F8', base: '#FFFFFF', levelOne: '#F6F6F6', levelTwo: '#ECECED', levelThree: '#D9D9D9' } }, dark: { text: { primary: '#FFFFFF', muted: '#C2C2C2', accent: '#7A79CD', warning: '#FCCA4C' }, border: { 100: '#242527', 200: '#37383B', 300: '#5E5E60' }, background: { chrome: '#3E3F42', base: '#111215', levelOne: '#1A1B1E', levelTwo: '#242527', levelThree: '#37383B' } } } }

The TypeScript function to run to generate the theme object.

Page Variable Button