Colortheme switcher

3 files changed, 112 insertions, 0 deletions

diff --git a/themes/elenq/static/css/elenq-pelican.css b/themes/elenq/static/css/elenq-pelican.css
index 0cf06f0..4ca2b77 100644
--- a/themes/elenq/static/css/elenq-pelican.css
+++ b/themes/elenq/static/css/elenq-pelican.css
@@ -92,3 +92,53 @@ h1 span.subtitle{
   margin-top: 4em;
   border-top: 1px solid var(--border-color);
 }
+
+
+/*Colorscheme selectable via JS with smooth transition*/
+
+html.color-theme-in-transition,
+html.color-theme-in-transition *,
+html.color-theme-in-transition *:before,
+html.color-theme-in-transition *:after {
+  transition: all 750ms !important;
+  transition-delay: 0 !important;
+}
+
+html[data-theme="light"]{
+  --bg-color:    #FFF;
+  --tx-color:    #222;
+  --link-color:  #1EAEDB;
+  --border-color:#EEE;
+}
+html[data-theme="dark"] {
+  --bg-color:    #2F2F2F;
+  --tx-color:    #FFF;
+  --link-color:  #1EAEDB;
+  --border-color:#4A4A4A;
+}
+
+.theme-icon{
+  display: none;
+
+  width: 2.5em;
+  height: auto;
+
+  margin: 2px;
+  margin-bottom: -7px;
+}
+
+#sun { fill: white; }
+#moon{ fill: black; }
+#dark-light-switch{
+  display: none;
+  background: none;
+  border: none;
+}
+#dark-light-switch[color="light"] > #moon{display:inline-block;}
+#dark-light-switch[color="dark"]  > #sun {display:inline-block;}
+
+@media only screen{
+  #dark-light-switch{
+    display: inline-block;
+  }
+}
diff --git a/themes/elenq/static/css/prism.css b/themes/elenq/static/css/prism.css
index c24467d..b3e345b 100644
--- a/themes/elenq/static/css/prism.css
+++ b/themes/elenq/static/css/prism.css
@@ -159,3 +159,30 @@ pre[class*="language-"] {
   }
 }
 
+
+
+/* Make editable via JS */
+
+html[data-theme="light"]{
+    --base: black;
+    --comment: slategray;
+    --punctuation: #999;
+    --property: #905;
+    --builtin: #690;
+    --operator: #9a6e3a;
+    --keyword: #07a;
+    --function: #DD4A68;
+    --variable: #e90;
+}
+
+html[data-theme="dark"]{
+    --base: #f8f8f2;
+    --comment: #6272a4;
+    --punctuation: #f8f8f2;
+    --property: #ff79c6;
+    --builtin: #50fa7b;
+    --operator: #f8f8f2;
+    --keyword: #8be9fd;
+    --function: #f1fa8c;
+    --variable: #ffb86c;
+}
diff --git a/themes/elenq/static/js/colorscheme-switcher.js b/themes/elenq/static/js/colorscheme-switcher.js
new file mode 100644
index 0000000..889b0dd
--- /dev/null
+++ b/themes/elenq/static/js/colorscheme-switcher.js
@@ -0,0 +1,35 @@
+var theme_switch = document.getElementById("dark-light-switch");
+
+var body = document.getElementsByTagName("BODY")[0];
+
+function init( color ){
+  theme_switch.setAttribute("color", color);
+  document.getElementById("dark-light-switch");
+}
+
+
+function change(color){
+  window.setTimeout(function() {
+    document.documentElement.classList.remove('color-theme-in-transition')
+  }, 1000)
+  document.documentElement.classList.add('color-theme-in-transition');
+  document.documentElement.setAttribute('data-theme', color);
+  theme_switch.setAttribute("color", color);
+}
+
+function theme_changed(){
+  color = theme_switch.getAttribute("color");
+  if(color=="light")
+    change("dark");
+  else
+    change("light");
+}
+
+var background = getComputedStyle(body).getPropertyValue("background-color");
+if(background == "rgb(255, 255, 255)") {
+  init("light");
+} else {
+  init("dark");
+}
+theme_switch.addEventListener("click", theme_changed);
+theme_switch.addEventListener("touch", theme_changed);