Color modes

This component is used to enable applications to style our components in different modes: light and dark.

Note: many of our components have yet to be converted to use these color names.

ColorModeProvider

To use, import the ColorModeProvider into the root of your application (such as _app.tsx for next.js applications, or an App component for other react applications.) This component provides the context for our color mode to be consumed within the application.


import { ColorModeProvider } from '@stacks/ui';

// _app.tsx
const AppWrapper = ({ children, colorMode = 'light' }: AppWrapperProps => (
  <ThemeProvider>
    <CSSReset />
    <ColorModeProvider onChange={handleColorModeChange} colorMode={colorMode}>
        {children}
    </ColorModeProvider>
  </ThemeProvider>
);import { ColorModeProvider } from '@stacks/ui';// _app.tsxconst AppWrapper = ({ children, colorMode = 'light' }: AppWrapperProps => (  <ThemeProvider>    <CSSReset />    <ColorModeProvider onChange={handleColorModeChange} colorMode={colorMode}>        {children}    </ColorModeProvider>  </ThemeProvider>);

Provider Props

ColorModeProvider takes only a few props:

colorMode?: 'light' | 'dark'
onChange?: (mode: string) => void

colorMode

Useful for setting a default value, or a passing a persisted set value to default to.

onChange

This method is called when the the color mode is toggled via the toggleColorMode function that you can access via the useColorMode hook. Here is an example to illustrate how one might persist the value to a cookie so that it can be used in a server side rendered environment.


import { ColorModeProvider } from '@stacks/ui';

import engine from 'store/src/store-engine';
import cookieStorage from 'store/storages/cookieStorage';

// _app.tsx

const COLOR_MODE_COOKIE = 'color_mode';
const cookieSetter = engine.createStore([cookieStorage]);
const handleColorModeChange = (mode: string) => cookieSetter.set(COLOR_MODE_COOKIE, mode);

const AppWrapper = ({ children, colorMode = 'light' }: AppWrapperProps => (
  <ThemeProvider>
    <CSSReset />
    <ColorModeProvider onChange={handleColorModeChange} colorMode={colorMode}>
        {children}
    </ColorModeProvider>
  </ThemeProvider>
);import { ColorModeProvider } from '@stacks/ui';import engine from 'store/src/store-engine';import cookieStorage from 'store/storages/cookieStorage';// _app.tsxconst COLOR_MODE_COOKIE = 'color_mode';const cookieSetter = engine.createStore([cookieStorage]);const handleColorModeChange = (mode: string) => cookieSetter.set(COLOR_MODE_COOKIE, mode);const AppWrapper = ({ children, colorMode = 'light' }: AppWrapperProps => (  <ThemeProvider>    <CSSReset />    <ColorModeProvider onChange={handleColorModeChange} colorMode={colorMode}>        {children}    </ColorModeProvider>  </ThemeProvider>);

useColorMode

There is a color mode hook exposed that can be used to access the current colorMode value and a method to toggle the color mode.


import { useColorMode } from '@stacks/ui';

export const ColorModeButton = forwardRef((props: LinkProps, ref: Ref<HTMLDivElement>) => {
  const { colorMode, toggleColorMode } = useColorMode();
  return (
    <IconButton onClick={toggleColorMode} title="Toggle color mode" {...props} ref={ref}>
      {colorMode === 'dark' ? <DarkModeIcon /> : <LightModeIcon />}
    </IconButton>
  );
});
);import { useColorMode } from '@stacks/ui';export const ColorModeButton = forwardRef((props: LinkProps, ref: Ref<HTMLDivElement>) => {  const { colorMode, toggleColorMode } = useColorMode();  return (    <IconButton onClick={toggleColorMode} title="Toggle color mode" {...props} ref={ref}>      {colorMode === 'dark' ? <DarkModeIcon /> : <LightModeIcon />}    </IconButton>  );}););

Colors

With the color modes component, we have a new way of naming our colors. Rather than them reflecting the name of each color, we now are using more semantically meaningful names. With this, we have exposed a helper function called color that allows you to pass in a name for one of the colors. This is useful because with typescript, it allows for autocomplete functionality and the ability to ensure strict typechecking on something like a color name.


import { color } from '@stacks/ui';

// some-component.tsx
<Box background={color('bg-alt')} />;import { color } from '@stacks/ui';// some-component.tsx<Box background={color('bg-alt')} />;

Here are all of the type literals:


export type ColorsStringLiteral =
  | 'accent'
  | 'bg'
  | 'bg-alt'
  | 'bg-light'
  | 'invert'
  | 'text-hover'
  | 'text-title'
  | 'text-caption'
  | 'text-body'
  | 'input-placeholder'
  | 'border'
  | 'feedback-alert'
  | 'feedback-error'
  | 'feedback-success';export type ColorsStringLiteral =  | 'accent'  | 'bg'  | 'bg-alt'  | 'bg-light'  | 'invert'  | 'text-hover'  | 'text-title'  | 'text-caption'  | 'text-body'  | 'input-placeholder'  | 'border'  | 'feedback-alert'  | 'feedback-error'  | 'feedback-success';

Search docs

⌘