Theming

Colors

The color theme is inspired by / compatible with Radix Colors.

Automatic setup

With the fulldev-ui integration you can easily set a theme and generate a radix color palette. See the integration page for details.

Manual setup

You can define a base and a brand theme, both with 12 steps and 1 contrast step for text on step 9. For a detailed explenation see this page .

:root,
.theme-light {
  --base-1: ;
  --base-2: ;
  --base-3: ;
  --base-4: ;
  --base-5: ;
  --base-6: ;
  --base-7: ;
  --base-8: ;
  --base-9: ;
  --base-10: ;
  --base-11: ;
  --base-12: ;
  --base-contrast: ;

  --brand-1: ;
  --brand-2: ;
  --brand-3: ;
  --brand-4: ;
  --brand-5: ;
  --brand-6: ;
  --brand-7: ;
  --brand-8: ;
  --brand-9: ;
  --brand-10: ;
  --brand-11: ;
  --brand-12: ;
  --brand-contrast: ;
}

Dark theme

Dark mode is set via a simple .theme-dark class.

If you want to use a dark theme by default, remove the :root selector from the light theme and add it to the dark theme.

Components in Fulldev UI that support theme switching have the theme prop available, which adds either the theme-dark or theme-light class

.theme-dark {
  /* Same variables here as above */
}

Radius

The --border-radius variable is a multiplier applied to all radius values. The default value is 1.

:root {
  --border-radius: 1;
}

Other

Since Fulldev UI uses just regular CSS with low specificity, you can customize anything else using custom CSS.

We plan to add more customization via variables later.