Automatic dark/light colorschemes (#234)

John Schroeder

21.13.2019 b00b75064d67953db2f32fee676360477026d97f

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.

 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)

 assets/scss/_base_dark.scss

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

 assets/scss/_base_inverted.scss

File was deleted

 assets/scss/_content_dark.scss

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

 assets/scss/_content_inverted.scss

File was deleted

 assets/scss/_footer_dark.scss

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

 assets/scss/_footer_inverted.scss

File was deleted

 assets/scss/_navigation_dark.scss

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

 assets/scss/_navigation_inverted.scss

File was deleted

 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;

 assets/scss/coder-dark.scss

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

 assets/scss/coder-inverted.scss

File was deleted

 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

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


 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