Use CSS inside noscript when JS is disabled to detect preferred color theme (#308)

- Makes auto theme work when JS is disabled
- Only applies if the 'theme' configuration parameter is set to 'auto' or is unset.
This commit is contained in:
Kian Kasad 2021-03-19 06:12:49 -07:00 committed by GitHub
parent 706b5a1c94
commit e01b52193a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -44,7 +44,24 @@
.top-link { .top-link {
display: none; display: none;
} }
{{- if (and (ne .Site.Params.defaultTheme "light") (ne .Site.Params.defaultTheme "dark")) }}
@media (prefers-color-scheme: dark) {
:root {
--theme: #1d1e20;
--entry: #2e2e33;
--primary: rgba(255, 255, 255, 0.84);
--secondary: rgba(255, 255, 255, 0.56);
--tertiary: rgba(255, 255, 255, 0.16);
--content: rgba(255, 255, 255, 0.74);
--hljs-bg: #2e2e33;
--code-bg: #37383e;
--border: #333;
}
.list {
background: var(--theme);
}
}
{{- end }}
</style> </style>
</noscript> </noscript>
<header class="header"> <header class="header">