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",
      },
    },
  },
}
 
Copy

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
 
Copy

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

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

Setting the color mode#

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

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>
  )
}
 
Copy

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",
      },
    },
  },
}
 
Copy