ColorMode Based Styles

When creating a StyledComponent using @gluestack-style/react you can write color mode dependent styles inside the component config object and any variant. Inside the _light or _dark key, you can define your styling. Here is a small code snippet demonstrating how to define your style:

const StyledButton = styled(Pressable, {
  bg: "$primary600",
  px: "$6",
  py: "$4",
  _dark: {
    bg: "$info600",
  },
  _light: {
    bg: "$info800",
  },
})

How to control the ColorMode?

To switch between color modes, a UI library might provide a toggle button or another mechanism to change the color mode."When the color mode is changed, the library updates the colors used throughout the interface to match the new mode.

To implement this, the StyledProvider accepts a colorMode prop. Simply handle your colorMode and pass the current colorMode to this prop and all your components will respond to the colorMode changes.

import React from "react"
import { View, Pressable, Text } from "react-native"
import { styled, StyledProvider } from "@gluestack-style/react"
import { config } from "./gluestack-style.config"
const StyledButton = styled(Pressable, {
  bg: "$primary600",
  px: "$6",
  py: "$4",
  _dark: {
    bg: "$info600",
  },
  _light: {
    bg: "$info800",
  },
})

export function ColorMode({ ...args }) {
  const [currentColorMode, setCurrentColorMode] = React.useState("light")

  return (
    <StyledProvider config={config} colorMode={currentColorMode}>
      <Pressable
        style={{
          backgroundColor: "gray",
          padding: 12,
          marginBottom: 12,
        }}
        onPress={() => {
          setCurrentColorMode(currentColorMode === "dark" ? "light" : "dark")
        }}
      >
        <Text style={{ color: "white" }}>
          Toggle {currentColorMode === "dark" ? "light" : "dark"}
        </Text>
      </Pressable>
      <StyledButton />
    </StyledProvider>
  )
}