78 lines
3.2 KiB
CSS
78 lines
3.2 KiB
CSS
html { --h: 0; --c: 0; --l: 1; }
|
|
html:has(#huer:checked) { --h: 120; --c: 1; --l: 1; }
|
|
html:has(#hueg:checked) { --h: 240; --c: 1; --l: 1; }
|
|
html:has(#hueb:checked) { --c: 1; --l: 1; }
|
|
html:has(#huer:checked):has(#hueg:checked) { --h: 180; }
|
|
html:has(#huer:checked):has(#hueb:checked) { --h: 60; }
|
|
html:has(#hueg:checked):has(#hueb:checked) { --h: 300; }
|
|
html:has(#huer:checked):has(#hueg:checked):has(#hueb:checked) { --c: 0; --l: 1.5; }
|
|
/*
|
|
html {
|
|
--dark-bg: oklch(from #001220 calc(l * var(--l)) calc(c * var(--c)) calc(h + var(--h)));
|
|
--dark-bg2: oklch(from #002644 calc(l * var(--l)) calc(c * var(--c)) calc(h + var(--h)));
|
|
--dark-fg: oklch(from #a9d6e5 calc(l * var(--l)) calc(c * var(--c)) calc(h + var(--h)));
|
|
--dark-fg2: oklch(from #4571a2 calc(l * var(--l)) calc(c * var(--c)) calc(h + var(--h)));
|
|
--dark-fg3: oklch(from #61a5c2 calc(l * var(--l)) calc(c * var(--c)) calc(h + var(--h)));
|
|
--light-bg: oklch(from #e3f2fd calc(l * var(--l)) calc(c * var(--c)) calc(h + var(--h)));
|
|
--light-bg2: oklch(from #bbdefb calc(l * var(--l)) calc(c * var(--c)) calc(h + var(--h)));
|
|
--light-fg: oklch(from #001226 calc(l * var(--l)) calc(c * var(--c)) calc(h + var(--h)));
|
|
--light-fg2: oklch(from #4571a2 calc(l * var(--l)) calc(c * var(--c)) calc(h + var(--h)));
|
|
--light-fg3: oklch(from #228 calc(l * var(--l)) calc(c * var(--c)) calc(h + var(--h)));
|
|
}*/
|
|
html {
|
|
--dark-bg: oklch(calc(17.4% * var(--l)) calc(0.04 * var(--c)) calc(240.61 + var(--h)));
|
|
--dark-bg2: oklch(calc(26.18% * var(--l)) calc(0.06957 * var(--c)) calc(247.4988 + var(--h)));
|
|
--dark-fg: oklch(calc(84.92% * var(--l)) calc(0.051 * var(--c)) calc(220.2 + var(--h)));
|
|
--dark-fg2: oklch(calc(53.87% * var(--l)) calc(0.092 * var(--c)) calc(252.22 + var(--h)));
|
|
--dark-fg3: oklch(calc(68.79% * var(--l)) calc(0.081 * var(--c)) calc(227.41 + var(--h)));
|
|
--light-bg: oklch(calc(95.32% * var(--l)) calc(0.022 * var(--c)) calc(239.43 + var(--h)));
|
|
--light-bg2: oklch(calc(88.48% * var(--l)) calc(0.055 * var(--c)) calc(243.39 + var(--h)));
|
|
--light-fg: oklch(calc(17.89% * var(--l)) calc(0.0496 * var(--c)) calc(249.303 + var(--h)));
|
|
--light-fg2: oklch(calc(53.87% * var(--l)) calc(0.092 * var(--c)) calc(252.22 + var(--h)));
|
|
--light-fg3: oklch(calc(33.46% * var(--l)) calc(0.163 * var(--c)) calc(273.2 + var(--h)));
|
|
}
|
|
input:checked + label span {
|
|
text-transform: uppercase;
|
|
text-decoration: underline;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: var(--dark-bg);
|
|
--bg2: var(--dark-bg2);
|
|
--fg: var(--dark-fg);
|
|
--fg2: var(--dark-fg2);
|
|
--fg3: var(--dark-fg3);
|
|
--llight: initial;
|
|
--ldark: none;
|
|
}
|
|
body:has(#theme:checked) {
|
|
--bg: var(--light-bg);
|
|
--bg2: var(--light-bg2);
|
|
--fg: var(--light-fg);
|
|
--fg2: var(--light-fg2);
|
|
--fg3: var(--light-fg3);
|
|
--llight: none;
|
|
--ldark: initial;
|
|
}
|
|
}
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--bg: var(--light-bg);
|
|
--bg2: var(--light-bg2);
|
|
--fg: var(--light-fg);
|
|
--fg2: var(--light-fg2);
|
|
--fg3: var(--light-fg3);
|
|
--llight: none;
|
|
--ldark: initial;
|
|
}
|
|
body:has(#theme:checked) {
|
|
--bg: var(--dark-bg);
|
|
--bg2: var(--dark-bg2);
|
|
--fg: var(--dark-fg);
|
|
--fg2: var(--dark-fg2);
|
|
--fg3: var(--dark-fg3);
|
|
--llight: initial;
|
|
--ldark: none;
|
|
}
|
|
}
|