Guides

  • Welcome
  • Design Tokens

useTheme

Edit on GitHub

Hooks for interacting with themes.

useTheme

useTheme allows us to use our design tokens anywhere in our application.

import { useTheme } from 'design-system/theme';
const Page = () => {
const { colors, spacing } = useTheme();
// ...
};

useThemeContext

Read and set the active theme in the application. Dark is the default.

const { onThemeChange, themeName } = useThemeContext();
NameTypeNotes
themeName'light', 'dark'Name of the active theme.
onThemeChange(newTheme) => voidSet the active theme

ThemeProvider

In order to make use of these hooks, the application must be wrapped in the ThemeProvider component.

const App = () => (
<ThemeProvider>
<App />
</ThemeProvider>
);

  • Home
  • About
  • Blog
  • Design System
© Copyright 2021 Nathan Simpson. Made in Sydney Australia.