Skip to content
Permalink
Browse files

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.
  • Loading branch information...
thesmiley1 authored and luizdepra committed Nov 21, 2019
1 parent f6caaf0 commit b00b75064d67953db2f32fee676360477026d97f
@@ -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()
}
}

This file was deleted.

@@ -1,15 +1,15 @@
body.inverted {
@mixin content_dark {

.content {

.list {
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()
}
}

This file was deleted.

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

This file was deleted.

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

This file was deleted.

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

0 comments on commit b00b750

Please sign in to comment.
You can’t perform that action at this time.