From 56515c47d17b89c2aa4b11af4b9ac8a1792a4528 Mon Sep 17 00:00:00 2001 From: Tab Atkins-Bittner Date: Wed, 24 Jul 2024 12:14:22 -0700 Subject: [PATCH] Add darkmode var-highlight colors, and rearrange the CSS a little. Closes #2848, closes #2157 --- .../stylescript/var-click-highlighting.css | 36 +++++++++++++++---- 1 file changed, 29 insertions(+), 7 deletions(-) diff --git a/bikeshed/stylescript/var-click-highlighting.css b/bikeshed/stylescript/var-click-highlighting.css index 13e61c671e..50af5df868 100644 --- a/bikeshed/stylescript/var-click-highlighting.css +++ b/bikeshed/stylescript/var-click-highlighting.css @@ -8,12 +8,34 @@ D50 2deg illuminant, L in [0,100], a and b in [-128, 128] 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) + +For darkmode: +0 = oklab(50% 0% 108%) +1 = oklab(50% -51% 51%) +2 = oklab(50% -64% -20%) +3 = oklab(50% 6% 19%) +4 = oklab(50% -12% -64%) +5 = oklab(50% 44% -19%) +6 = oklab(50% 102% 38%) */ + [data-algorithm] var { cursor: pointer; } -var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } -var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } -var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } -var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } -var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } -var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } -var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } +var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } + +var[data-var-color] { --var-bg: #F4D200; } +var[data-var-color="1"] { --var-bg: #FF87A2; } +var[data-var-color="2"] { --var-bg: #96E885; } +var[data-var-color="3"] { --var-bg: #3EEED2; } +var[data-var-color="4"] { --var-bg: #EACFB6; } +var[data-var-color="5"] { --var-bg: #82DDFF; } +var[data-var-color="6"] { --var-vg: #FFBCF2; } + +@media (prefers-color-scheme: dark) { + var[data-var-color] { --var-bg: #bc1a00; } + var[data-var-color="1"] { --var-bg: #007f00; } + var[data-var-color="2"] { --var-bg: #008698; } + var[data-var-color="3"] { --var-bg: #7f5b2b; } + var[data-var-color="4"] { --var-bg: #004df3; } + var[data-var-color="5"] { --var-bg: #a1248a; } + var[data-var-color="6"] { --var-vg: #ff0000; } +} \ No newline at end of file