UseColorScheme

Last updated: 2.6.0 (09/06/2024)

useColorScheme is a hook that provides the current preferred color scheme of the user's operating system. It also allows the app to toggle between light and dark color schemes.

Internally, this hook is used by the Color utility system to provide the correct colors for the user's preferred color scheme.

Usage

import { useColorScheme, Button } from "@valence-ui/core";

function MyComponent() { 
    const { colorScheme } = useColorScheme();
    
    return ( 
        <Button
            color={colorScheme === "dark" ? "blue" : "red"}
        >
            I'm a button!
        </Button>
    )
}

Return type

Attribute	Type	Description
colorScheme	ColorScheme	The color scheme.
isDarkMode	boolean	Is the color scheme "dark"?
isLightMode	boolean	Is the color scheme "light"?
isFollowingSystem	boolean	Is the color scheme following the system theme?

ColorScheme

type ColorScheme = "light" | "dark";

Changelog

2.6.0

• Removed toggle, setDark and setLight; added isFollowingSystem