You can use CSS variables to achieve themes in below steps:
Add a custom data-* attribute in body of index.html file:
<body data-theme="light"> <!-- Let's name it data-theme and start with light -->
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
And, define CSS variables, as many as you need, for all (you can have more than two themes) the data-* attribute values i.e. themes:
body[data-theme='light'] {
--body-bg: white;
--color: black;
}
body[data-theme='dark'] {
--body-bg: black;
--color: white;
}
:root {
--primary-color: green;
// you can also set some CSS vars (that are common to all the themes) on :root
}
And, here is an example how to use these CSS variables for a tag (or class):
body {
color: var(--color) !important; // Here
background-color: var(--body-bg) !important; // And, Here
font-family: 'Segoe UI', 'Roboto'; // Ignore it, just for example
}
// example using in a class
.some-class {
color: var(--color);
background-color: var(--body-bg);
}
You can now create some utility functions that would switch between the themes:
export function setLightTheme() {
document.getElementsByTagName('body')[0].setAttribute('data-theme', 'light')
}
export function setDarkTheme() {
document.getElementsByTagName('body')[0].setAttribute('data-theme', 'dark')
}
You can import the above functions in any component to change the theme as you need.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
