From b00b75064d67953db2f32fee676360477026d97f Mon Sep 17 00:00:00 2001 From: John Schroeder Date: Thu, 21 Nov 2019 07:13:49 -0600 Subject: [PATCH] Automatic dark/light colorschemes (#234) * Automatic dark/light colorschemes A new `colorscheme` option is added with the capability to be always dark, always light, or automatic based on the user's browser setting. This makes the `inverted` option superfluous, and therefore deprecated. Nomenclature of files, variables, etc are changed from `inverted` to `dark` to reflect this change. Closes #226. * Remove inverted option completely The `inverted` option is now not just deprecated, but removed completely. --- CONTRIBUTORS.md | 1 + assets/scss/_base_dark.scss | 49 +++++++++++++++++ assets/scss/_base_inverted.scss | 39 -------------- ...ntent_inverted.scss => _content_dark.scss} | 20 +++++-- assets/scss/_footer_dark.scss | 17 ++++++ assets/scss/_footer_inverted.scss | 7 --- assets/scss/_navigation_dark.scss | 54 +++++++++++++++++++ assets/scss/_navigation_inverted.scss | 44 --------------- assets/scss/_variables.scss | 12 ++--- assets/scss/coder-dark.scss | 5 ++ assets/scss/coder-inverted.scss | 5 -- exampleSite/config.toml | 8 ++- layouts/_default/baseof.html | 18 ++++--- stackbit.yaml | 4 +- 14 files changed, 167 insertions(+), 116 deletions(-) create mode 100644 assets/scss/_base_dark.scss delete mode 100644 assets/scss/_base_inverted.scss rename assets/scss/{_content_inverted.scss => _content_dark.scss} (52%) create mode 100644 assets/scss/_footer_dark.scss delete mode 100644 assets/scss/_footer_inverted.scss create mode 100644 assets/scss/_navigation_dark.scss delete mode 100644 assets/scss/_navigation_inverted.scss create mode 100644 assets/scss/coder-dark.scss delete mode 100644 assets/scss/coder-inverted.scss diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index 5b19be8..bab849f 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -48,3 +48,4 @@ - [Ariejan de Vroom](https://www.devroom.io) - [Bobby Lindsey](https://bobbywlindsey.com) - [José Mª Escartín](https://github.com/jme52) +- [John Schroeder](https://blog.schroedernet.software) diff --git a/assets/scss/_base_dark.scss b/assets/scss/_base_dark.scss new file mode 100644 index 0000000..e14e502 --- /dev/null +++ b/assets/scss/_base_dark.scss @@ -0,0 +1,49 @@ +@mixin base_dark { + + color: $fg-color-dark; + background-color: $bg-color-dark; + + a { + color: $link-color-dark; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + color: $alt-fg-color-dark; + } + + code { + background-color: $alt-bg-color-dark; + color: $fg-color-dark; + } + + pre { + code { + background-color: inherit; + color: inherit; + } + } + + blockquote { + border-left: 2px solid $alt-bg-color-dark; + } + + table td, table th { + border: 2px solid $alt-fg-color-dark; + } + +} + +body.colorscheme-dark { + @include base_dark() +} + +body.colorscheme-auto { + @media (prefers-color-scheme: dark) { + @include base_dark() + } +} diff --git a/assets/scss/_base_inverted.scss b/assets/scss/_base_inverted.scss deleted file mode 100644 index a592ace..0000000 --- a/assets/scss/_base_inverted.scss +++ /dev/null @@ -1,39 +0,0 @@ -body.inverted { - - color: $fg-color-inverted; - background-color: $bg-color-inverted; - - a { - color: $link-color-inverted; - } - - h1, - h2, - h3, - h4, - h5, - h6 { - color: $alt-fg-color-inverted; - } - - code { - background-color: $alt-bg-color-inverted; - color: $fg-color-inverted; - } - - pre { - code { - background-color: inherit; - color: inherit; - } - } - - blockquote { - border-left: 2px solid $alt-bg-color-inverted; - } - - table td, table th { - border: 2px solid $alt-fg-color-inverted; - } - -} diff --git a/assets/scss/_content_inverted.scss b/assets/scss/_content_dark.scss similarity index 52% rename from assets/scss/_content_inverted.scss rename to assets/scss/_content_dark.scss index cb6d719..75c2d00 100644 --- a/assets/scss/_content_inverted.scss +++ b/assets/scss/_content_dark.scss @@ -1,4 +1,4 @@ -body.inverted { +@mixin content_dark { .content { @@ -6,10 +6,10 @@ body.inverted { ul { li { .title { - color: $fg-color-inverted; + color: $fg-color-dark; &:hover, &:focus { - color: $link-color-inverted + color: $link-color-dark; } } } @@ -21,10 +21,10 @@ body.inverted { ul { li { a { - color: $fg-color-inverted; + color: $fg-color-dark; &:hover, &:focus { - color: $link-color-inverted; + color: $link-color-dark; } } } @@ -34,3 +34,13 @@ body.inverted { } } + +body.colorscheme-dark { + @include content_dark() +} + +body.colorscheme-auto { + @media (prefers-color-scheme: dark) { + @include content_dark() + } +} diff --git a/assets/scss/_footer_dark.scss b/assets/scss/_footer_dark.scss new file mode 100644 index 0000000..45fedb8 --- /dev/null +++ b/assets/scss/_footer_dark.scss @@ -0,0 +1,17 @@ +@mixin footer_dark { + .footer { + a { + color: $link-color-dark; + } + } +} + +body.colorscheme-dark { + @include footer_dark() +} + +body.colorscheme-auto { + @media (prefers-color-scheme: dark) { + @include footer_dark() + } +} diff --git a/assets/scss/_footer_inverted.scss b/assets/scss/_footer_inverted.scss deleted file mode 100644 index 93ccad3..0000000 --- a/assets/scss/_footer_inverted.scss +++ /dev/null @@ -1,7 +0,0 @@ -body.inverted { - .footer { - a { - color: $link-color-inverted; - } - } -} \ No newline at end of file diff --git a/assets/scss/_navigation_dark.scss b/assets/scss/_navigation_dark.scss new file mode 100644 index 0000000..59af008 --- /dev/null +++ b/assets/scss/_navigation_dark.scss @@ -0,0 +1,54 @@ +@mixin navigation_dark { + + + .navigation { + a, span { + color: $fg-color-dark; + } + a { + &:hover, + &:focus { + color: $link-color-dark; + } + } + .navigation-list { + @media only screen and (max-width : 768px) { + background-color: $bg-color-dark; + border-top: solid 2px $alt-bg-color-dark; + border-bottom: solid 2px $alt-bg-color-dark; + } + .menu-separator { + @media only screen and (max-width : 768px) { + border-top: 2px solid $fg-color-dark; + } + } + } + #menu-toggle { + @media only screen and (max-width : 768px) { + &:checked + label { + color: $alt-bg-color-dark; + } + } + } + .menu-button { + @media only screen and (max-width : 768px) { + color: $fg-color-dark; + &:hover, + &:focus { + color: $link-color-dark; + } + } + } + } + +} + +body.colorscheme-dark { + @include navigation_dark() +} + +body.colorscheme-auto { + @media (prefers-color-scheme: dark) { + @include navigation_dark() + } +} diff --git a/assets/scss/_navigation_inverted.scss b/assets/scss/_navigation_inverted.scss deleted file mode 100644 index 732f224..0000000 --- a/assets/scss/_navigation_inverted.scss +++ /dev/null @@ -1,44 +0,0 @@ -body.inverted { - - - .navigation { - a, span { - color: $fg-color-inverted; - } - a { - &:hover, - &:focus { - color: $link-color-inverted; - } - } - .navigation-list { - @media only screen and (max-width : 768px) { - background-color: $bg-color-inverted; - border-top: solid 2px $alt-bg-color-inverted; - border-bottom: solid 2px $alt-bg-color-inverted; - } - .menu-separator { - @media only screen and (max-width : 768px) { - border-top: 2px solid $fg-color-inverted; - } - } - } - #menu-toggle { - @media only screen and (max-width : 768px) { - &:checked + label { - color: $alt-bg-color-inverted; - } - } - } - .menu-button { - @media only screen and (max-width : 768px) { - color: $fg-color-inverted; - &:hover, - &:focus { - color: $link-color-inverted; - } - } - } - } - -} diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index fb678ab..fa50e69 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -10,9 +10,9 @@ $alt-bg-color: #E0E0E0 !default; $alt-fg-color: #000 !default; $link-color: #1565c0 !default; -// Colors inverted -$bg-color-inverted: #212121 !default; -$fg-color-inverted: #dadada !default; -$alt-bg-color-inverted: #424242 !default; -$alt-fg-color-inverted: #dadada !default; -$link-color-inverted: #36679f !default; +// Colors dark +$bg-color-dark: #212121 !default; +$fg-color-dark: #dadada !default; +$alt-bg-color-dark: #424242 !default; +$alt-fg-color-dark: #dadada !default; +$link-color-dark: #36679f !default; diff --git a/assets/scss/coder-dark.scss b/assets/scss/coder-dark.scss new file mode 100644 index 0000000..2cd4cf9 --- /dev/null +++ b/assets/scss/coder-dark.scss @@ -0,0 +1,5 @@ +@import "variables"; +@import "base_dark"; +@import "content_dark"; +@import "navigation_dark"; +@import "footer_dark"; diff --git a/assets/scss/coder-inverted.scss b/assets/scss/coder-inverted.scss deleted file mode 100644 index 6562cbf..0000000 --- a/assets/scss/coder-inverted.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import "variables"; -@import "base_inverted"; -@import "content_inverted"; -@import "navigation_inverted"; -@import "footer_inverted"; diff --git a/exampleSite/config.toml b/exampleSite/config.toml index a5d8f52..8464276 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -33,8 +33,12 @@ disqusShortname = "yourdiscussshortname" rtl = false - # Use inverted colors - inverted = false + # Specify light/dark colorscheme + # Supported values: + # "auto" (use preference set by browser) + # "dark" (dark background, light foreground) + # "light" (light background, dark foreground) (default) + colorscheme = "light" # Series see also post count maxSeeAlsoItems = 5 diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 3f16f20..a1fb252 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -47,14 +47,14 @@ {{ end }} {{ end }} - {{ if .Site.Params.inverted }} + {{ if or (eq .Site.Params.colorscheme "auto") (eq .Site.Params.colorscheme "dark") }} {{ if .Site.IsServer }} - {{ $cssOpts := (dict "targetPath" "css/coder-inverted.css" "enableSourceMap" true ) }} - {{ $styles := resources.Get "scss/coder-inverted.scss" | resources.ExecuteAsTemplate "style.coder-inverted.css" . | toCSS $cssOpts }} + {{ $cssOpts := (dict "targetPath" "css/coder-dark.css" "enableSourceMap" true ) }} + {{ $styles := resources.Get "scss/coder-dark.scss" | resources.ExecuteAsTemplate "style.coder-dark.css" . | toCSS $cssOpts }} {{ else }} - {{ $cssOpts := (dict "targetPath" "css/coder-inverted.css" ) }} - {{ $styles := resources.Get "scss/coder-inverted.scss" | resources.ExecuteAsTemplate "style.coder-inverted.css" . | toCSS $cssOpts | minify | fingerprint }} + {{ $cssOpts := (dict "targetPath" "css/coder-dark.css" ) }} + {{ $styles := resources.Get "scss/coder-dark.scss" | resources.ExecuteAsTemplate "style.coder-dark.css" . | toCSS $cssOpts | minify | fingerprint }} {{ end }} {{ end }} @@ -77,7 +77,13 @@ {{ hugo.Generator }} - + {{ $csClass := "colorscheme-light" }} + {{ if eq .Site.Params.colorscheme "dark" }} + {{ $csClass = "colorscheme-dark" }} + {{ else if eq .Site.Params.colorscheme "auto" }} + {{ $csClass = "colorscheme-auto" }} + {{ end }} +
{{ partial "header.html" . }} diff --git a/stackbit.yaml b/stackbit.yaml index c4c2d5d..a026d04 100644 --- a/stackbit.yaml +++ b/stackbit.yaml @@ -68,8 +68,8 @@ models: name: commit - type: boolean name: rtl - - type: boolean - name: inverted + - type: string + name: colorscheme - type: number name: maxSeeAlsoItems - type: list