Created by: Andy-set-studio
This addition adds a markup pattern—radio buttons—and some lightweight JavaScript that gets and sets a user-color-scheme
localStorage value based on their state.
This state is then applied in two places:
- As a
data-user-theme
value on the HTML root element - As a
checked
state on the corresponding radio button control
Every time this state changes, the data is saved in localStorage. When a page is loaded with the apply-theme-setting.min.js
script in the <head>
before the CSS is loaded, the correct theme via localStorage will be applied.
The default theme is system. The intent of that is that the user’s preference will be honoured.
I've added a temporary page that features the new HTML controls. This is to hopefully make your lives easier when it comes to applying the CSS.