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

feat: Add theme settings

Browse source
This commit is contained in:
JY Hsu 2024-09-01 12:58:34 +08:00
parent dd1ede93d9
commit 17deb772cf
6 changed files with 37 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

2
layouts/_default/baseof.html
View file

@ -12,7 +12,7 @@
<!--================= add analytics if enabled =========================-->
{{- partial "analytics.html" . -}}
<script>
theme = localStorage.getItem('darkmode:color-scheme') || 'system';
theme = localStorage.getItem('theme-scheme') || localStorage.getItem('darkmode:color-scheme') || 'system';
if (theme == 'system') {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
theme = 'dark';

2
layouts/index.html
View file

@ -18,7 +18,7 @@
<!--================= add analytics if enabled =========================-->
{{- partial "analytics.html" . -}}
<script>
theme = localStorage.getItem('darkmode:color-scheme') || 'system';
theme = localStorage.getItem('theme-scheme') || localStorage.getItem('darkmode:color-scheme') || 'system';
if (theme == 'system') {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
theme = 'dark';

2
layouts/partials/navigators/navbar.html
View file

@ -141,7 +141,7 @@
{{ if .IsTranslated }}
{{ partial "navigators/lang-selector.html" . }}
{{ end }}
{{ if site.Params.features.darkMode.enable }}
{{ if or site.Params.features.darkMode.enable site.Params.features.theme.enable }}
{{ partial "navigators/theme-selector.html" . }}
{{ end }}
</ul>

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

@ -1,15 +1,27 @@
{{/* variables for enabling/disabling various features */}}
{{ $darkEnabled := true }}
{{ $lightEnabled := true }}
{{ if site.Params.features.theme.enable }}
{{ $darkEnabled = site.Params.features.theme.services.dark | default true }}
{{ $lightEnabled = site.Params.features.theme.services.light | default true }}
{{ end }}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="themeSelector" role="button"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img id="navbar-theme-icon-svg" class="theme-icon" src="{{ "icons/moon-svgrepo-com.svg" | relURL }}" width=20 alt="Dark Theme">
</a>
<div id="themeMenu" class="dropdown-menu dropdown-menu-icons-only" aria-labelledby="themeSelector">
{{ if $lightEnabled }}
<a class="dropdown-item nav-link" href="#" data-scheme="light">
<img class="theme-icon" src="{{ "icons/sun-svgrepo-com.svg" | relURL }}" width=20 alt="Light Theme">
</a>
{{ end }}
{{ if $darkEnabled }}
<a class="dropdown-item nav-link" href="#" data-scheme="dark">
<img class="theme-icon" src="{{ "icons/moon-svgrepo-com.svg" | relURL }}" width=20 alt="Dark Theme">
</a>
{{ end }}
<a class="dropdown-item nav-link" href="#" data-scheme="system">
<img class="theme-icon" src="{{ "icons/computer-svgrepo-com.svg" | relURL }}" width=20 alt="System Theme">
</a>