Theming🔗

VCC UI derives all design properties like colors, typography, spacing etc. from a theme object. These properties are also referred to as design tokens.

There are two different theme variants shipped by default: light and dark (dark mode). You can set a theme in your app using the ThemePicker component:

You can nest theme pickers as much as you like, effectively rendering one theme variant "inside" another theme variant.

Accessing theme props🔗

A lot of times it's useful to be able to utilize the theme when building your own components. Things like colors and media queries are exposed via the theme object.

useTheme hook🔗

If you're building a functional component you can access the theme via the useTheme hook like this:

Theme component🔗

If you are building a class based component you can't use hooks. Instead you can access the theme via a render prop inside the Theme component.

extend prop🔗

Additionally, to simplify theme-based styling, we can also access the theme within our extend prop. We can pass a function of props containing the theme instead of a plain object. This reduces the overhead since we don't have to import the useTheme hook or Theme component.

2022 © Volvo Car Corporation