Theme

Radian utilizes variables mode in design file and css classes in development file to maintain theme. The color names for theme are kept consistent in both design and development files. Since both files start at same variables it is easier for the design and development team to communicate.

The colors in design system are minimized to a small palette based on usage of colors. Only necessary colors are added, so that maintaining, scaling and adding themes to Radian is a lot easier.

Dark Mode

1. Dark mode in Figma: Easily switch dark mode via going to the ‘Appearance’ panel → ‘Themes’ and select ‘Dark mode’.

2. Dark mode in Development: Radian supports dark mode by default, you can acces those colors in global CSS.

How to Make Custom Themes

1. New Theme Mode: Add a new theme mode in the theme variable file.

2. Tweak colors: Change the theme colors according to your liking

3. Change Mode in Design: Change the appearance to the new ‘Sepial’ Theme

Custom Theme Samples

Elevation Colors

Elevation helps create a sense of depth in interfaces by showing how elements are layered above one another. In light mode, this is usually done via shadows, but in dark mode, shadows alone don't work as effectively, and just color inversion often makes designs look flat or oddly inverted.

Radian solves this by using a dedicated set of elevation colors designed for dark mode to make sure visual depth is maintained.

Adding a Theme Toggle