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:

import React from 'react';
import { StyleProvider, ThemePicker, Button } from 'vcc-ui';

export const App = () => (
  <StyleProvider>
    <ThemePicker variant="light">
      <Button>Hello</Button>
    </ThemePicker>
  </StyleProvider>
);

import React from 'react';
import { StyleProvider, ThemePicker, Button } from 'vcc-ui';
export const App = () => (
  <StyleProvider>
    <ThemePicker variant="light">
      <Button>Hello</Button>
    </ThemePicker>
  </StyleProvider>
);

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

import React from 'react';
import { ThemePicker, Button } from 'vcc-ui';

export const MyComponent = () => (
  <ThemePicker variant="light">
    <Button>Default Button</Button>
    <ThemePicker variant="dark">
      <Button>A dark themed button</Button>
    </ThemePicker>
  </ThemePicker>
);

import React from 'react';
import { ThemePicker, Button } from 'vcc-ui';
export const MyComponent = () => (
  <ThemePicker variant="light">
    <Button>Default Button</Button>
    <ThemePicker variant="dark">
      <Button>A dark themed button</Button>
    </ThemePicker>
  </ThemePicker>
);

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:

import React from 'react';
import { useTheme, View } from 'vcc-ui';

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

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

import React from 'react';
import { useTheme, View } from 'vcc-ui';
export const MyComponent = () => {
  const theme = useTheme();
  return (
    <View
      extend={{
        background: theme.color.background.secondary,
        color: theme.color.foreground.alert,
      }}
    >
      Hello themed component
    </View>
  );
};

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.

import React from 'react';
import { Theme, View } from 'vcc-ui';

class MyComponent extends React.Component {
  render() {
    return (
      <Theme>
        {({ theme }) => (
          <View
            extend={{
              background: theme.color.background.secondary,
              color: theme.color.foreground.alert,
            }}
          >
            Hello themed component
          </View>
        )}
      </Theme>
    );
  }
}

import React from 'react';
import { Theme, View } from 'vcc-ui';
class MyComponent extends React.Component {
  render() {
    return (
      <Theme>
        {({ theme }) => (
          <View
            extend={{
              background: theme.color.background.secondary,
              color: theme.color.foreground.alert,
            }}
          >
            Hello themed component
          </View>
        )}
      </Theme>
    );
  }
}

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.

import React from 'react';
import { View } from 'vcc-ui';

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

import React from 'react';
import { View } from 'vcc-ui';
export const MyComponent = () => (
  <View
    extend={({ theme }) => ({
      background: theme.color.background.secondary,
      color: theme.color.foreground.alert,
    })}
  >
    Hello themed component
  </View>
);

Theming
Accessing theme props
useTheme hook
Theme component
extend prop

Theming
Accessing theme props
useTheme hook
Theme component
extend prop

Theming🔗

Accessing theme props🔗

useTheme hook🔗

Theme component🔗

extend prop🔗