From 30f1f96870a6cd66236c02aebba2ca38dd0a48d5 Mon Sep 17 00:00:00 2001
From: Alexander Bilz <mail@alexbilz.com>
Date: Fri, 01 Jan 2021 20:57:57 +0000
Subject: [PATCH] Merge pull request #104 from araknoid/disable-theme-switcher
---
assets/js/anatole-header.js | 54 -----------------
assets/js/anatole-theme-switcher.js | 51 +++++++++++++++++
layouts/partials/navbar.html | 12 ++-
layouts/partials/head.html | 18 ++++-
README.md | 7 ++
5 files changed, 80 insertions(+), 62 deletions(-)
diff --git a/README.md b/README.md
index f94965a..6cdfcd0 100644
--- a/README.md
+++ b/README.md
@@ -114,6 +114,13 @@
displayMode = "dark"
```
+### Disable Theme Switcher
+You can easily disable the theme switcher from the `config.toml`. All you have to do is to set the parameter `disableThemeSwitcher` to `true`.
+```toml
+[params]
+disableThemeSwitcher = true # Theme switcher is enabled by default
+```
+
### Disable Animations
You can easily disable the animations from the `config.toml`. All you have to do is to set the parameter `doNotLoadAnimations` to `true`.
```toml
diff --git a/assets/js/anatole-header.js b/assets/js/anatole-header.js
index 901fc0f..0bae781 100644
--- a/assets/js/anatole-header.js
+++ b/assets/js/anatole-header.js
@@ -1,53 +1,3 @@
-// initialize default value
-function getTheme() {
- return localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
-}
-
-function setTheme(style) {
- document.documentElement.setAttribute('data-theme', style);
- localStorage.setItem('theme', style);
-}
-
-function init() {
- // initialize default value
- var theme = getTheme();
-
- // check if a prefered color theme is set for users that have never been to our site
- const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
- if (theme === null) {
- if (userPrefersDark) {
- setTheme('dark');
- } else if (!document.documentElement.getAttribute('data-theme')) {
- setTheme('light');
- } else {
- setTheme(document.documentElement.getAttribute('data-theme'));
- }
- } else {
- // load a stored theme
- if (theme == 'light') {
- document.documentElement.setAttribute('data-theme', 'light');
- } else {
- document.documentElement.setAttribute('data-theme', 'dark');
- }
- }
-}
-
-
-// switch themes
-function switchTheme(e) {
- var theme = getTheme();
- if (theme == 'light') {
- setTheme('dark');
- } else {
- setTheme('light');
- }
-}
-
-document.addEventListener('DOMContentLoaded', function () {
- var themeSwitcher = document.querySelector('.theme-switch');
- themeSwitcher.addEventListener('click', switchTheme, false);
-}, false);
-
document.addEventListener("DOMContentLoaded", function () {
// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"), 0);
@@ -63,6 +13,4 @@
});
});
}
-});
-
-init();
+});
\ No newline at end of file
diff --git a/assets/js/anatole-theme-switcher.js b/assets/js/anatole-theme-switcher.js
new file mode 100644
index 0000000..ac82793
--- /dev/null
+++ b/assets/js/anatole-theme-switcher.js
@@ -0,0 +1,51 @@
+// initialize default value
+function getTheme() {
+ return localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
+}
+
+function setTheme(style) {
+ document.documentElement.setAttribute('data-theme', style);
+ localStorage.setItem('theme', style);
+}
+
+function init() {
+ // initialize default value
+ const theme = getTheme();
+
+ // check if a preferred color theme is set for users that have never been to our site
+ const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+ if (theme === null) {
+ if (userPrefersDark) {
+ setTheme('dark');
+ } else if (!document.documentElement.getAttribute('data-theme')) {
+ setTheme('light');
+ } else {
+ setTheme(document.documentElement.getAttribute('data-theme'));
+ }
+ } else {
+ // load a stored theme
+ if (theme === 'light') {
+ document.documentElement.setAttribute('data-theme', 'light');
+ } else {
+ document.documentElement.setAttribute('data-theme', 'dark');
+ }
+ }
+}
+
+
+// switch themes
+function switchTheme() {
+ const theme = getTheme();
+ if (theme === 'light') {
+ setTheme('dark');
+ } else {
+ setTheme('light');
+ }
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+ const themeSwitcher = document.querySelector('.theme-switch');
+ themeSwitcher.addEventListener('click', switchTheme, false);
+}, false);
+
+init();
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index c09cf55..62bc8e7 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -51,13 +51,23 @@
{{ end -}}
<!-- JavaScript -->
- {{ $anatole := resources.Get "js/anatole-header.js" }}
- {{ $secureJS := $anatole | resources.Minify | resources.Fingerprint }}
+ {{ $anatoleHeader := resources.Get "js/anatole-header.js" }}
+ {{ $secureHeaderJS := $anatoleHeader | resources.Minify | resources.Fingerprint }}
<script type="text/javascript"
- src="{{ $secureJS.Permalink }}"
- integrity="{{ $secureJS.Data.Integrity }}"
+ src="{{ $secureHeaderJS.Permalink }}"
+ integrity="{{ $secureHeaderJS.Data.Integrity }}"
crossorigin="anonymous"></script>
+
+ {{ if not .Site.Params.disableThemeSwitcher }}
+ {{ $anatoleThemeSwitcher := resources.Get "js/anatole-theme-switcher.js" }}
+ {{ $secureThemeSwitcherJS := $anatoleThemeSwitcher | resources.Minify | resources.Fingerprint }}
+ <script type="text/javascript"
+ src="{{ $secureThemeSwitcherJS.Permalink }}"
+ integrity="{{ $secureThemeSwitcherJS.Data.Integrity }}"
+ crossorigin="anonymous"></script>
+ {{ end }}
+
{{- $js := "" -}}
{{- range .Site.Params.customJs -}}
{{- if or (in . "http://") (in . "https://") -}}
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index b35cbf5..9c4c28e 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -23,10 +23,12 @@
</li>
{{ end }}
{{ end }}
- <li class="theme-switch-item">
- <a class="theme-switch" title="Switch Theme">
- <i class="fas fa-adjust fa-fw" aria-hidden="true"></i>
- </a>
- </li>
+ {{ if not .Site.Params.disableThemeSwitcher }}
+ <li class="theme-switch-item">
+ <a class="theme-switch" title="Switch Theme">
+ <i class="fas fa-adjust fa-fw" aria-hidden="true"></i>
+ </a>
+ </li>
+ {{ end }}
</ul>
</div>
--
Gitblit v1.10.0