Handle themeing when javascript is disabled. Hide the theme select and fallback to dark media query instead of data-theme attribute

This commit is contained in:
Sam Storment 2024-06-03 14:15:35 -05:00
parent e2f68d9ccf
commit fb2eef24d6

View File

@ -29,8 +29,7 @@
}
:root[data-theme='dark'] {
@mixin dark-theme-mixin {
color-scheme: dark;
--clr-bg-page: hsl(0, 0%, 6%);
@ -56,6 +55,16 @@
--clr-heading-link-visited: var(--clr-link-visited);
}
:root[data-theme='dark'] {
@include dark-theme-mixin;
}
// Makes theme match the user's OS preference when JS is disabled
@media (prefers-color-scheme: dark) {
:root:not(:has([data-has-js="true"])) {
@include dark-theme-mixin;
}
}
* {
box-sizing: border-box;
@ -234,6 +243,11 @@ header {
#theme {
margin-left: auto;
margin-right: .5ch;
display: none;
[data-has-js='true'] & {
display: block;
}
}
#complaint {