nojs configurable default switcher theme

Jieiku · Jul 19, 2023 · cd71559 · cd71559
1 parent 65f135a
commit cd71559
Show file tree

Hide file tree

Showing 11 changed files with 46 additions and 21 deletions.
diff --git a/COPY-TO-ROOT-SASS/abridge.scss b/COPY-TO-ROOT-SASS/abridge.scss
@@ -10,8 +10,10 @@
 
   $abridgeMode: "switcher",//valid values: switcher, auto, dark, light
   $syntax-mode: "auto",// Force syntax mode: auto, dark, light
+  $switcherDefault: "dark",// default for nojs switcher: dark, light
 
   $color: "orange",// color template to use/override: orange, blue, blueshade
+
   $color-syntax: "abridge",// syntax color template to use/override: abridge,
   $syntax: true,//syntax highlighting for Code Blocks.
 

diff --git a/config.toml b/config.toml
@@ -202,6 +202,8 @@ integrity = true # increases site security, should normally be true. (setting to
 
 js_bundle = true # multiple javascript files combined into a single file (setting to false is useful during js development)
 js_switcher = true # The button that allows manually changing between light/dark mode.
+js_switcher_default = "dark" # default switcher mode: dark, light
+
 js_copycode = true # The copy button on code blocks that allows you to copy them to the clipboard.
 
 search_library = 'elasticlunr'

diff --git a/package.json b/package.json
@@ -6,20 +6,22 @@
   "license": "MIT",
   "homepage": "https://github.com/Jieiku/abridge",
   "scripts": {
+    "all": "npm run theme && npm run theme-light && npm run katex-bundle && npm run search-elasticlunr && npm run search-stork && npm run search-tinysearch && npm run abridge-bundle-elasticlunr",
+    "nonbundles": "npm run theme && npm run theme-light && npm run katex-bundle && npm run search-elasticlunr && npm run search-stork && npm run search-tinysearch",
     "theme": "uglifyjs static/js/theme.js -c -m -o static/js/theme.min.js",
+    "theme-light": "uglifyjs static/js/theme_light.js -c -m -o static/js/theme_light.min.js",
     "katex-bundle": "uglifyjs static/js/katex.min.js static/js/mathtex-script-type.min.js static/js/katex-auto-render.min.js static/js/katexoptions.js -c -m -o static/js/katexbundle.min.js",
     "search-elasticlunr": "uglifyjs static/js/elasticlunr.min.js static/js/search.js -c -m -o static/js/search_elasticlunr.min.js",
     "search-stork": "uglifyjs static/js/stork.js static/js/stork_config.js -c -m -o static/js/search_stork.min.js",
     "search-tinysearch": "uglifyjs static/js/tinysearch.js -c -m -o static/js/search_tinysearch.min.js",
-    "all": "npm run theme && npm run katex-bundle && npm run search-elasticlunr && npm run search-stork && npm run search-tinysearch",
-    "abridge-bundle-nosearch": "npm run all && uglifyjs static/js/prestyle.js static/js/theme_button.js static/js/email.js static/js/codecopy.js -c -m -o static/js/abridge.min.js",
-    "abridge-bundle-elasticlunr": "npm run all && uglifyjs static/js/prestyle.js static/js/theme_button.js static/js/search_elasticlunr.min.js static/js/email.js static/js/codecopy.js -c -m -o static/js/abridge.min.js",
-    "abridge-bundle-tinysearch": "npm run all && uglifyjs static/js/prestyle.js static/js/theme_button.js static/js/search_tinysearch.min.js static/js/email.js static/js/codecopy.js -c -m -o static/js/abridge.min.js",
-    "abridge-bundle-stork": "npm run all && uglifyjs static/js/prestyle.js static/js/theme_button.js static/js/search_stork.min.js static/js/email.js static/js/codecopy.js -c -m -o static/js/abridge.min.js",
-    "nosearch": "npm run abridge-bundle-nosearch && sed -i \"s|^build_search_index.*|build_search_index = false|\" 'config.toml' && sed -i \"s|^search_library.*|search_library = false|\" 'config.toml' && sed -i \"s|^draft.*|draft = true|\" 'content/static/tinysearch_json.md' && sed -i \"s|^draft.*|draft = true|\" 'content/static/stork_toml.md' && zola build",
-    "elasticlunr": "npm run abridge-bundle-elasticlunr && sed -i \"s|^build_search_index.*|build_search_index = true|\" 'config.toml' && sed -i \"s|^search_library.*|search_library = 'elasticlunr'|\" 'config.toml' && sed -i \"s|^draft.*|draft = true|\" 'content/static/tinysearch_json.md' && sed -i \"s|^draft.*|draft = true|\" 'content/static/stork_toml.md' && zola build",
-    "tinysearch": "npm run abridge-bundle-tinysearch && sed -i \"s|^build_search_index.*|build_search_index = true|\" 'config.toml' && sed -i \"s|^search_library.*|search_library = 'tinysearch'|\" 'config.toml' && sed -i \"s|^draft.*|draft = false|\" 'content/static/tinysearch_json.md' && sed -i \"s|^draft.*|draft = true|\" 'content/static/stork_toml.md' && zola build && mkdir -p tmp && tinysearch --optimize --path tmp public/data_tinysearch/index.html && rsync -avz tmp/*.wasm static/ && rm -rf tmp",
-    "stork": "npm run abridge-bundle-stork && sed -i \"s|^build_search_index.*|build_search_index = true|\" 'config.toml' && sed -i \"s|^search_library.*|search_library = 'stork'|\" 'config.toml' && sed -i \"s|^draft.*|draft = true|\" 'content/static/tinysearch_json.md' && sed -i \"s|^draft.*|draft = false|\" 'content/static/stork_toml.md' && zola build && stork build --input public/data_stork/index.html --output static/stork.st"
+    "abridge-bundle-nosearch": "uglifyjs static/js/prestyle.js static/js/theme_button.js static/js/email.js static/js/codecopy.js -c -m -o static/js/abridge.min.js",
+    "abridge-bundle-elasticlunr": "uglifyjs static/js/prestyle.js static/js/theme_button.js static/js/search_elasticlunr.min.js static/js/email.js static/js/codecopy.js -c -m -o static/js/abridge.min.js",
+    "abridge-bundle-tinysearch": "uglifyjs static/js/prestyle.js static/js/theme_button.js static/js/search_tinysearch.min.js static/js/email.js static/js/codecopy.js -c -m -o static/js/abridge.min.js",
+    "abridge-bundle-stork": "uglifyjs static/js/prestyle.js static/js/theme_button.js static/js/search_stork.min.js static/js/email.js static/js/codecopy.js -c -m -o static/js/abridge.min.js",
+    "nosearch": "npm run nonbundles && npm run abridge-bundle-nosearch && sed -i \"s|^build_search_index.*|build_search_index = false|\" 'config.toml' && sed -i \"s|^search_library.*|search_library = false|\" 'config.toml' && sed -i \"s|^draft.*|draft = true|\" 'content/static/tinysearch_json.md' && sed -i \"s|^draft.*|draft = true|\" 'content/static/stork_toml.md' && zola build",
+    "elasticlunr": "npm run nonbundles && npm run abridge-bundle-elasticlunr && sed -i \"s|^build_search_index.*|build_search_index = true|\" 'config.toml' && sed -i \"s|^search_library.*|search_library = 'elasticlunr'|\" 'config.toml' && sed -i \"s|^draft.*|draft = true|\" 'content/static/tinysearch_json.md' && sed -i \"s|^draft.*|draft = true|\" 'content/static/stork_toml.md' && zola build",
+    "tinysearch": "npm run nonbundles && npm run abridge-bundle-tinysearch && sed -i \"s|^build_search_index.*|build_search_index = true|\" 'config.toml' && sed -i \"s|^search_library.*|search_library = 'tinysearch'|\" 'config.toml' && sed -i \"s|^draft.*|draft = false|\" 'content/static/tinysearch_json.md' && sed -i \"s|^draft.*|draft = true|\" 'content/static/stork_toml.md' && zola build && mkdir -p tmp && tinysearch --optimize --path tmp public/data_tinysearch/index.html && rsync -avz tmp/*.wasm static/ && rm -rf tmp",
+    "stork": "npm run nonbundles && npm run abridge-bundle-stork && sed -i \"s|^build_search_index.*|build_search_index = true|\" 'config.toml' && sed -i \"s|^search_library.*|search_library = 'stork'|\" 'config.toml' && sed -i \"s|^draft.*|draft = true|\" 'content/static/tinysearch_json.md' && sed -i \"s|^draft.*|draft = false|\" 'content/static/stork_toml.md' && zola build && stork build --input public/data_stork/index.html --output static/stork.st"
   },
   "dependencies": {
     "uglify-js": "^3.15.4"

diff --git a/sass/abridge.scss b/sass/abridge.scss
@@ -17,6 +17,7 @@ $mb: 1200px !default;// value at which to switch from fluid layout to max-width
 
 $abridgeMode: "switcher" !default;//valid values: switcher, auto, dark, light
 $syntax-mode: "auto" !default;// Force syntax mode: auto, dark, light
+$switcherDefault: "dark" !default;// default for nojs switcher: dark, light
 
 $color: "orange" !default;// color template to use/override: orange, blue, blueshade
 
@@ -342,16 +343,24 @@ $syntax: true !default;//syntax highlighting for code blocks
       }
     }
   }
-  :root:not(.light) {
-    @include colors.dark($dark...);
+  :root:not(.switch) {
+    @if $switcherDefault == "light" {
+      @include colors.dark($light...);
+    }  @else {
+      @include colors.dark($dark...);
+    }
     @if $syntax {
       @if $syntax-mode == "auto" {
         @include colors-syntax.syndark($syntax-dark...);
       }
     }
   }
-  :root.light {
-    @include colors.light($light...);
+  :root.switch {
+    @if $switcherDefault == "light" {
+      @include colors.dark($dark...);
+    }  @else {
+      @include colors.dark($light...);
+    }
     @if $syntax {
       @if $syntax-mode == "auto" {
         @include colors-syntax.synlight($syntax-light...);

diff --git a/static/js/abridge.min.js b/static/js/abridge.min.js
diff --git a/static/js/theme.js b/static/js/theme.js
@@ -1,4 +1,4 @@
 // enforce local storage setting but also fallback to user-agent preferences
-if (localStorage.getItem('theme') === 'light' || (!localStorage.getItem('theme') && !window.matchMedia("(prefers-color-scheme: dark)").matches)) {
-  document.documentElement.classList.add('light');
+if (localStorage.getItem('theme') === 'switch' || (!localStorage.getItem('theme') && !window.matchMedia("(prefers-color-scheme: dark)").matches)) {
+  document.documentElement.classList.add('switch');
 }
diff --git a/static/js/theme.min.js b/static/js/theme.min.js
diff --git a/static/js/theme_button.js b/static/js/theme_button.js
@@ -1,7 +1,7 @@
 // Set lightmode
 if (document.getElementById('mode')) {
   document.getElementById('mode').addEventListener('click', () => {
-    document.documentElement.classList.toggle('light');
-    localStorage.setItem('theme', document.documentElement.classList.contains('light') ? 'light' : 'dark');
+    document.documentElement.classList.toggle('switch');
+    localStorage.setItem('theme', document.documentElement.classList.contains('switch') ? 'switch' : 'default');
   });
 }
diff --git a/static/js/theme_light.js b/static/js/theme_light.js
@@ -0,0 +1,4 @@
+// enforce local storage setting but also fallback to user-agent preferences
+if (localStorage.getItem('theme') === 'switch' || (!localStorage.getItem('theme') && !window.matchMedia("(prefers-color-scheme: light)").matches)) {
+  document.documentElement.classList.add('switch');
+}
diff --git a/static/js/theme_light.min.js b/static/js/theme_light.min.js
diff --git a/templates/macros/head.html b/templates/macros/head.html
@@ -1,8 +1,13 @@
 {#- Theme Switcher Button to toggle between dark/light #}
 {%- macro theme(config) %}
   {%- if config.extra.js_switcher | default(value=true) %}
-  {%- set js_theme=config.extra.js_theme | default(value="js/theme.min.js") -%}
-  {%- if js_theme %}
+  {%- set js_theme=config.extra.js_theme | default(value="") -%}
+  {%- if not js_theme %}
+  {%- if config.extra.js_switcher_default %}{%- if config.extra.js_switcher_default == "light" %}
+  {%- set js_theme="js/theme_light.min.js" -%}
+  {%- else %}
+  {%- set js_theme="js/theme.min.js" -%}
+  {%- endif %}{%- endif %}
   <script src="{{ get_url(path=js_theme, trailing_slash=false) | safe }}"{%- if config.extra.integrity | default(value=true) %} integrity="sha384-{{ get_hash(path=js_theme, sha_type=384, base64=true) | safe }}"{%- endif %}></script>
   {%- endif %}
   {%- endif %}