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

Merge branch 'dev-dark-theme' into donfiguerres

Browse source
This commit is contained in:
donfiguerres 2021-05-26 01:41:59 +08:00
commit 734d30ed17
5 changed files with 18 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

6
layouts/_default/baseof.html
View file

@ -15,6 +15,12 @@
</head> </head>
<body data-spy="scroll" data-target="#TableOfContents" data-offset="80"> <body data-spy="scroll" data-target="#TableOfContents" data-offset="80">
<!-- INITIALIZE DARK THEME -->
{{ if site.Params.darkTheme.enable }}
{{ partial "helpers/darkmode.html" . }}
{{ end }}
<div class="container-fluid bg-dimmed wrapper"> <div class="container-fluid bg-dimmed wrapper">
<!----- ADD NAVBAR ---------------> <!----- ADD NAVBAR --------------->
{{ block "navbar" . }} {{ end }} {{ block "navbar" . }} {{ end }}

5
layouts/index.html
View file

@ -32,6 +32,11 @@
</head> </head>
<body data-spy="scroll" data-target="#top-navbar" data-offset="100"> <body data-spy="scroll" data-target="#top-navbar" data-offset="100">
<!-- INITIALIZE DARK THEME -->
{{ if site.Params.darkTheme.enable }}
{{ partial "helpers/darkmode.html" . }}
{{ end }}
<!--- NAVBAR -------------------------> <!--- NAVBAR ------------------------->
{{- partial "navigators/navbar.html" . -}} {{- partial "navigators/navbar.html" . -}}

3
layouts/partials/helpers/darkmode.html Normal file
View file

@ -0,0 +1,3 @@
<!-- This is a 'hack' for initializing the color scheme selection. See /js/darkmode.js -->
<div id="themeInitialization" style="display: none;"
default-theme=" {{ site.Params.darkTheme.default }} "></div>

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

@ -1,6 +1,5 @@
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="themeSelector" <a class="nav-link dropdown-toggle" href="#" id="themeSelector" role="button"
default-theme=" {{ site.Params.darkTheme.default }} " role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Theme</a> data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Theme</a>
<div class="dropdown-menu" aria-labelledby="themeSelector"> <div class="dropdown-menu" aria-labelledby="themeSelector">
<a class="dropdown-item nav-link" href="#" onclick="enableLightTheme()">Light</a> <a class="dropdown-item nav-link" href="#" onclick="enableLightTheme()">Light</a>

6
static/js/darkmode.js
View file

@ -22,11 +22,11 @@ function useSystemTheme() {
} }
function initializeColorScheme() { function initializeColorScheme() {
// We're using the themeSelector attributes as a 'hack' for setting up the // We're using the themeInitialization attributes as a 'hack' for setting up the
// default color scheme becauase we don't want to complicate this further by // default color scheme becauase we don't want to complicate this further by
// creating custom javascript output in Hugo. // creating custom javascript output in Hugo.
themeSelector = document.getElementById("themeSelector"); themeInitialization = document.getElementById("themeInitialization");
defaultColorScheme = themeSelector.getAttribute('default-theme'); defaultColorScheme = themeInitialization.getAttribute('default-theme');
// If the user has already selected a preferred theme then use that instead // If the user has already selected a preferred theme then use that instead
// of the default theme. Also, the default theme gets loaded to localStorage // of the default theme. Also, the default theme gets loaded to localStorage
// on the first visit. // on the first visit.