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. Here's an example of two Card components, in inside the other, to display different theming inside the Cards.

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.

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.

const style = ({ theme }) => ({
  background: theme.color.background.secondary,
  color: theme.color.foreground.alert,
});

const MyComponent = () => {
  return <View extend={style}>Hello themed component</View>;
};

useTheme hook

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

export const MyComponent = () => {
  const theme = useTheme();

  return (
    <View
      extend={{
        background: theme.color.background.secondary,
        color: theme.color.foreground.alert,
      }}
    >
      Hello themed component
    </View>
  );
};