Color modes

Add dark mode and other color modes.

To add color modes to your app, start by defining the code modes in your theme.js.

theme.js
export default {
  colors: {
    text: "#111",
    background: "#fff",
    primary: "#06f",
    modes: {
      dark: {
        text: "#ededee",
        background: "#1a202c",
        primary: "#fb3640",
      },
    },
  },
}

The above example will have two modes: default and dark.

Usage

Colors are automatically applied when you use the ThemeProvider.

// Default: `background-color: #06f`
// Dark: `background-color: #fb3640`
<button bg="primary>Primary</button

You can also access colors using a callback in style props.

<button text={(theme) => theme.colors.dark.primary}>Button</button>

Setting the color mode

Use the useColorMode hook in your application to access the current color mode or to change the color mode.

This value is stored in localStorage and used whenever the page is loaded if the useLocalStorage useRootStyles flag is set to true.

import React from "react"
import { useColorMode } from "reflexjs" 

export default function () {
  const [colorMode, setColorMode] = useColorMode() 
  return (
    <header>
      <button
        onClick={(e) => {
          setColorMode(colorMode === "default" ? "dark" : "default")
        }}
      >
        Toggle {colorMode === "default" ? "Dark" : "Light"}
      </button>
    </header>
  )
}

prefers-color-scheme

To initialize a color mode based on the prefers-color-scheme media query, add the useColorSchemeMediaQuery flag to your theme.

theme.js
module.exports = {
  useColorSchemeMediaQuery: true, 
  colors: {
    text: "#111",
    background: "#fff",
    primary: "#06f",
    modes: {
      dark: {
        text: "#ededee",
        background: "#1a202c",
        primary: "#fb3640",
      },
    },
  },
}

Global styles The sx prop