Search⌘ K

Adding More Theme Props

Explore how to extend themes by adding custom properties such as border-radius and link them to dynamic CSS variables using css-theming. This lesson helps you create adaptable UI components that respond to active themes for more flexible styling.

Step 1: Add custom prop #

Adding additional props to the theme definition is easy:

$ct-themes: (
  'default': (
    'brightness': 'light',

    'border-radius': 3px // We're adding our own defined theme prop here that we'll use ourselves
  ),
  'default-dark': (
   
...