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:
parent
f6caaf0493
commit
b00b75064d
|
@ -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)
|
||||
|
|
|
@ -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()
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
|
@ -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()
|
||||
}
|
||||
}
|
|
@ -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()
|
||||
}
|
||||
}
|
|
@ -1,7 +0,0 @@
|
|||
body.inverted {
|
||||
.footer {
|
||||
a {
|
||||
color: $link-color-inverted;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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()
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
|
@ -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;
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
@import "variables";
|
||||
@import "base_dark";
|
||||
@import "content_dark";
|
||||
@import "navigation_dark";
|
||||
@import "footer_dark";
|
|
@ -1,5 +0,0 @@
|
|||
@import "variables";
|
||||
@import "base_inverted";
|
||||
@import "content_inverted";
|
||||
@import "navigation_inverted";
|
||||
@import "footer_inverted";
|
|
@ -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
|
||||
|
|
|
@ -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" . }}
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue