FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement proper dark mode (#800)

Browse source 
* Implement proper dark mode

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

* Fix footer color in light mode

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

---------

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
This commit is contained in:
Emruz Hossain 2023-09-30 05:04:48 +06:00 • committed by GitHub
parent 6dc9d1d33d
commit 5f0aebcf68
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 1136 additions and 353 deletions
Download patch file Download diff file Expand all files Collapse all files

12
layouts/_default/baseof.html
View file

@ -11,7 +11,17 @@
<!--================= add analytics if enabled =========================-->
{{- partial "analytics.html" . -}}
<script>
theme = localStorage.getItem('darkmode:color-scheme') || 'system';
if (theme == 'system') {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
theme = 'dark';
} else {
theme = 'light';
}
}
document.documentElement.setAttribute('data-theme', theme);
</script>
</head>
<body class="type-{{ .Page.Type }} kind-{{ .Page.Kind }}" data-spy="scroll" data-target="#TableOfContents" data-offset="80">

11
layouts/index.html
View file

@ -17,6 +17,17 @@
<!--================= add analytics if enabled =========================-->
{{- partial "analytics.html" . -}}
<script>
theme = localStorage.getItem('darkmode:color-scheme') || 'system';
if (theme == 'system') {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
theme = 'dark';
} else {
theme = 'light';
}
}
document.documentElement.setAttribute('data-theme', theme);
</script>
</head>
<body data-spy="scroll" data-target="#top-navbar" data-offset="100">

17
layouts/partials/helpers/get-esbuild-options.html
View file

@ -72,29 +72,12 @@ params:
# The `darkMode` feature
darkmode:
enable: true
services:
# darkmode is realized by using DarkReader library
darkreader:
# options are 'system', 'dark', 'light'
defaultColorScheme: system
# For all available options, see `interface DynamicThemeFix`:
# https://github.com/darkreader/darkreader/blob/main/index.d.ts#L125
fixes:
invert: ['img[src$=".svg"]'] # inverts svg colors.
# For all available options, see `interface Theme` in:
# https://github.com/darkreader/darkreader/blob/main/index.d.ts#L45
theme:
brightness: 100
contrast: 100
sepia: 0
```
This helper will convert the above config into the following env vars:
* `FEATURE_ANALYTICS=1`
* `FEATURE_ANALYTICS_GOOGLE=1`
* `FEATURE_DARKMODE=1`
* `FEATURE_DARKMODE_DARKREADER=1`
In JS, you can use it like this:

8
layouts/partials/navigators/theme-selector.html
View file

@ -1,17 +1,17 @@
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="themeSelector" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img id="navbar-theme-icon-svg" src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20 alt="Dark Theme">
<img id="navbar-theme-icon-svg" class="theme-icon" src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20 alt="Dark Theme">
</a>
<div id="themeMenu" class="dropdown-menu dropdown-menu-icons-only" aria-labelledby="themeSelector">
<a class="dropdown-item nav-link" href="#" data-scheme="light">
<img class="menu-icon-center" src="{{ "/icons/sun-svgrepo-com.svg" }}" width=20 alt="Light Theme">
<img class="theme-icon" src="{{ "/icons/sun-svgrepo-com.svg" }}" width=20 alt="Light Theme">
</a>
<a class="dropdown-item nav-link" href="#" data-scheme="dark">
<img class="menu-icon-center" src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20 alt="Dark Theme">
<img class="theme-icon" src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20 alt="Dark Theme">
</a>
<a class="dropdown-item nav-link" href="#" data-scheme="system">
<img class="menu-icon-center" src="{{ "/icons/computer-svgrepo-com.svg" }}" width=20 alt="System Theme">
<img class="theme-icon" src="{{ "/icons/computer-svgrepo-com.svg" }}" width=20 alt="System Theme">
</a>
</div>
</li>