This is a Sass mixin to handle a 3-way dark mode. It relies on a data-theme attribute on your <html> element with a value of light or dark. If data-theme is absent (i.e. it's neither light nor dark), the system's preferred mode is used.
body {
// matches data-theme="light" or data-theme="auto" with system instructing light mode
@include light {
background: white;
color: black;
| const WORDLIST = ["abandon","ability","able","about","above","absent","absorb","abstract","absurd","abuse", | |
| "access","accident","account","accuse","achieve","acid","acoustic","acquire","across","act", | |
| "action","actor","actress","actual","adapt","add","addict","address","adjust","admit", | |
| "adult","advance","advice","aerobic","affair","afford","afraid","again","age","agent", | |
| "agree","ahead","aim","air","airport","aisle","alarm","album","alcohol","alert", | |
| "alien","all","alley","allow","almost","alone","alpha","already","also","alter", | |
| "always","amateur","amazing","among","amount","amused","analyst","anchor","ancient","anger", | |
| "angle","angry","animal","ankle","announce","annual","another","answer","antenna","antique", | |
| "anxiety","any","apart","apology","appear","apple","approve","april","arch","arctic", | |
| "area","arena","argue","arm","armed","armor","army","around","arrange","arrest", |