Theme Switch

Usage

import { ThemeProvider } from "@govtechmy/myds-react/hooks";
import { ThemeSwitch } from "@govtechmy/myds-react/theme-switch";

export default () => (
  <ThemeProvider>
    <ThemeSwitch />
  </ThemeProvider>
);

Examples

As Toggle

By default, ThemeSwitch will appear as a toggle button, switching between light and dark mode, just like below.

As Select

You can also use ThemeSwitch as a select dropdown, allowing users to choose from a list of themes.

Custom Themes

You can also extend themes available by defining the themes property! This also lets you to customize the theme icons or change up the order of themes.

Props

ThemeSwitch

[
  { 
      label: "Light",
      value: "light", 
      icon: <SunIcon />; 
  },
  { 
      label: "Dark",
      value: "dark", 
      icon: <MoonIcon />; 
  }
]

ThemeProvider