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

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