Mirror/MarginaliaSearch
1
0
Fork 0
mirror of https://github.com/MarginaliaSearch/MarginaliaSearch.git synced 2025-02-24 05:18:58 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sam Storment 2024-06-03 14:15:35 -05:00
parent e2f68d9ccf
commit fb2eef24d6
1 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
code/services-application/search-service/resources/static/search/serp.scss
View File

@ -28,9 +28,8 @@
--font-family-heading: serif; // $heading-fonts --font-family-heading: serif; // $heading-fonts
} }
:root[data-theme='dark'] {
@mixin dark-theme-mixin {
color-scheme: dark; color-scheme: dark;
--clr-bg-page: hsl(0, 0%, 6%); --clr-bg-page: hsl(0, 0%, 6%);
@ -55,7 +54,17 @@
--clr-link-visited: #ffadff; --clr-link-visited: #ffadff;
--clr-heading-link-visited: var(--clr-link-visited); --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; box-sizing: border-box;
@ -234,6 +243,11 @@ header {
#theme { #theme {
margin-left: auto; margin-left: auto;
margin-right: .5ch; margin-right: .5ch;
display: none;
[data-has-js='true'] & {
display: block;
}
} }
#complaint { #complaint {