TS Dark Mode Theme

theme.ts

interface ITheme {
    mode: 'dark' | 'light' | 'hiContrast';
};

const defaultTheme: ITheme = {
    mode: 'light',
};

if (!localStorage.getItem('theme')) {
    const themeJSON = JSON.stringify(defaultTheme);
    localStorage.setItem('theme', themeJSON);
}

function setTheme(themeOptions: ITheme) {
    switch (themeOptions.mode) {
        case 'dark':
            document.body.classList.remove('light', 'hiContrast');
            document.body.classList.add('dark');
            break;
        case 'light':
            document.body.classList.remove('dark', 'hiContrast');
            document.body.classList.add('light');
            break;
        case 'hiContrast':
            document.body.classList.remove('dark', 'light');
            document.body.classList.add('hiContrast');
            break;
        default:
            document.body.classList.remove('dark', 'light', 'hiContrast');
    };

    console.log(document.body.classList.toString());
}

const themeOptions: ITheme = JSON.parse(localStorage.getItem('theme')!);
setTheme(themeOptions);

Playground Link