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 +++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

(limited to 'themes/elenq/static/css/elenq-pelican.css')

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;
+  }
+}
-- 
cgit v1.2.3