From 3f4aa41a685ccab17e1d76cdde20a4a6ab95a095 Mon Sep 17 00:00:00 2001
From: Ekaitz Zarraga <ekaitz@elenq.tech>
Date: Mon, 13 Jan 2020 19:41:52 +0100
Subject: Colortheme switcher
---
themes/elenq/static/css/elenq-pelican.css | 50 ++++++++++++++++++++++++++
themes/elenq/static/css/prism.css | 27 ++++++++++++++
themes/elenq/static/js/colorscheme-switcher.js | 35 ++++++++++++++++++
3 files changed, 112 insertions(+)
create mode 100644 themes/elenq/static/js/colorscheme-switcher.js
(limited to 'themes/elenq/static')
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);
--
cgit v1.2.3