From 37d247911c8c70d5d017f3ac679c8ef231389690 Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Tue, 11 Aug 2020 23:16:39 +0100
Subject: [PATCH] feat: experimental support to define both light and dark
 themes

Ability to define both light and dark color themes, rather than use the default settings for the alternative theme.

Add `[dark]` or `[light]` section to theme file to define the alternative theme.

Most vars supported except `primary`.

See #997
---
 assets/scss/academic/_nav.scss              | 31 +++++++++++++++++++++
 assets/scss/academic/_root.scss             | 10 +++++++
 assets/scss/main.scss                       |  9 ++++++
 assets/scss/template.scss                   |  1 +
 layouts/partials/functions/parse_theme.html | 29 +++++++++++--------
 5 files changed, 69 insertions(+), 11 deletions(-)
 create mode 100644 assets/scss/template.scss

diff --git a/assets/scss/academic/_nav.scss b/assets/scss/academic/_nav.scss
index ba013cdd..b9dffe7a 100644
--- a/assets/scss/academic/_nav.scss
+++ b/assets/scss/academic/_nav.scss
@@ -69,7 +69,24 @@
 }
 
 .dark .navbar {
+  background: $sta-dark-menu-primary;
   box-shadow: 0 0.125rem 0.25rem 0 rgba(255, 255, 255, .11);
+  .navbar-nav {
+    .nav-link {
+      color: rgba($sta-dark-menu-text, .85);
+
+      &.active,
+      &:hover,
+      &:focus {
+        color: $sta-dark-menu-text;
+      }
+
+      &.active {
+        font-weight: bold !important;
+        color: $sta-dark-menu-text-active !important;
+      }
+    }
+  }
 }
 
 // Remove Bootstrap's border from Toggle button.
@@ -136,6 +153,10 @@
   color: $sta-menu-text;
 }
 
+.dark #navbar-main .main-menu-item ul li .nav-link {
+  color: $sta-dark-menu-text;
+}
+
 @include media-breakpoint-down(md) {
   // Used in conjunction with mobile .navbar-brand to center logo on mobile.
   .navbar-brand-mobile-wrapper {
@@ -200,7 +221,17 @@ ul.nav-icons li.nav-item a.nav-link {
   z-index: 1032;  // I18n dropdown over mobile expanded menu.
 }
 
+.dark .dropdown-menu {
+  background-color: $sta-dark-menu-primary !important;
+  color: $sta-dark-menu-text !important;
+}
+
 .dropdown-item {
   background-color: $sta-menu-primary !important;
   color: $sta-menu-text !important;
 }
+
+.dark .dropdown-item {
+  background-color: $sta-dark-menu-primary !important;
+  color: $sta-dark-menu-text !important;
+}
diff --git a/assets/scss/academic/_root.scss b/assets/scss/academic/_root.scss
index a83573f9..88841cdc 100644
--- a/assets/scss/academic/_root.scss
+++ b/assets/scss/academic/_root.scss
@@ -124,6 +124,16 @@ a:focus {
   color: $sta-link-hover;
 }
 
+.dark a,
+.dark h3.article-title a:hover {
+  color: $sta-dark-link;
+}
+
+.dark a:hover,
+.dark a:focus {
+  color: $sta-dark-link-hover;
+}
+
 img,
 video {
   height: auto;
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index a4e3bf7f..d82bf920 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -21,11 +21,19 @@ $sta-primary-dark: darken($sta-primary, $sta-darken-percentage);
 $sta-link: {{ $scr.Get "link" }};
 $sta-link-hover: {{ $scr.Get "link_hover" }};
 
+$sta-dark-link: {{ $scr.Get "dark_link" }};
+$sta-dark-link-hover: {{ $scr.Get "dark_link_hover" }};
+
 $sta-menu-primary: {{ $scr.Get "menu_primary" }};
 $sta-menu-text: {{ $scr.Get "menu_text" }};
 $sta-menu-text-active: {{ $scr.Get "menu_text_active" }};
 $sta-menu-title: {{ $scr.Get "menu_title" }};
 
+$sta-dark-menu-primary: {{ $scr.Get "dark_menu_primary" }};
+$sta-dark-menu-text: {{ $scr.Get "dark_menu_text" }};
+$sta-dark-menu-text-active: {{ $scr.Get "dark_menu_text_active" }};
+$sta-dark-menu-title: {{ $scr.Get "dark_menu_title" }};
+
 $sta-background: {{ $scr.Get "background" }};
 $sta-dark-background: {{ $scr.Get "dark_background" }};
 
@@ -38,4 +46,5 @@ $sta-dark-home-section-even: {{ $scr.Get "dark_home_section_even" }};
 @import "bootstrap_variables";
 @import "_vendor/bootstrap/bootstrap";
 @import "academic/academic";
+@import "template";
 @import "custom";
diff --git a/assets/scss/template.scss b/assets/scss/template.scss
new file mode 100644
index 00000000..5699fc47
--- /dev/null
+++ b/assets/scss/template.scss
@@ -0,0 +1 @@
+// Templates override this file with their own SCSS styling.
diff --git a/layouts/partials/functions/parse_theme.html b/layouts/partials/functions/parse_theme.html
index 101d2e6a..2fa092f8 100644
--- a/layouts/partials/functions/parse_theme.html
+++ b/layouts/partials/functions/parse_theme.html
@@ -31,23 +31,25 @@
 {{- $scr.Set "light" ($theme.light | default true) -}}
 
 {{ if $theme.light }}
-  {{- $scr.Set "background" ($theme.background | default "#fff") -}}
-  {{- $scr.Set "dark_background" "rgb(40, 42, 54)" -}}
-  {{- $scr.Set "home_section_odd" $theme.home_section_odd -}}
-  {{- $scr.Set "home_section_even" $theme.home_section_even -}}
-  {{- $scr.Set "dark_home_section_odd" "hsla(231, 15%, 18%, 1)" -}}
-  {{- $scr.Set "dark_home_section_even" "hsla(231, 15%, 16%, 1)" -}}
+  {{- $scr.Set "background" ($theme.background | default "rgb(255, 255, 255)") -}}
+  {{- $scr.Set "dark_background" ($theme.dark.background | default "hsla(231, 15%, 16%, 1)") -}}
+  {{- $scr.Set "home_section_odd" ($theme.home_section_odd | default "rgb(255, 255, 255)") -}}
+  {{- $scr.Set "home_section_even" ($theme.home_section_even | default "rgb(247, 247, 247)") -}}
+  {{- $scr.Set "dark_home_section_odd" ($theme.dark.home_section_odd | default "hsla(231, 15%, 18%, 1)") -}}
+  {{- $scr.Set "dark_home_section_even" ($theme.dark.home_section_even | default "hsla(231, 15%, 16%, 1)") -}}
 {{ else }}
-  {{- $scr.Set "background" ($theme.background | default "#fff") -}}
+  {{- $scr.Set "background" ($theme.light.background | default "rgb(255, 255, 255)") -}}
   {{- $scr.Set "dark_background" ($theme.background | default "rgb(40, 42, 54)") -}}
-  {{- $scr.Set "home_section_odd" "rgb(255, 255, 255)" -}}
-  {{- $scr.Set "home_section_even" "rgb(247, 247, 247)" -}}
-  {{- $scr.Set "dark_home_section_odd" $theme.home_section_odd -}}
-  {{- $scr.Set "dark_home_section_even" $theme.home_section_even -}}
+  {{- $scr.Set "home_section_odd" ($theme.light.home_section_odd | default "rgb(255, 255, 255)") -}}
+  {{- $scr.Set "home_section_even" ($theme.light.home_section_even | default "rgb(247, 247, 247)") -}}
+  {{- $scr.Set "dark_home_section_odd" ($theme.home_section_odd | default "hsla(231, 15%, 18%, 1)") -}}
+  {{- $scr.Set "dark_home_section_even" ($theme.home_section_even | default "hsla(231, 15%, 16%, 1)") -}}
 {{ end }}
 
 {{- $scr.Set "link" ($theme.link | default $theme.primary) -}}
 {{- $scr.Set "link_hover" ($theme.link_hover | default $theme.primary) -}}
+{{- $scr.Set "dark_link" ($theme.dark.link | default $theme.primary) -}}
+{{- $scr.Set "dark_link_hover" ($theme.dark.link_hover | default $theme.primary) -}}
 
 {{- $scr.Set "primary" $theme.primary -}}
 
@@ -55,3 +57,8 @@
 {{- $scr.Set "menu_text" $theme.menu_text -}}
 {{- $scr.Set "menu_text_active" $theme.menu_text_active -}}
 {{- $scr.Set "menu_title" $theme.menu_title -}}
+
+{{- $scr.Set "dark_menu_primary" ($theme.dark.menu_primary | default "rgb(40, 42, 54)") -}}
+{{- $scr.Set "dark_menu_text" ($theme.dark.menu_text | default "white") -}}
+{{- $scr.Set "dark_menu_text_active" ($theme.dark.menu_text_active | default "rgba(255, 255, 255, 0.8)") -}}
+{{- $scr.Set "dark_menu_title" ($theme.dark.menu_title | default "white") -}}