From b00b75064d67953db2f32fee676360477026d97f Mon Sep 17 00:00:00 2001
From: John Schroeder <smileydaemon@gmail.com>
Date: Thu, 21 Nov 2019 13:13:49 +0000
Subject: [PATCH] Automatic dark/light colorschemes (#234)
---
assets/scss/_footer_dark.scss | 17 ++++
/dev/null | 5 -
exampleSite/config.toml | 8 +
layouts/_default/baseof.html | 18 +++-
assets/scss/_navigation_dark.scss | 54 +++++++++++++
assets/scss/_content_dark.scss | 46 +++++++++++
stackbit.yaml | 4
assets/scss/_variables.scss | 12 +-
assets/scss/coder-dark.scss | 5 +
CONTRIBUTORS.md | 1
assets/scss/_base_dark.scss | 49 ++++++++++++
11 files changed, 198 insertions(+), 21 deletions(-)
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_dark.scss b/assets/scss/_content_dark.scss
new file mode 100644
index 0000000..75c2d00
--- /dev/null
+++ b/assets/scss/_content_dark.scss
@@ -0,0 +1,46 @@
+@mixin content_dark {
+
+ .content {
+
+ .list {
+ ul {
+ li {
+ .title {
+ color: $fg-color-dark;
+ &:hover,
+ &:focus {
+ color: $link-color-dark;
+ }
+ }
+ }
+ }
+ }
+
+ .centered {
+ .about {
+ ul {
+ li {
+ a {
+ color: $fg-color-dark;
+ &:hover,
+ &:focus {
+ color: $link-color-dark;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+}
+
+body.colorscheme-dark {
+ @include content_dark()
+}
+
+body.colorscheme-auto {
+ @media (prefers-color-scheme: dark) {
+ @include content_dark()
+ }
+}
diff --git a/assets/scss/_content_inverted.scss b/assets/scss/_content_inverted.scss
deleted file mode 100644
index cb6d719..0000000
--- a/assets/scss/_content_inverted.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-body.inverted {
-
- .content {
-
- .list {
- ul {
- li {
- .title {
- color: $fg-color-inverted;
- &:hover,
- &:focus {
- color: $link-color-inverted
- }
- }
- }
- }
- }
-
- .centered {
- .about {
- ul {
- li {
- a {
- color: $fg-color-inverted;
- &:hover,
- &:focus {
- color: $link-color-inverted;
- }
- }
- }
- }
- }
- }
- }
-
-}
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-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 @@
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 }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen">
{{ 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 }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}" crossorigin="anonymous" media="screen" />
{{ end }}
{{ end }}
@@ -77,7 +77,13 @@
{{ hugo.Generator }}
</head>
- <body class="{{ if .Site.Params.rtl }}rtl{{ end }} {{ if .Site.Params.inverted }}inverted{{ end }}">
+ {{ $csClass := "colorscheme-light" }}
+ {{ if eq .Site.Params.colorscheme "dark" }}
+ {{ $csClass = "colorscheme-dark" }}
+ {{ else if eq .Site.Params.colorscheme "auto" }}
+ {{ $csClass = "colorscheme-auto" }}
+ {{ end }}
+ <body class="{{ $csClass }}{{ if .Site.Params.rtl }} rtl{{ end }}">
<main class="wrapper">
{{ 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 @@
name: commit
- type: boolean
name: rtl
- - type: boolean
- name: inverted
+ - type: string
+ name: colorscheme
- type: number
name: maxSeeAlsoItems
- type: list
--
Gitblit v1.10.0