Skip to main content

Customize light/dark scheme menu

In Here™ Core UI Components v10 or later, you can work with the methods of the ThemeApi interface to customize placement of the menu your users choose a color scheme from. By default, the options to change the color scheme appear in an Appearance item in the main Browser menu, but you can place them wherever works best for your environment.

How it works​

The new setSelectedScheme method of the ThemeApi interface takes a ColorSchemeOptionType argument that represents the scheme selected by the user. This is one of "dark", "light", or "system".

The new getSelectedScheme method returns the current scheme in local storage.

See also the API reference for ThemeApi.

Example​

This example assumes that you have installed the Workspace Platform npm package and declared the appropriate import statements.

const ThemeDropDown = () => {
    const currentScheme = getSelectedScheme();
    const [schemeOnSelect, setSchemeOnSelect] = useState(currentScheme);
    const selectThemeRef = useRef<HTMLSelectElement>();

    const onThemeSelection = useCallback(async () => {
        const key = selectThemeRef.current?.value as ColorSchemeOptionType;
        await setSelectedScheme(key);
    }, [schemeOnSelect]);

    const handleSetTheme = (e) => {
        setSchemeOnSelect(e.target.value);
    };

    const themes = ['dark', 'light', 'system'];
    return (
        <select ref={selectThemeRef} onChange={handleSetTheme} defaultValue={schemeOnSelect}>
            {themes.map((theme) => (
                <option key={theme} value={theme}>
                    {theme}
                </option>
            ))}
        </select>
        <Button onClick={onThemeSelection}>Set Theme</Button>
    );
};

Table of Contents