Theming

Debase UI uses a very simple theming mechanism.

The styling across the components is unified through a well-defined list of CSS variables.
These variables serve a functional role as design tokens rather than hue values, for example "color-text" and not "primary-500".

Following the Installation guide, you should have defined the default variables in your project.

Once the default theme is set up, you can modify values based on your preferences.

You can edit the values directly; however, a cleaner approach is to overwrite them without changing the original, allowing you to keep track of your customizations. Here are different examples of overwrites.

One cool trick is that you can also add multiple themes. You can implement Light and Dark modes easily. Or, just like this website, let the visitor choose their theme on demand.

To achieve this, you can overwrite the variables conditionally.

As an example, this website uses a simple function to change the class applied to the root HTML element and juggle between different themes.

Here is the list of all the design tokens that are available in the default theme.