From 83b255201c8d86ffdcd0cb467754cbd54f7558cb Mon Sep 17 00:00:00 2001
From: Alexander Bilz <mail@alexbilz.com>
Date: Thu, 06 Aug 2020 17:38:05 +0000
Subject: [PATCH] 🌒 Added a parameter to prefer dark mode
---
layouts/_default/baseof.html | 2 +-
assets/js/anatole-header.js | 5 ++++-
README.md | 9 +++++++++
3 files changed, 14 insertions(+), 2 deletions(-)
diff --git a/README.md b/README.md
index 2f34c72..0751165 100644
--- a/README.md
+++ b/README.md
@@ -84,6 +84,15 @@
identifier = "about"
url = "/about/"
```
+### Prefer dark theme
+You can easily enable the dark mode from the `config.toml` all you have to do is to set the parameter `displayMode` to `dark`. If you dont specify any displayMode, then the light version will be loaded.
+
+Please also note that returning visitors will see the theme that was last displayed to them on your site. If your user has his system configured to dark mode, then this will also take presendence over the displayMode set in the `config.toml`.
+```toml
+[params]
+displayMode = "dark"
+```
+
### Multilingual support
Anatole supports multilingual page setups. All you need to do is to add the languages to your 'config.toml'. For each Language you can set the custom options like title or description. It's important to include a `LanguageName`, as it will be displayed in the main menu.
```toml
diff --git a/assets/js/anatole-header.js b/assets/js/anatole-header.js
index 53a4878..b5c4b20 100644
--- a/assets/js/anatole-header.js
+++ b/assets/js/anatole-header.js
@@ -18,9 +18,12 @@
if(userPrefersDark){
setTheme('dark');
}
- else{
+ else if(!document.documentElement.getAttribute('data-theme')){
setTheme('light');
}
+ else{
+ setTheme(document.documentElement.getAttribute('data-theme'));
+ }
}
else {
// load a stored theme
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 080fe82..b8f419e 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html lang="{{- site.Language.Lang -}}" data-theme="light">
+<html lang="{{- site.Language.Lang -}}" data-theme="{{- .Site.Params.displayMode -}}">
{{- partial "head.html" . -}}
<body>
{{- partial "sidebar.html" . -}}
--
Gitblit v1.10.0