diff options
| author | Harrison Sand <14326961+hsand@users.noreply.github.com> | 2021-09-24 20:38:28 +0300 |
|---|---|---|
| committer | Harrison Sand <14326961+hsand@users.noreply.github.com> | 2021-09-24 20:38:28 +0300 |
| commit | 8e4cb8c7387df68afda24fd7f7148b574ab63895 (patch) | |
| tree | 533fe15166a32e4bbba255486626eac385f34812 /layouts | |
| parent | 5321e4817fbed7cf57de9171f994f8720cbcf411 (diff) | |
Add dark mode toggle
Diffstat (limited to 'layouts')
| -rw-r--r-- | layouts/partials/head.html | 4 | ||||
| -rw-r--r-- | layouts/partials/header.html | 4 |
2 files changed, 6 insertions, 2 deletions
diff --git a/layouts/partials/head.html b/layouts/partials/head.html index ab3f39d..e8a637a 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -6,5 +6,9 @@ {{ range .Site.Menus.main }} <a href="{{ .URL }}">{{ .Name }}</a> {{ end }} + {{ if eq .Site.Params.mode "toggle" -}} + | <a id="dark-mode-toggle" onclick="toggleTheme()" href=""></a> + <script src="{{ .Site.BaseURL }}js/themetoggle.js"></script> + {{ end }} </nav> </header> diff --git a/layouts/partials/header.html b/layouts/partials/header.html index c5ae589..98ab662 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -39,9 +39,9 @@ {{ $style := resources.Get "css/main.css" | fingerprint }} <link rel="stylesheet" type="text/css" media="screen" href="{{ $style.Permalink }}" /> - {{- if or (eq .Site.Params.mode "auto") (eq .Site.Params.mode "dark") -}} + {{- if or (eq .Site.Params.mode "auto") (eq .Site.Params.mode "dark") (eq .Site.Params.mode "toggle") -}} {{ $darkstyle := resources.Get "css/dark.css" | fingerprint }} - <link rel="stylesheet" type="text/css" href="{{ $darkstyle.Permalink }}" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} /> + <link id="darkModeStyle" rel="stylesheet" type="text/css" href="{{ $darkstyle.Permalink }}" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} {{ if eq .Site.Params.mode "toggle" }}disabled{{ end }} /> {{ end }} <!-- Custom CSS style get applied last --> |