You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
22 lines
716 B
22 lines
716 B
2 years ago
|
This simple little component will create a dark or light switch that changes the CSS and remembers the users setting. The technique uses this line from `static/colors.css` or `static/monochrome.css`:
|
||
|
|
|
||
|
|
```
|
||
|
|
[data-theme="dark"] {
|
||
|
|
```
|
||
|
|
|
||
|
|
This changes the CSS using the variables in that block to alter their colors to darker versions. Then in the JavaScript the theme is stored in the browser's local storage to remember it:
|
||
|
|
|
||
|
|
```
|
||
|
|
const set_theme = () => {
|
||
|
|
document.documentElement.setAttribute('data-theme', theme);
|
||
|
|
localStorage.setItem('theme', theme);
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
When the user comes back their theme is loaded with:
|
||
|
|
|
||
|
|
```
|
||
|
|
theme = localStorage.getItem('theme') ? localStorage.getItem('theme') : 'light';
|
||
|
|
set_theme()
|
||
|
|
```
|