Customize light/dark scheme menu

Suggest Edits

Starting in Workspace 10, you can work with new methods in 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.

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

Updated about 2 years ago