score:0

#app.dark {
  --app-bg: black;
  --app-fg: white;
}
#app.light {
  --app-bg: white
  --app-fg: black;
}
#app {
  background-color: var(--app-bg);
  color: var(--app-fg);
}

score:0

import { FC } from 'react';

import { useDynamicStyleSheet } from 'app/hooks/useDynamicStyleSheet';

// eslint-disable-next-line import/no-webpack-loader-syntax, import/no-unresolved
import lightTheme from '!css-loader!antd/dist/antd.css';

const LightTheme: FC = () => {
  useDynamicStyleSheet(lightTheme.toString());

  return null;
};

score:1

useEffect( () => {
// Add new sheet
        const newTheme = availableThemes.get(chosenTheme);

        if(newTheme) {
            // injectCss borrowed from https://stackoverflow.com/questions/60593614/how-to-load-unload-css-dynamically
            injectCss(newTheme, chosenTheme);
        }

        // Remove all others
        availableThemes.forEach( (style, theme) => {
            if(theme !== chosenTheme) {
                var stylesheet = document.getElementById(`dynamicstylesheet${theme}`);
                if (stylesheet) {
                    head.removeChild(stylesheet);
                }
            }
        });
    
    }, [chosenTheme])

Related Query

More Query from same tag