:root{ --gray-1:#f6f7f8; /* bg */ --gray-2:#ffffff; /* secondary bg (cards) */ --gray-3:#e3e3e3; /* border/dividers */ --gray-4:#8b8b8b; /* muted text */ --gray-5:#4a4a4a; /* strong text */ --gray-6:#222222; /* primary text */ /* GREEN (light) */ --green-1:#d8f3dc; --green-2:#eefaf0; --green-3:#a9d7b3; --green-4:#4e6a60; --green-5:#2f6e7d; --green-6:#1f3f4c; --green-fc: rgba(59,105,120,.4); /* YELLOW (light) */ --yellow-1:#f1efea; --yellow-2:#fbf7ee; --yellow-3:#e3d7b6; --yellow-4:#6b5f3a; --yellow-5:#8a650f; --yellow-6:#3f2f09; /* BLUE (light) */ --blue-1:#d9ecf5; --blue-2:#eef7fb; --blue-3:#a9d1e6; --blue-4:#3e6173; --blue-5:#2f6f99; --blue-6:#16384b; /* RED (light) */ --red-1:#f8d4d2; --red-2:#fde8e7; --red-3:#e6a9a5; --red-4:#7a4744; --red-5:#b54a43; --red-6:#4a1b18; --red-fc: rgba(181, 74, 67, .28); /* BLACK AND WHITE */ --white:#ffffff; --black:#000000; /* ========================== GRAY THEME (default) ========================== */ --bg: var(--gray-1); --bg-2: var(--gray-2); --border: var(--gray-3); --text-muted: var(--gray-4); --text-strong: var(--gray-5); --text: var(--gray-6); --sh-fc: 0 0 0 3px var(--green-fc); } /* ========================== Theme wrappers ========================== */ .theme-gray{ --bg: var(--gray-1); --bg-2: var(--gray-2); --border: var(--gray-3); --text-muted: var(--gray-4); --text-strong: var(--gray-5); --text: var(--gray-6); } .theme-green{ --bg: var(--green-1); --bg-2: var(--green-2); --border: var(--green-3); --text-muted: var(--green-4); --text-strong: var(--green-5); --text: var(--green-6); } .theme-yellow{ --bg: var(--yellow-1); --bg-2: var(--yellow-2); --border: var(--yellow-3); --text-muted: var(--yellow-4); --text-strong: var(--yellow-5); --text: var(--yellow-6); } .theme-blue{ --bg: var(--blue-1); --bg-2: var(--blue-2); --border: var(--blue-3); --text-muted: var(--blue-4); --text-strong: var(--blue-5); --text: var(--blue-6); } .theme-red{ --bg: var(--red-1); --bg-2: var(--red-2); --border: var(--red-3); --text-muted: var(--red-4); --text-strong: var(--red-5); --text: var(--red-6); --sh-fc: 0 0 0 3px var(--red-fc); } /* ========================== Dark mode: ALL palettes ========================== */ @media (prefers-color-scheme: dark){ :root{ /* GRAY */ --gray-1:#0f1113; --gray-2:#171a1e; --gray-3:#2a2e33; --gray-4:#8a8f98; --gray-5:#c6cbd3; --gray-6:#f2f4f7; /* GREEN */ --green-1:#163324; --green-2:#1f4531; --green-3:#34735a; --green-4:#7fb39a; --green-5:#b7e4cf; --green-6:#e9fff5; /* YELLOW */ --yellow-1:#35290c; --yellow-2:#44340f; --yellow-3:#7a5b1a; --yellow-4:#c7b07b; --yellow-5:#ead9aa; --yellow-6:#fff4d6; /* BLUE */ --blue-1:#12344a; --blue-2:#17415c; --blue-3:#2f7aa3; --blue-4:#7fb6cf; --blue-5:#b2d9ee; --blue-6:#eff9ff; /* RED */ --red-1:#3a171a; --red-2:#4b1f23; --red-3:#8a3b42; --red-4:#d0a3a6; --red-5:#f0b6b4; --red-6:#ffeceb; /* White */ --white:#111315; } } /* ========================== Force dark OUTSIDE system dark mode Add class to html/body or any container: ... ========================== */ .dark{ color-scheme: dark; --gray-1:#0f1113; --gray-2:#171a1e; --gray-3:#2a2e33; --gray-4:#8a8f98; --gray-5:#c6cbd3; --gray-6:#f2f4f7; /* GREEN */ --green-1:#163324; --green-2:#1f4531; --green-3:#34735a; --green-4:#7fb39a; --green-5:#b7e4cf; --green-6:#e9fff5; /* YELLOW */ --yellow-1:#35290c; --yellow-2:#44340f; --yellow-3:#7a5b1a; --yellow-4:#c7b07b; --yellow-5:#ead9aa; --yellow-6:#fff4d6; /* BLUE */ --blue-1:#12344a; --blue-2:#17415c; --blue-3:#2f7aa3; --blue-4:#7fb6cf; --blue-5:#b2d9ee; --blue-6:#eff9ff; /* RED */ --red-1:#3a171a; --red-2:#4b1f23; --red-3:#8a3b42; --red-4:#d0a3a6; --red-5:#f0b6b4; --red-6:#ffeceb; --white:#111315; }