revised toggleable light mode/dark mode

_config.yml

@@ -3,13 +3,24 @@ name: Voron Documentation
 description: Voron Official and Community Documentation
 logo: "/images/voron_design_logo.png"
 markdown: kramdown
-remote_theme: pmarsceill/just-the-docs
-color_scheme: voron-dark
+remote_theme: just-the-docs/just-the-docs
+color_scheme: voron_dark
 search_enabled: true
 search.button: true
 aux_links:
   "Voron Documentation on GitHub":
     - "https://github.com/VoronDesign/Voron-Documentation"
   "VoronDesign Home":
     - "https://vorondesign.com"
-
+#
+# exclude:
+#   - .sass-cache/
+#   - .jekyll-cache/
+#   - gemfiles/
+#   - Gemfile
+#   - Gemfile.lock
+#   - node_modules/
+#   - vendor/bundle/
+#   - vendor/cache/
+#   - vendor/gems/
+#   - vendor/ruby/

_includes/footer_custom.html

@@ -0,0 +1,3 @@
+<a href="." id="theme-toggleb" onclick="modeSwitcher()" style="cursor: pointer;"></a>
+<a href="{{page.url}}" id="theme-toggle" onclick="modeSwitcher()" style="cursor: pointer;"></a>
+<script src="/scripts/mode-switcher.js"></script>

_sass/color_schemes/voron_dark.scss

@@ -0,0 +1,156 @@
+//
+// Voron Customizations
+//
+
+//
+// Color Definitions
+//
+$grey-dk-400: #2c2f33;
+$grey-dk-500: #23272a;
+$red-400: #bd0f0f;
+$red-500: #760a0a;
+$voron-red-30: #dd6670;
+$voron-red-40: #ff3341;
+$voron-red-50: #ff0213;
+$voron-red-60: #cc000e;
+$voron-red-70: #99000a;
+$voron-red-80: #dd0007;
+$voron-link-purple: #661aff;
+
+$white: #fff !default;
+$black: #000;
+
+$grey-dk-000: #959396 !default;
+$grey-dk-100: #5c5962 !default;
+$grey-dk-200: #44434d !default;
+$grey-dk-250: #302d36 !default;
+$grey-dk-300: #27262b !default;
+
+$grey-lt-000: #f5f6fa !default;
+$grey-lt-100: #eeebee !default;
+$grey-lt-200: #ecebed !default;
+$grey-lt-300: #e6e1e8 !default;
+
+$purple-000: #7253ed !default;
+$purple-100: #5e41d0 !default;
+$purple-200: #4e26af !default;
+$purple-300: #381885 !default;
+
+$blue-000: #2c84fa !default;
+$blue-100: #2869e6 !default;
+$blue-200: #264caf !default;
+$blue-300: #183385 !default;
+
+$green-000: #41d693 !default;
+$green-100: #11b584 !default;
+$green-200: #009c7b !default;
+$green-300: #026e57 !default;
+
+$yellow-000: #ffeb82 !default;
+$yellow-100: #fadf50 !default;
+$yellow-200: #f7d12e !default;
+$yellow-300: #e7af06 !default;
+
+$red-000: #f77e7e !default;
+$red-100: #f96e65 !default;
+$red-200: #e94c4c !default;
+$red-300: #dd2e2e !default;
+
+//GAcolors
+$red-red: red;
+$bluish-green-600: #4c959c;
+$gold-600:#cc9900;
+$burnt-orange-600: #e35223;
+$blue-600: #32a3e5;
+$purple-600: #700aea;
+$neon-green-600: #00ff01;
+$pink-600: #e216d1;
+$brown-600: #b8754b;
+$light-green-600: #04dc93;
+$light-purple-600: #a286c0;
+$Myvoron-red-30: #f7a6ad;
+$voron-red-ga: #dd2e2e;
+$grey-lt-400: #b5b3b6;
+$orange-600: #ff7a00;
+$mytogglebtnbg: #5c5962;
+$mytogglebtncolor: #edeaee;
+$purple-650: #b888e8;
+
+//
+// Body Elements
+//
+$body-background-color: $grey-dk-400;
+$body-heading-color: $voron-red-60;
+//$btn-primary-color: $voron-red-40;
+$btn-primary-color: $grey-lt-300;
+$link-color: $voron-red-40;
+
+// Copied from JTD dark theme
+$sidebar-color: $grey-dk-500;
+$border-color: $grey-dk-200;
+
+$body-text-color: $grey-lt-300;
+$nav-child-link-color: $grey-dk-000;
+$search-result-preview-color: $grey-dk-000;
+//$base-button-color: $grey-dk-250;
+$base-button-color: $grey-dk-100;
+
+$code-background-color: $grey-dk-250;
+$search-background-color: $grey-dk-250;
+$table-background-color: $grey-dk-250;
+//$feedback-color: darken($sidebar-color, 3%);
+$feedback-color: darken($sidebar-color, 5%);
+
+//https://github.com/just-the-docs/just-the-docs/blob/main/_sass/support/_variables.scss
+//https://frank.af/voron/colors.html
+
+.color-blind-red { color: $red-300; }
+.color-blind-green { color: $neon-green-600; }
+.color-blind-yellow { color: $yellow-200; }
+.color-blind-blue {color: $blue-600; }
+.color-blind-orange {color: $orange-600; }
+.color-blind-red-red {color: $red-red; }
+.color-blind-grey-dk-100 { color: $grey-dk-000; }
+.color-blind-purple { color: $purple-650; }
+
+// for double underlines
+.underline-double-trouble {
+    background-image: linear-gradient(to bottom, red 33%, transparent 33%, transparent 66%, red 66%, red);
+    background-position: 0 1.03em;
+    background-repeat: repeat-x;
+    background-size: 2px 6px;
+  }
+
+//font sizes
+.fs_percent_110 { font-size: 110%; }
+
+a:link {
+    font-weight: 700;
+}
+
+input[type=text] {
+  color: $grey-lt-300;
+}
+
+button.btn.theme-toggle[id=theme-toggle]{
+  background-color: $mytogglebtnbg;
+  color: $mytogglebtncolor;
+}
+
+.warning {
+  padding: 10px;
+  background-color: darken($voron-red-80, 30%);
+  border-width: 2px;
+  border-color: $voron-red-50;
+  border-style: solid;    
+  border-radius: 20px;
+}
+.summary {
+  padding: 10px;
+  background-color: $grey-dk-500;
+  border-width: 2px;
+  border-color: $voron-red-70;
+  border-style: solid;
+  border-radius: 20px;
+
+} 

_sass/color_schemes/voron_light.scss

@@ -0,0 +1,131 @@
+//
+// Voron Customizations
+//
+
+//
+// Color Definitions
+//
+$red-400: #bd0f0f;
+$red-500: #760a0a;
+$voron-red-30: #dd6670;
+$voron-red-40: #ff3341;
+$voron-red-50: #ff0213;
+$voron-red-60: #cc000e;
+$voron-red-70: #99000a;
+$voron-red-80: #dd0007;
+$voron-link-purple: #661aff;
+$black: #27262b;
+$grey-dk-400: #2c2f33;
+$black: #23272a;
+$purple-100: #5e41d0;
+
+$grey-lt-000: #f5f6fa;
+$grey-lt-200: #ecebed;
+$grey-lt-300: #e6e1e8;
+$grey-lt-400: #b5b3b6;
+$grey-lt-550: #636363;
+$grey-lt-600: #b7b7b7;
+$grey-lt-700: #cccccc;
+$white: #fff;
+$black: #000;
+
+$grey-dk-000: #959396 !default;
+$grey-dk-100: #5c5962 !default;
+$grey-dk-200: #44434d !default;
+$grey-dk-250: #302d36 !default;
+
+$purple-000: #7253ed !default;
+
+$purple-200: #4e26af !default;
+$purple-300: #381885 !default;
+
+$blue-000: #2c84fa !default;
+$blue-100: #2869e6 !default;
+$blue-200: #264caf !default;
+$blue-300: #0d1b44 !default;
+
+$green-000: #41d693 !default;
+$green-100: #11b584 !default;
+$green-200: #009c7b !default;
+$green-300: #026e57 !default;
+
+$yellow-000: #ffeb82 !default;
+$yellow-100: #fadf50 !default;
+$yellow-200: #f7d12e !default;
+$yellow-300: #e7af06 !default;
+$gold-400: #ab7125;
+
+$red-000: #f77e7e !default;
+$red-100: #f96e65 !default;
+$red-200: #e94c4c !default;
+$red-300: #dd2e2e !default;
+
+// GA colors
+$orange-500: #ff7a00;
+$red-red: red;
+$burnt-orange-600: #e35223;
+
+//
+// Body Elements
+//
+$body-background-color: $grey-lt-200;
+$sidebar-color: $grey-dk-000;
+$search-background-color: $grey-lt-200;
+$table-background-color: $grey-lt-200;
+$code-background-color: $grey-lt-700;
+$feedback-color: darken($sidebar-color, 5%);
+
+$body-text-color: $black;
+$body-heading-color: $black;
+$search-result-preview-color: $purple-300;
+$nav-child-link-color: $blue-300;
+$link-color: $blue-300;
+$btn-primary-color: $yellow-300;
+$base-button-color: $grey-lt-300;
+
+$border-color: $grey-lt-400;
+
+//https://github.com/just-the-docs/just-the-docs/blob/main/_sass/support/_variables.scss
+//https://frank.af/voron/colors.html
+
+.color-blind-red { color: $black; }
+.color-blind-green { color: $black; }
+.color-blind-yellow { color: $black; }
+.color-blind-blue {color: $black; }
+.color-bline-orange {color: $black; }
+.color-blind-red-red {color: $black; }
+.color-blind-grey-dk-100 { color: $black; }
+.color-blind-purple { color: $black; }
+
+// for double underlines
+.underline-double-trouble {
+  background-image: linear-gradient(to bottom, red 33%, transparent 33%, transparent 66%, red 66%, red);
+  background-position: 0 1.03em;
+  background-repeat: repeat-x;
+  background-size: 2px 6px;
+}
+
+  // font sizes
+  .fs_percent_110 { font-size: 110%; }
+
+a:link {
+  font-weight: 700;
+}
+.warning {
+  padding: 10px;
+  background-color: $voron-red-70;
+  border-width: 2px;
+  border-color: $voron-red-50;
+  border-style: solid;    
+  border-radius: 20px;
+} 
+.summary {
+  padding: 10px;
+  background-color: $grey-dk-000;
+  border-width: 2px;
+  border-color: $blue-300;
+  border-style: solid;
+  border-radius: 20px;
+
+} 
+

assets/css/just-the-docs-voron_dark.scss

@@ -0,0 +1,3 @@
+---
+---
+{% include css/just-the-docs.scss.liquid color_scheme="voron_dark" %}

assets/css/just-the-docs-voron_light.scss

@@ -0,0 +1,3 @@
+---
+---
+{% include css/just-the-docs.scss.liquid color_scheme="voron_light" %}