Color schemes

Orbit supports by default a light and a dark color scheme for all components and tokens where applicable.

Apply a color scheme

A color scheme can either be enforced by providing a specific light or dark value to a theme provider:

<ThemeProvider theme={ShareGateTheme} colorScheme="dark">
    <Button variant="secondary">Cutoff</Button>
</ThemeProvider>

or be selected according to the user's operating system setting by providing the system value:

<ThemeProvider theme={ShareGateTheme} colorScheme="system" defaultColorScheme="light">
    <Button variant="secondary">Cutoff</Button>
</ThemeProvider>

Changing the color scheme

To manage the color scheme in your application, Orbit exposes a ColorSchemeContext and a useColorSchemeValue hook.

Context

The ColorSchemeContext of the closest theme provider can be accessed using the useColorSchemeContext hook. Once you have a hold on the context, you can access the current color scheme or update the value with setColorScheme.

function ColorSchemeToggle() {
    const { colorScheme, setColorScheme } = useColorSchemeContext();

    const handleClick = useCallback(() => {
        setColorScheme(colorScheme === "light" ? "dark" : "light");
    }, [colorScheme, setColorScheme]);

    return (
        <Button variant="secondary" onClick={handleClick}>
            Toggle
        </Button>
    );
}

render(() => {
    const { colorScheme: parentColorScheme } = useColorSchemeContext();

    return (
        <ThemeProvider theme={ShareGateTheme} colorScheme={parentColorScheme}>
            <Div backgroundColor="alias-surface" padding={2}>
                <ColorSchemeToggle />
            </Div>
        </ThemeProvider>
    );
});

useColorSchemeValue

Some features requires the usage of custom colors. Those colors aren't like Orbit tokens and will not support color schemes out of the box.

To help with that, Orbit offer the useColorSchemeValue hook which will return the value matching the current color scheme of the closest theme provider.

import { useColorSchemeValue } from "@sharegate/orbit-ui";

const color = useColorSchemeValue("#fff", "#000");
const backgroundColor = useColorSchemeValue("#ff9048", "#fee2bb");

return (
    <Button color={color} backgroundColor={backgroundColor}>
        Cutoff
    </Button>
);