rayelliott
/
hugo-coder-fork
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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.
This commit is contained in:
John Schroeder 2019-11-21 07:13:49 -06:00 committed by Luiz F. A. de Prá
parent f6caaf0493
commit b00b75064d
14 changed files with 167 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CONTRIBUTORS.md
View File

@ -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)

49
assets/scss/_base_dark.scss Normal file
View File

@ -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()
}
}

39
assets/scss/_base_inverted.scss
View File

@ -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;
}
}

20
assets/scss/_content_inverted.scss → assets/scss/_content_dark.scss
View File

@ -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()
}
}

17
assets/scss/_footer_dark.scss Normal file
View File

@ -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()
}
}

7
assets/scss/_footer_inverted.scss
View File

@ -1,7 +0,0 @@
body.inverted {
.footer {
a {
color: $link-color-inverted;
}
}
}

54
assets/scss/_navigation_dark.scss Normal file
View File

@ -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()
}
}

44
assets/scss/_navigation_inverted.scss
View File

@ -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;
}
}
}
}
}

12
assets/scss/_variables.scss
View File

@ -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;

5
assets/scss/coder-dark.scss Normal file
View File

@ -0,0 +1,5 @@
@import "variables";
@import "base_dark";
@import "content_dark";
@import "navigation_dark";
@import "footer_dark";

5
assets/scss/coder-inverted.scss
View File

@ -1,5 +0,0 @@
@import "variables";
@import "base_inverted";
@import "content_inverted";
@import "navigation_inverted";
@import "footer_inverted";

8
exampleSite/config.toml
View File

@ -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

18
layouts/_default/baseof.html
View File

@ -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" . }}

4
stackbit.yaml
View File

@ -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