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

Dark theme via DarkReader (#595)

Browse source 
* Initial commit for dark theme.

* Use DarkReader.auto() to watch for system theme.

* Tunning default parameters.

* Allow configurable number of recent posts.

* Added invisible element to hack theme initialization.

* Added default value.

* Use Darkreader CDN.

* Cleanup to keep darkreader in as few files as possible.

* Renamed darkmode.js to darkmode-darkreader.js.

* Bring back the initialization.

* Added provider property.

* Added theme selector to the posts navbar.

* Removed extra line breaks.

* Changed darkreader CDN to local copy.

* Renamed to darkMode.

* Fixed CodeQL failures.

* Added icons.

* Renamed function.

* Added SVG inversion.

* Used icons for selection.

* Toggle initial dark only in the dynamic navbar.

Co-authored-by: donfiguerres <donfiguerres@github.com>
Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>
This commit is contained in:
donfiguerres 2022-06-10 23:18:49 +08:00 • committed by GitHub
parent 869eba97a2
commit 65049cfbb7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 5791 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

5
layouts/partials/header.html
View file

@ -15,6 +15,11 @@
<!--=================== icons ==============================-->
<link rel="stylesheet" href="{{ "/fontawesome/css/all.min.css" | relURL }}"/>
<!--=================== dark mode ==========================-->
{{ if site.Params.darkMode.enable }}
<link rel="stylesheet" href="{{ "/css/colortheme/colortheme.css" | relURL }}"/>
{{ end }}
<!--================= fab-icon =========================-->
{{/* add favicon only if the site author has provided the the favicon */}}
{{ if site.Params.logo.favicon }}

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

@ -47,6 +47,9 @@
{{ if .IsTranslated }}
{{ partial "navigators/lang-selector-2.html" . }}
{{ end }}
{{ if site.Params.darkMode.enable }}
{{ partial "navigators/theme-selector.html" . }}
{{ end }}
</ul>
</div>
</div>

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

@ -66,7 +66,7 @@
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="top-nav-items">
<div class="collapse navbar-collapse dynamic-navbar" id="top-nav-items">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#home">{{ i18n "home" }}</a>
@ -124,6 +124,9 @@
{{ if .IsTranslated }}
{{ partial "navigators/lang-selector.html" . }}
{{ end }}
{{ if site.Params.darkMode.enable }}
{{ partial "navigators/theme-selector.html" . }}
{{ end }}
</ul>
</div>
</div>

20
layouts/partials/navigators/theme-selector.html Normal file
View file

@ -0,0 +1,20 @@
<li class="nav-item dropdown">
<!-- This is for initializing the color scheme selection for new visitors. See /js/darkmode.js -->
<div id="theme-initialization" style="display: none;"
default-theme="{{ site.Params.darkMode.default }}"></div>
<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>
</a>
<div class="dropdown-menu dropdown-menu-icons-only" aria-labelledby="themeSelector">
<a class="dropdown-item nav-link" href="#" onclick="enableLightTheme()">
<img class="menu-icon-center" src="{{ "/icons/sun-svgrepo-com.svg" }}" width=20>
</a>
<a class="dropdown-item nav-link" href="#" onclick="enableDarkTheme()">
<img class="menu-icon-center" src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20>
</a>
<a class="dropdown-item nav-link" href="#" onclick="useSystemTheme()">
<img class="menu-icon-center" src="{{ "/icons/computer-svgrepo-com.svg" }}" width=20>
</a>
</div>
</li>

7
layouts/partials/scripts.html
View file

@ -5,3 +5,10 @@
<script type="text/javascript" src="{{ "/js/navbar.js" | relURL }}"></script>
<script type="text/javascript" src="{{ "/js/plyr.js" | relURL }}"></script>
<script type="text/javascript" src="{{ "/js/main.js" | relURL }}"></script>
{{ if site.Params.darkMode.enable }}
{{ if eq site.Params.darkMode.provider "darkreader" }}
<script type="text/javascript" src="{{ "/js/darkreader.js" | relURL }}"></script>
<script type="text/javascript" src="{{ "/js/darkmode-darkreader.js" | relURL }}"></script>
{{ end }}
{{ end }}