From 7e533e64c5acb5eb3bcdbfc97e9d60f1aa0e0519 Mon Sep 17 00:00:00 2001 From: timvisee Date: Tue, 16 Jul 2019 17:35:05 +0200 Subject: [PATCH] Add light theme that can be toggled with contrast button in page header --- .../glyphicons-halflings-51-contrast.svg | 3 +++ .../sass/_colors/base16_atelier_dune.scss | 13 ------------ themes/zenn/sass/_colors/monokai.scss | 13 ------------ themes/zenn/sass/_colors/zenn.scss | 10 ---------- themes/zenn/sass/_components.scss | 18 ++++++++++++++++- themes/zenn/sass/_config.scss | 15 -------------- themes/zenn/sass/_config_dark.scss | 17 ++++++++++++++++ themes/zenn/sass/_config_light.scss | 17 ++++++++++++++++ themes/zenn/sass/_landing.scss | 2 +- themes/zenn/sass/_layout.scss | 11 ++++++++-- themes/zenn/sass/{site.scss => _site.scss} | 1 - themes/zenn/sass/site_dark.scss | 2 ++ themes/zenn/sass/site_light.scss | 2 ++ themes/zenn/static/js/theme.js | 20 +++++++++++++++++++ themes/zenn/templates/site.html | 9 ++++++++- 15 files changed, 96 insertions(+), 57 deletions(-) create mode 100644 static/icons/glyphicons-halflings-51-contrast.svg delete mode 100644 themes/zenn/sass/_colors/base16_atelier_dune.scss delete mode 100644 themes/zenn/sass/_colors/monokai.scss delete mode 100644 themes/zenn/sass/_colors/zenn.scss create mode 100644 themes/zenn/sass/_config_dark.scss create mode 100644 themes/zenn/sass/_config_light.scss rename themes/zenn/sass/{site.scss => _site.scss} (90%) create mode 100644 themes/zenn/sass/site_dark.scss create mode 100644 themes/zenn/sass/site_light.scss create mode 100644 themes/zenn/static/js/theme.js diff --git a/static/icons/glyphicons-halflings-51-contrast.svg b/static/icons/glyphicons-halflings-51-contrast.svg new file mode 100644 index 0000000..3a12d9b --- /dev/null +++ b/static/icons/glyphicons-halflings-51-contrast.svg @@ -0,0 +1,3 @@ + + + diff --git a/themes/zenn/sass/_colors/base16_atelier_dune.scss b/themes/zenn/sass/_colors/base16_atelier_dune.scss deleted file mode 100644 index a2f0016..0000000 --- a/themes/zenn/sass/_colors/base16_atelier_dune.scss +++ /dev/null @@ -1,13 +0,0 @@ -// Inspired by: base16 atelier dune -// https://github.com/atelierbram/base16-atelier-schemes - -$light-text: #202020; -$dark-text: #a6a28c; -$background: #20201d; -$background-darker: darken($background, 4%); -$background-border: darken($background, 8%); -$header-color: #6684e1; -$link-color: #ae9513; -$link-color-hover: lighten($link-color, 15%); -$logo-color: #fff; -$logo-color-hover: $link-color-hover; diff --git a/themes/zenn/sass/_colors/monokai.scss b/themes/zenn/sass/_colors/monokai.scss deleted file mode 100644 index 803ee40..0000000 --- a/themes/zenn/sass/_colors/monokai.scss +++ /dev/null @@ -1,13 +0,0 @@ -// Inspired by: monokai -// https://github.com/kevinsawicki/monokai - -$light-text: #202020; -$dark-text: #ccc; -$background: #282828; -$background-darker: darken($background, 4%); -$background-border: darken($background, 8%); -$header-color: #66D9EF; -$link-color: #A6E22E; -$link-color-hover: #FD971F; -$logo-color: #fff; -$logo-color-hover: $link-color-hover; diff --git a/themes/zenn/sass/_colors/zenn.scss b/themes/zenn/sass/_colors/zenn.scss deleted file mode 100644 index 23cfdee..0000000 --- a/themes/zenn/sass/_colors/zenn.scss +++ /dev/null @@ -1,10 +0,0 @@ -$light-text: #202020; -$dark-text: #ccc; -$background: #212931; -$background-darker: darken($background, 4%); -$background-border: darken($background, 8%); -$header-color: #BEA38C; -$link-color: $header-color; -$link-color-hover: lighten($link-color, 15%); -$logo-color: #fff; -$logo-color-hover: $link-color; diff --git a/themes/zenn/sass/_components.scss b/themes/zenn/sass/_components.scss index 4c51332..446f961 100644 --- a/themes/zenn/sass/_components.scss +++ b/themes/zenn/sass/_components.scss @@ -43,6 +43,8 @@ content { border: 1px solid $color-main-border; box-shadow: 0 0 10px 5px rgba($color-main-border, 0.4); border-radius: 4px; + transition: background-color 0.2s ease, + border 0.2s ease; } pre { @@ -63,6 +65,8 @@ content { font-family: $font-mono; background-color: $color-main-bg-alt; border-radius: 3px; + transition: background-color 0.2s ease, + color 0.2s ease; } table { @@ -88,15 +92,26 @@ content { margin-left: 0; margin-right: 0; padding-left: 1em; + transition: border 0.2s ease; } } +/** + * Theme toggle button. + */ +.theme-toggle { + font-size: 1.1rem; + line-height: 2.2em; + float: right; +} + /** * Text style modifiers. */ .muted { color: $color-text-muted; + transition: color 0.2s ease; } .meta { @@ -121,7 +136,8 @@ content { line-height: 1; margin: 0 0.2em 0.2em 0; transition: box-shadow 0.2s ease, - background-color 0.2s ease; + background-color 0.2s ease, + border 0.2s ease; } a.tag { diff --git a/themes/zenn/sass/_config.scss b/themes/zenn/sass/_config.scss index 4d367a7..cff84e0 100644 --- a/themes/zenn/sass/_config.scss +++ b/themes/zenn/sass/_config.scss @@ -3,24 +3,9 @@ $responsive-small: 900px; $responsive-mini: 550px; $responsive-tiny: 400px; -// Colors -$color-text: #a6a28c; -$color-text-muted: darken($color-text, 25%); -$color-main-bg: #20201d; -$color-main-bg-alt: darken($color-main-bg, 4%); -$color-main-border: darken($color-main-bg, 8%); -$color-header: #ff6f33; -$color-link: #ae9513; -$color-link-hover: lighten($color-link, 15%); - -// Top logo -$logo-color: #fff; -$logo-color-hover: $color-link-hover; - // Fonts $font-base: "Source Sans Pro", Ubuntu, sans-serif; $font-main: "Zilla Slab", "Open Sans", sans-serif; $font-read: "Merriweather", serif; $font-mono: "Fira Mono", monospace; -// $font-logo: "Source Sans Pro", Helvetica, sans-serif; $font-logo: $font-main; diff --git a/themes/zenn/sass/_config_dark.scss b/themes/zenn/sass/_config_dark.scss new file mode 100644 index 0000000..19505af --- /dev/null +++ b/themes/zenn/sass/_config_dark.scss @@ -0,0 +1,17 @@ +@import "_config"; + +// Colors +$color-text: #a6a28c; +$color-text-muted: darken($color-text, 25%); +$color-main-bg: #20201d; +$color-main-bg-alt: darken($color-main-bg, 4%); +$color-main-border: darken($color-main-bg, 8%); +$color-main-shadow: rgba($color-main-border, 0.4); +$color-header: #ff6f33; +$color-link: #ae9513; +$color-link-hover: lighten($color-link, 15%); + +// Top logo and landing page +$logo-color: #fff; +$logo-color-hover: $color-link-hover; +$landing-color-shadow: $color-main-border; diff --git a/themes/zenn/sass/_config_light.scss b/themes/zenn/sass/_config_light.scss new file mode 100644 index 0000000..22c3880 --- /dev/null +++ b/themes/zenn/sass/_config_light.scss @@ -0,0 +1,17 @@ +@import "_config"; + +// Colors +$color-text: #282828; +$color-text-muted: lighten($color-text, 35%); +$color-main-bg: #fcfbf7; +$color-main-bg-alt: darken($color-main-bg, 10%); +$color-main-border: darken($color-main-bg, 50%); +$color-main-shadow: rgba(darken(#20201d, 8%), 0.1); +$color-header: #ff6f33; +$color-link: #9C8611; +$color-link-hover: darken($color-link, 10%); + +// Top logo and landing page +$logo-color: #fff; +$logo-color-hover: lighten($color-link, 15%); +$landing-color-shadow: darken(#20201d, 8%); diff --git a/themes/zenn/sass/_landing.scss b/themes/zenn/sass/_landing.scss index 73fd1c7..e7cc5f5 100644 --- a/themes/zenn/sass/_landing.scss +++ b/themes/zenn/sass/_landing.scss @@ -7,7 +7,7 @@ header#banner .greeting { font-family: $font-read; font-size: 2em; line-height: 2; - text-shadow: 0 0 0.75em $color-main-border; + text-shadow: 0 0 0.75em $landing-color-shadow; &.top { margin: 4em auto 0 auto; diff --git a/themes/zenn/sass/_layout.scss b/themes/zenn/sass/_layout.scss index 204ce30..c325f10 100644 --- a/themes/zenn/sass/_layout.scss +++ b/themes/zenn/sass/_layout.scss @@ -8,7 +8,9 @@ main { display: flex; color: $color-text; border: 1px solid $color-main-border; - box-shadow: 0 0 10px 5px rgba($color-main-border, 0.4); + box-shadow: 0 0 10px 5px $color-main-shadow; + transition: color 0.2s ease, + border-color 0.2s ease; } content { @@ -18,6 +20,7 @@ content { flex: 1; overflow-x: auto; overflow-y: visible; + transition: background-color 0.2s ease; #{headings(1,6,"header >")} { margin: 0; @@ -30,6 +33,7 @@ content > header { margin: 0; padding-bottom: 1em; border-bottom: 1px dashed $color-main-border; + transition: border 0.2s ease; #{headings(1,6)} { margin: 0; @@ -48,6 +52,7 @@ content ul { article { padding: 2em 0; border-bottom: 1px dashed $color-main-border; + transition: border 0.2s ease; // Hack to fix 
 overflow
     width: 100%;
@@ -69,7 +74,9 @@ sidebar {
     padding: 0.5em 1.5em 1.5em 1.5em;
     box-sizing: border-box;
     background: $color-main-bg-alt;
-    box-shadow: 0 0 10px 5px rgba($color-main-border, 0.4);
+    box-shadow: 0 0 10px 5px $color-main-shadow;
+    transition: background-color 0.2s ease,
+        box-shadow 0.2s ease;
 
     h1 {
         font-size: 1.4em;
diff --git a/themes/zenn/sass/site.scss b/themes/zenn/sass/_site.scss
similarity index 90%
rename from themes/zenn/sass/site.scss
rename to themes/zenn/sass/_site.scss
index d979e71..ca1d73f 100644
--- a/themes/zenn/sass/site.scss
+++ b/themes/zenn/sass/_site.scss
@@ -1,5 +1,4 @@
 @import "_zola";
-@import "_config";
 @import "_functions";
 
 @import "_base";
diff --git a/themes/zenn/sass/site_dark.scss b/themes/zenn/sass/site_dark.scss
new file mode 100644
index 0000000..e402e00
--- /dev/null
+++ b/themes/zenn/sass/site_dark.scss
@@ -0,0 +1,2 @@
+@import "_config_dark";
+@import "_site";
diff --git a/themes/zenn/sass/site_light.scss b/themes/zenn/sass/site_light.scss
new file mode 100644
index 0000000..75601a7
--- /dev/null
+++ b/themes/zenn/sass/site_light.scss
@@ -0,0 +1,2 @@
+@import "_config_light";
+@import "_site";
diff --git a/themes/zenn/static/js/theme.js b/themes/zenn/static/js/theme.js
new file mode 100644
index 0000000..eea6d7c
--- /dev/null
+++ b/themes/zenn/static/js/theme.js
@@ -0,0 +1,20 @@
+/**
+ * Set and apply the normal or toggled theme.
+ *
+ * @param toggled Truthy value to show toggled, normal otherwise.
+ */
+function theme_set(toggled) {
+    document.getElementById('style-dark').disabled = toggled;
+    document.getElementById('style-light').disabled = !toggled;
+    localStorage.setItem('theme-toggled', toggled ? '1' : '');
+}
+
+/**
+ * Toggle the current theme.
+ */
+function theme_toggle() {
+    theme_set(!document.getElementById('style-dark').disabled);
+}
+
+// Apply selected theme, stored in localStorage item
+theme_set(localStorage.getItem('theme-toggled'));
diff --git a/themes/zenn/templates/site.html b/themes/zenn/templates/site.html
index 7ba83cf..1c152a1 100644
--- a/themes/zenn/templates/site.html
+++ b/themes/zenn/templates/site.html
@@ -25,7 +25,8 @@
 
         {% block css %}
             
-            
+            
+            
 
             {% if page.extra.zenn_applause %}
                 
@@ -33,6 +34,8 @@
         {% endblock css %}
 
         {% block js %}
+            
+
             {% if page.extra.zenn_applause %}
                 
             {% endif %}
@@ -58,6 +61,10 @@
         {% block main %}
             

                 
+                    
+                        {{ load_data(path="static/icons/glyphicons-halflings-51-contrast.svg") | safe }}
+                    
+
                     {% if section.title %}