From 1d9de2264d3ee6d5f7b0ecdc2618603e3f38e269 Mon Sep 17 00:00:00 2001 From: Gabriel Arazas Date: Sat, 30 Apr 2022 01:42:08 +0800 Subject: [PATCH] Add system themes setting --- CHANGELOG.adoc | 6 ++++ README.adoc | 8 +++-- assets/scss/layout.scss | 26 ++++++++++------ assets/templates/theme.scss | 16 +++++++++- .../data/more-contentful/themes/_dark.yaml | 18 +++++++++++ .../data/more-contentful/themes/_light.yaml | 18 +++++++++++ i18n/en.toml | 10 ++++++ i18n/tl.toml | 11 +++++++ layouts/partials/components.html | 31 +++++++++++++++++-- 9 files changed, 129 insertions(+), 15 deletions(-) create mode 100644 exampleSite/data/more-contentful/themes/_dark.yaml create mode 100644 exampleSite/data/more-contentful/themes/_light.yaml diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc index 8020345..f52a88a 100644 --- a/CHANGELOG.adoc +++ b/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 diff --git a/README.adoc b/README.adoc index 9a88c60..6766f9a 100644 --- a/README.adoc +++ b/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. diff --git a/assets/scss/layout.scss b/assets/scss/layout.scss index 37a903b..52990c5 100644 --- a/assets/scss/layout.scss +++ b/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); diff --git a/assets/templates/theme.scss b/assets/templates/theme.scss index 678bc3b..761a19d 100644 --- a/assets/templates/theme.scss +++ b/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 }} diff --git a/exampleSite/data/more-contentful/themes/_dark.yaml b/exampleSite/data/more-contentful/themes/_dark.yaml new file mode 100644 index 0000000..61f48a5 --- /dev/null +++ b/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" diff --git a/exampleSite/data/more-contentful/themes/_light.yaml b/exampleSite/data/more-contentful/themes/_light.yaml new file mode 100644 index 0000000..31da6d3 --- /dev/null +++ b/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" diff --git a/i18n/en.toml b/i18n/en.toml index eeb4719..ef8ab12 100644 --- a/i18n/en.toml +++ b/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" diff --git a/i18n/tl.toml b/i18n/tl.toml index 1420bb3..10b87c4 100644 --- a/i18n/tl.toml +++ b/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" diff --git a/layouts/partials/components.html b/layouts/partials/components.html index 0437e13..a632818 100644 --- a/layouts/partials/components.html +++ b/layouts/partials/components.html @@ -43,10 +43,37 @@
{{ partial "components/heroicon.html" "color-swatch" }}
+
{{- range $filename, $scheme := (index $.Site.Data "more-contentful").themes }} - {{- $name := cond (eq $filename "_index") (printf "%s (default)" .scheme) .scheme }} -
{{ $name }}
+ {{- $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 }} + +
{{ $name }}
{{- end }} + + {{ .Scratch.Get "has-system-theme" }} +
+ {{ i18n "theme_os_default" }} +
+