summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--themes/elenq/static/css/elenq-pelican.css50
-rw-r--r--themes/elenq/static/css/prism.css27
-rw-r--r--themes/elenq/static/js/colorscheme-switcher.js35
-rw-r--r--themes/elenq/templates/_moon.svg1
-rw-r--r--themes/elenq/templates/_sun.svg1
-rw-r--r--themes/elenq/templates/base.html5
6 files changed, 119 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);
diff --git a/themes/elenq/templates/_moon.svg b/themes/elenq/templates/_moon.svg
new file mode 100644
index 0000000..cccd56d
--- /dev/null
+++ b/themes/elenq/templates/_moon.svg
@@ -0,0 +1 @@
+<svg id="moon" xmlns="http://www.w3.org/2000/svg" class="theme-icon" width="1800" height="1800" viewBox="0 0 1800 1800"><path d="M1463.034 1307.56c-36 6-73 9-110 9-371 0-672-301-672-672 0-127 37-251 104-357-266 79-456 323-456 613 0 353 287 640 640 640 193 0 374-88 494-233zm203-85c-125 271-399 446-697 446-423 0-768-345-768-768 0-415 325-752 739-767 28-1 51 15 61 39 11 25 4 54-15 72-114 104-177 246-177 400 0 300 244 544 544 544 79 0 155-17 228-51 25-11 53-6 72 13s24 48 13 72z"/></svg>
diff --git a/themes/elenq/templates/_sun.svg b/themes/elenq/templates/_sun.svg
new file mode 100644
index 0000000..93936b6
--- /dev/null
+++ b/themes/elenq/templates/_sun.svg
@@ -0,0 +1 @@
+<svg id="sun" xmlns="http://www.w3.org/2000/svg" class="theme-icon" width="1800" height="1800" viewBox="0 0 1800 1800"><path d="M1472.42 901.97c0-318-258-576-576-576s-576 258-576 576 258 576 576 576 576-258 576-576zm276 277c-3 10-11 17-20 20l-292 96v306c0 10-5 20-13 26-9 6-19 8-29 4l-292-94-180 248c-6 8-16 13-26 13s-20-5-26-13l-180-248-292 94c-10 4-20 2-29-4-8-6-13-16-13-26v-306l-292-96c-9-3-17-10-20-20s-2-21 4-29l180-248-180-248c-6-9-7-19-4-29s11-17 20-20l292-96v-306c0-10 5-20 13-26 9-6 19-8 29-4l292 94 180-248c12-16 40-16 52 0l180 248 292-94c10-4 20-2 29 4 8 6 13 16 13 26v306l292 96c9 3 17 10 20 20s2 20-4 29l-180 248 180 248c6 8 7 19 4 29z"/></svg>
diff --git a/themes/elenq/templates/base.html b/themes/elenq/templates/base.html
index 79973e1..c0f2811 100644
--- a/themes/elenq/templates/base.html
+++ b/themes/elenq/templates/base.html
@@ -38,6 +38,7 @@
<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/prism.css">
<script type="text/javascript" async src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/prism-hl.js"></script>
+ <script type="text/javascript" async src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/colorscheme-switcher.js"></script>
</head>
<body id="index" class="home">
@@ -61,6 +62,10 @@
<a class="navbar-link link-right {% if pg == page %}active{% endif %}" href="{{ SITEURL }}/{{ pg.url }}">{{ pg.title }}</a>
{% endfor %}
{% endif %}
+ <button name="switch" id="dark-light-switch" class="navbar-link link-right" title="Toggle dark or light colorscheme">
+ {% include "_sun.svg" %}
+ {% include "_moon.svg" %}
+ </button>
</div>
</nav>
</div>