Add system themes setting

CHANGELOG.adoc

@@ -38,6 +38,12 @@ For reference, it is from link:https://github.com/simple-icons/simple-icons/comm
 * Format the files correctly as specified from the EditorConfig file.
 
 
+== Removed
+
+* Setting the default theme with `./data/more-contentful/themes/_index.{yaml,json,toml}`.
+It has been replaced with setting system themes with `./data/more-contentful/themes/_{light,dark}.{yaml,json,toml}`.
+
+
 
 
 == [0.1.3] - 2020-11-06

README.adoc

@@ -281,9 +281,11 @@ base0F: "a16946"
 You can also use https://github.com/chriskempson/base16#scheme-repositories[any of the existing color schemes] as a starting point.
 If you want to override the default scheme, you can place the file as `_index.{json,toml,yaml}` (of whatever appropriate data format of your choice).
 
-NOTE: Inheriting schemes is not possible and to change one color of the color scheme, you have to create a whole new file with the single change.
-Even though scheme inheritance can be implemented, it'll open a new gate of unpredictable problems so it is better to be explicit on everything for now.
-Sorry, it will never be added on the theme. :(
+CAUTION: Setting the default theme through `_index` is deprecated.
+Please set them through the dark/light theme instead.
+
+You can also set the light and dark theme for your website by naming them `_light.{json,toml,yaml}` and `_dark.{json,toml,yaml}`, respectively.
+This will add certain options in the theme selection button as well as the ability to set the OS default.
 
 The schemes are pressed against a template (i.e., link:./assets/templates/theme.scss[`./assets/templates/theme.scss`]) then added to the resulting stylesheet.
 

assets/scss/layout.scss

@@ -64,16 +64,11 @@ footer[aria-label="Site footer"] {
 
 .site__theme-btn {
   background: var(--base00);
-  border: var(--border-style);
-  position: absolute;
   padding: 0.5em;
-  right: 0;
-  top: 0;
+  position: relative;
+  float: right;
 
   &:hover {
-    & svg {
-      display: none;
-    }
     & .site__theme-dropdown {
       display: unset;
     }
@@ -81,14 +76,27 @@ footer[aria-label="Site footer"] {
 }
 
 .site__theme-dropdown {
+  background: var(--base00);
+  border: var(--border-style);
   display: none;
-  position: relative;
-  left: 0;
+  padding: 0.5em;
+  position: absolute;
+  right: 0;
+  width: max-content;
+}
+
+.site__theme-dropdown-list {
+  display: flex;
+  flex-flow: column;
 }
 
 .site__theme-item {
   padding: 0 0.5em;
 
+  &[data-theme-light] { order: -1; }
+  &[data-theme-dark] { order: -1; }
+  &[data-theme-system] { order: -2; }
+
   .site__theme-dropdown &:hover {
     background: var(--base0C);
     color: var(--base00);

assets/templates/theme.scss

@@ -12,7 +12,21 @@
     {{- end }}
   }
 
-  {{- if ne $name "_index" }}[data-theme="{{ .scheme }}"]{{ end }}:root {
+  {{- if eq $name "_light" }}
+    @media (prefers-color-scheme: light) {
+      :root {
+        @include createColorScheme
+      }
+    }
+  {{- else if eq $name "_dark" }}
+    @media (prefers-color-scheme: dark) {
+      :root {
+        @include createColorScheme
+      }
+    }
+  {{- end }}
+
+  [data-theme="{{ .scheme }}"]:root {
     @include createColorScheme;
   }
 {{- end }}

exampleSite/data/more-contentful/themes/_dark.yaml

@@ -0,0 +1,18 @@
+scheme: "Solarized Dark"
+author: "Ethan Schoonover (modified by aramisgithub)"
+base00: "002b36"
+base01: "073642"
+base02: "586e75"
+base03: "657b83"
+base04: "839496"
+base05: "93a1a1"
+base06: "eee8d5"
+base07: "fdf6e3"
+base08: "dc322f"
+base09: "cb4b16"
+base0A: "b58900"
+base0B: "859900"
+base0C: "2aa198"
+base0D: "268bd2"
+base0E: "6c71c4"
+base0F: "d33682"

exampleSite/data/more-contentful/themes/_light.yaml

@@ -0,0 +1,18 @@
+scheme: "Solarized Light"
+author: "Ethan Schoonover (modified by aramisgithub)"
+base00: "fdf6e3"
+base01: "eee8d5"
+base02: "93a1a1"
+base03: "839496"
+base04: "657b83"
+base05: "586e75"
+base06: "073642"
+base07: "002b36"
+base08: "dc322f"
+base09: "cb4b16"
+base0A: "b58900"
+base0B: "859900"
+base0C: "2aa198"
+base0D: "268bd2"
+base0E: "6c71c4"
+base0F: "d33682"

i18n/en.toml

@@ -27,3 +27,13 @@ other = "Available in other languages"
 
 [page_not_found]
 other = "Page not found"
+
+# Themes
+[theme_dark]
+other = "Dark"
+
+[theme_light]
+other = "Light"
+
+[theme_os_default]
+other = "OS default"

i18n/tl.toml

@@ -27,3 +27,14 @@ other = "Ibang lengwahe"
 
 [page_not_found]
 other = "Hindi makita ang webpage na hinahanap mo"
+
+
+# Themes
+[theme_dark]
+other = "Dark"
+
+[theme_light]
+other = "Light"
+
+[theme_os_default]
+other = "OS default"

layouts/partials/components.html

@@ -43,10 +43,37 @@
   <div class="site__theme-btn" aria-label="Theme toggle">
       {{ partial "components/heroicon.html" "color-swatch" }}
       <div class="site__theme-dropdown">
+        <div class="site__theme-dropdown-list">
         {{- range $filename, $scheme := (index $.Site.Data "more-contentful").themes }}
-        {{- $name := cond (eq $filename "_index") (printf "%s (default)" .scheme) .scheme }}
-        <div class="site__theme-item" {{ if ne $filename "_index" }}data-theme="{{ .scheme }}"{{ end }}>{{ $name }}</div>
+          {{- $isLight := false }}
+          {{- $isDark := false }}
+
+          {{- $name := cond (eq $filename "_index") (printf "%s (default)" .scheme) .scheme }}
+          {{- if eq $filename "_light" }}
+            {{- $name = i18n "theme_light" }}
+            {{- $isLight = true }}
+          {{- else if eq $filename "_dark" }}
+            {{- $name = i18n "theme_dark" }}
+            {{- $isDark = true }}
+          {{- end }}
+
+          {{- $hasSystemTheme := (or $isDark $isLight) }}
+          {{ if $hasSystemTheme }}
+            {{ .Scratch.Set "has-system-theme" $hasSystemTheme }}
+          {{ end }}
+
+          <div class="site__theme-item"
+            data-theme="{{ .scheme }}"
+            {{ if $isDark }}data-theme-dark{{ end }}
+            {{ if $isLight }}data-theme-light{{ end }}
+          >{{ $name }}</div>
         {{- end }}
+
+        {{ .Scratch.Get "has-system-theme" }}
+          <div class="site__theme-item" data-theme-system>
+            {{ i18n "theme_os_default" }}
+          </div>
+        </div>
       </div>
     </div>
   </div>