fix: add class-based dark mode fallback styling
Add .dark class on html element with direct element styling as fallback for when CSS custom properties don't work. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
0852707df0
commit
29cda763eb
2 changed files with 26 additions and 1 deletions
|
|
@ -911,3 +911,28 @@ footer a:hover {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Dark mode class-based fallback */
|
||||||
|
.dark {
|
||||||
|
background: #0f0f0f !important;
|
||||||
|
color: #e8eaed !important;
|
||||||
|
}
|
||||||
|
.dark .site-header {
|
||||||
|
background: #1a1a1a !important;
|
||||||
|
border-color: #2e2e2e !important;
|
||||||
|
}
|
||||||
|
.dark .search-box,
|
||||||
|
.dark input[type="text"],
|
||||||
|
.dark input[type="search"] {
|
||||||
|
background: #1a1a1a !important;
|
||||||
|
border-color: #2e2e2e !important;
|
||||||
|
color: #e8eaed !important;
|
||||||
|
}
|
||||||
|
.dark .result-item,
|
||||||
|
.dark .result-item:hover {
|
||||||
|
background: #1a1a1a !important;
|
||||||
|
border-color: #2e2e2e !important;
|
||||||
|
}
|
||||||
|
.dark a {
|
||||||
|
color: #14b8a6 !important;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{{define "base"}}
|
{{define "base"}}
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" data-theme="{{.Theme}}">
|
<html lang="en" data-theme="{{.Theme}}" class="{{.Theme}}">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue