Theming

Theming is done with CSS variables.

Colors

The color theme is inspired by, and compatible with Radix Colors.

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 anyting else using custom CSS.

We plan to add more customization via variables.