refactor: added back basic dark mode

Alexander Bilz

12.09.2022 fe27dbac37cf3301ac78c0ce6422eda748649447

refactor: added back basic dark mode

 assets/js/anatole-theme-switcher.js

@@ -6,6 +6,7 @@
function setTheme(style) {
  document.documentElement.setAttribute('data-theme', style);
  localStorage.setItem('theme', style);
  setCssClass(style);
}

function init() {
@@ -26,12 +27,25 @@
    // load a stored theme
    if (theme === 'light') {
      document.documentElement.setAttribute('data-theme', 'light');
      setCssClass('light');
    } else {
      document.documentElement.setAttribute('data-theme', 'dark');
      setCssClass('dark');
    }
  }
}

function setCssClass(style) {
  var body = document.body;
  if (style === 'light') {
    body.classList.remove('theme--dark');
    body.classList.add('theme--light');
  } else if (style === 'dark') {
    body.classList.remove('theme--light');
    body.classList.add('theme--dark');
  }
}

// switch themes
function switchTheme() {
  const theme = getTheme();
@@ -55,4 +69,6 @@
// Automatic Switching
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', switchTheme, false);

init();
document.addEventListener('DOMContentLoaded', function () {
  init();
});

 assets/scss/main.scss

@@ -1,5 +1,6 @@
@import './modules/variables';
@import './modules/config';
@import './modules/color_theme';
@import './partials/hugo';
@import './partials/base';
@import './partials/layout/html';

 assets/scss/modules/_color_theme.scss

New file
@@ -0,0 +1,43 @@
$themes: (
  light: (
    accent: $accent--lightmode,
    primary: $primary--lightmode,
    primary-light: $primary-light--lightmode,
    primary-lighter: $primary-lighter--lightmode,
    info: $info,
    shadow: $shadow--lightmode,
    border: 1px solid $primary-lighter--lightmode
  ),
  dark: (
    accent: $accent--darkmode,
    primary: $primary--darkmode,
    primary-light: $primary-light--darkmode,
    primary-lighter: $primary-lighter--darkmode,
    info: $info,
    shadow: $shadow--darkmode,
    border: 1px solid $primary-lighter--darkmode
  ),
);

@mixin themed() {
  @each $theme, $map in $themes {
    .theme--#{$theme} & {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), '#{$key}');
        $theme-map: map-merge(
          $theme-map,
          (
            $key: $value,
          )
        ) !global;
      }
      @content;
      $theme-map: null !global;
    }
  }
}

@function t($key) {
  @return map-get($theme-map, $key);
}

 assets/scss/modules/_config.scss

@@ -1,4 +1,3 @@

@mixin desktop {
  @media screen and (min-width: 961px) {
    @content;

 assets/scss/modules/_variables.scss

@@ -1,12 +1,21 @@
/* Newly defined variables */
$accent: #fff;
/* Strings used for mapping variables */
$primary: #464646;
$primary-light: #9f9f9f;
$primary-lighter: #eeeeee;
$info: #0366d7;
$shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
$border: 1px solid rgba(0, 0, 0, 0.15);

/* Newly defined variables */
$accent--lightmode: #fff;
$primary--lightmode: #464646;
$primary-light--lightmode: #9f9f9f;
$primary-lighter--lightmode: #eeeeee;
$shadow--lightmode: 0 8px 16px rgba(10, 10, 10, 0.1);

$accent--darkmode: #152028;
$primary--darkmode: #eeeeee;
$primary-light--darkmode: #9f9f9f;
$primary-lighter--darkmode: #464646;
$shadow--darkmode: 0 8px 16px rgba(10, 10, 10, 0.1);

$alert: #ffc107;
$info: #0366d7;

/* Former variables*/
$secondary-bg-color: #eeeeee;

 assets/scss/partials/_hugo.scss

@@ -1,16 +1,22 @@
a {
  text-decoration: none;
  color: $primary;
  @include themed() {
    color: t('primary');
  }

  &:hover {
    color: $info;
    @include themed() {
      color: t('info');
    }
  }
}

blockquote {
  @include themed() {
    color: t('primary');
    border-left: t('border');
  }
  padding: 0 1em;
  border-left: 0.25em solid $primary;
  color: $primary;
}

p {

 assets/scss/partials/components/_alert.scss

@@ -1,21 +1,24 @@
.alert {
    padding: 1rem;
    border-style: solid;
    border-color:$alert;
    border-radius: 0.25rem;
    border-width: 2px;

    &__indicator {
        background-color: $alert;
        display: inline-block;
        border-radius: 9999px;
        padding: 0.5rem;
        width: 2.5rem;
        height: 2.5rem;
        text-align: center;
        color: $accent;
        font-weight: 800;
        margin-right: 0.75rem;
      }
  @include themed() {
    border-color: t('alert');
  }
  
  padding: 1rem;
  border-style: solid;
  border-radius: 0.25rem;
  border-width: 2px;

  &__indicator {
    @include themed() {
      color: t('accent');
      background-color: t('alert');
    }
    display: inline-block;
    border-radius: 9999px;
    padding: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    text-align: center;
    font-weight: 800;
    margin-right: 0.75rem;
  }
}

 assets/scss/partials/components/_archive.scss

@@ -15,23 +15,31 @@
    }

    &-date {
      @include themed() {
        color: t('primary-light');
      }
      float: right;
      max-width: 10%;
      text-align: right;
      color: $primary-light;
    }
    &-title {
      color: $primary;
      @include themed() {
        color: t('primary');
      }
      width: 90%;
      display: inline-block;
      &:hover {
        color: $info;
        @include themed() {
          color: t('info');
        }
      }
    }

    &-heading {
      @include themed() {
        color: t('primary');
      }
      font-size: 2.4rem;
      color: $primary;
      font-weight: 600;
      line-height: 2.2em;
    }

 assets/scss/partials/components/_category.scss

@@ -1,9 +1,11 @@
.category {
  @include themed() {
    border: t('border');
    background-color: t('primary-lighter');
    color: t('primary') !important;
  }
  padding: 4px 6px;
  border-radius: 3px;
  color: $tag-color !important;
  background-color: $primary-lighter;
  border: 1px solid $primary-light;
  display: inline-block;
  font-size: 1.5rem;
  line-height: 1;

 assets/scss/partials/components/_footer.scss

@@ -23,13 +23,13 @@

  &__sidebar {
    display: none;
    @include desktop_and_print{
    @include desktop_and_print {
      display: inline-block;
    }
  }

  &__base {
    @include desktop_and_print{
    @include desktop_and_print {
      display: none;
    }
  }

 assets/scss/partials/components/_languageswitch.scss

@@ -13,17 +13,21 @@
    position: relative;

    @include desktop {
      background: $accent;
      border-color: $primary;
      @include themed() {
        background: t(accent);
        border-color: t(primary);
        box-shadow: t(shadow);
      }
      border-radius: 5px;
      box-shadow: $shadow;
      position: absolute;
      top: 40px;
    }

    &-item {
      @include themed() {
        color: t('primary');
      }
      background: transparent;
      color: $primary;
      display: block;
      line-height: 1;
      padding: 0.5rem 0.75rem 0.5rem 0;
@@ -40,10 +44,12 @@
    display: none;

    &::before {
      @include themed() {
        background: t('accent');
        box-shadow: t('shadow');
        border-color: t('primary');
      }
      content: '';
      background: $accent;
      box-shadow: $shadow;
      border-color: $primary;
      border-radius: 2px 0px 0px 0px;
      height: 14px;
      bottom: 0px;

 assets/scss/partials/components/_navbarburger.scss

@@ -7,7 +7,9 @@
  margin-left: auto;

  &__line {
    background-color: $primary;
    @include themed() {
      background-color: t('primary');
    }
    display: block;
    height: 1px;
    left: calc(50% - 8px);

 assets/scss/partials/components/_page404.scss

@@ -1,4 +1,4 @@
.page_404 {
    text-align: center;
    padding-top: 50px;
}
  text-align: center;
  padding-top: 50px;
}

 assets/scss/partials/components/_pagination.scss

@@ -9,11 +9,13 @@
    padding: 0;
    height: 13px;
    &-item {
      @include themed() {
        color: t('primary');
      }
      margin: 0 2px 0 2px;
      display: inline;
      line-height: 1;
      text-decoration: none;
      color: $primary;
    }
  }
}

 assets/scss/partials/components/_portfolio.scss

@@ -11,7 +11,9 @@
  }

  &::before {
    border: $border;
    @include themed() {
      border: t('border');
    }
    content: '';
    z-index: -1;
    position: absolute;
@@ -50,10 +52,12 @@

      &--right,
      &--left {
        @include themed() {
          background-color: t('accent');
        }
        margin-right: auto;
        margin-left: auto;
        width: calc(100% - 64px);
        background-color: $accent;
        z-index: -1;
        padding: 32px 32px 0px 32px;
        max-width: inherit;
@@ -87,26 +91,33 @@
  }

  &__description {
    background-color: $accent;
    @include themed() {
      background-color: t('accent');
    }
    padding: 32px;
    @include desktop_and_print {
      @include themed() {
        box-shadow: t('shadow');
      }
      padding: 48px;
      box-shadow: $shadow;
      background-color: $accent;
      border-radius: 0.5em;
    }

    &--left,
    &--right {
      @include themed() {
        border-bottom: t('border');
      }
      margin-top: -24px;
      border-bottom: $border;

      @include desktop_and_print {
        @include themed() {
          background: t('primary-lighter');
        }
        border-bottom: 0px;
        width: 60%;
        margin-top: -48px;
        z-index: 3;
        background: $primary-lighter;
      }
    }

@@ -118,23 +129,28 @@
  }

  &__button {
    @include themed() {
      border: 1px solid t('primary-light');
      color: t('info');
    }
    font-weight: 400;
    display: inline-block;
    position: relative;
    outline: 0;
    color: $info;
    background: transparent;
    font-size: 1.4rem;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid $primary-light;
    white-space: nowrap;
    font-style: normal;
    border-radius: 999em;
    padding: 10px;

    &:hover {
      @include themed() {
        border: 1px solid t('primary');
      }
      display: inline-block;
      position: relative;
      outline: 0px;
@@ -143,7 +159,6 @@
      text-align: center;
      text-decoration: none;
      cursor: pointer;
      border: 1px solid $primary;
      white-space: nowrap;
      font-weight: 400;
      font-style: normal;

 assets/scss/partials/components/_post.scss

@@ -1,5 +1,7 @@
.post {
  background-color: $accent;
  @include themed() {
    background-color: t('accent');
  }
  margin: 30px;

  &__more {
@@ -13,10 +15,12 @@
    display: block;

    &-wrapper {
      @include themed() {
        box-shadow: t('shadow');
      }
      border-radius: 0.5em;
      width: 100%;
      margin-bottom: 1em;
      box-shadow: $shadow;
      overflow: hidden;
      transition: box-shadow 0.3s ease;
    }
@@ -89,7 +93,9 @@
  }

  &__footer {
    border-bottom: $border;
    @include themed() {
      border-bottom: t('border');
    }
    font-size: 1.2rem;
    padding: 12px 0;


 assets/scss/partials/components/_sidebar.scss

@@ -4,7 +4,10 @@
  background-color: var(--bg-color);

  @include desktop_and_print {
    border-right: 1px solid $primary-lighter;
    @include themed() {
      border-right: 1px solid t('primary-lighter');
    }

    z-index: 3;
    height: 100vh;
    position: fixed;

 assets/scss/partials/layout/_body.scss

@@ -1,6 +1,13 @@
.body {
  color: $body-color;
  width: 100%;
  margin: 0 auto;
  background-color: $accent;
  // work around to style body
  &.theme--dark {
    color: $primary--darkmode;
    background-color: $accent--darkmode;
  }
  &.theme--light {
    color: $primary--lightmode;
    background-color: $accent--lightmode;
  }
}

 assets/scss/partials/layout/_header.scss

@@ -1,16 +1,20 @@
.header {
  @include themed() {
    background-color: t('accent');
  }
  width: 100%;
  position: fixed;
  right: 0;
  z-index: 3;
  background-color: $accent;

  @include desktop {
    border-bottom: $border;
    @include themed() {
      border-bottom: t('border');
    }
    width: $content-width;
  }

  @include print {
    display: none;
  }
}
}

 assets/scss/partials/layout/_nav.scss

@@ -1,11 +1,15 @@
.nav {
  @include themed() {
    box-shadow: t('shadow');
  }
  display: none;
  box-shadow: $shadow;

  &__list {
    @include themed() {
      background-color: t('primary-lighter');
    }
    margin: 0;
    list-style: none;
    background-color: $primary-lighter;
    width: 100%;

    &-item {
@@ -23,7 +27,10 @@
  &__link {
    &--active {
      @include desktop {
        border-bottom: 1px solid $primary;
        @include themed() {
          border-bottom: 1px solid t('primary');
        }

        padding-bottom: 22px;
      }
    }
@@ -42,8 +49,10 @@
    box-shadow: none;

    &__list {
      @include themed() {
        background-color: t('accent');
      }
      display: flex;
      background-color: $accent;

      &-item {
        &:not(:last-child) {

 assets/scss/partials/vendors/contactform.scss

@@ -1,70 +1,60 @@
/* (CONTACT) FORM */

.contact-form {
    margin-top: 30px;
  margin-top: 30px;
}
.form-style {
  width: 100%;
}
.form-style ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.form-style ul li {
  display: block;
  margin-bottom: 10px;
  min-height: 35px;
  @include themed() {
    background-color: t('accent');
    color: t('primary');
    broder: t('border');
  }
  .form-style {
    width: 100%;
  }
  .form-style ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .form-style ul li {
    display: block;
    margin-bottom: 10px;
    min-height: 35px;
  }
  .form-style ul li .field-style {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-size: 1.4rem;
    padding: 8px;
    outline: none;
    background-color: $accent;
    border: 1px solid $primary-light;
    color: $body-color;
    font-family: inherit;
  }
  .form-style ul li .field-style:focus {
    box-shadow: 0 0 5px;
    border: 1px solid;
  }
  .form-style ul li .field-split {
    width: 49%;
  }
  .form-style ul li .field-full {
    width: 100%;
  }
  .form-style ul li input.align-left {
    float: left;
  }
  .form-style ul li input.align-right {
    float: right;
  }
  .form-style ul li textarea {
    background-color: $accent;
    border: 1px solid $primary-light;
    color: $body-color;
    width: 100%;
    height: auto;
  }
  .form-style ul li input[type='button'],
  .form-style ul li input[type='submit'] {
    background-color: $accent;
    border: 1px solid $primary-light;
    display: inline-block;
    cursor: pointer;
    color: $body-color;
    text-decoration: none;
    width: 100%;
  }
  .form-style ul li input[type='button']:hover,
  .form-style ul li input[type='submit']:hover {
    background-color: $accent;
    border: 1px solid $primary-light;
  }
  
  /* (CONTACT) FORM END */
}
.form-style ul li .field-style {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  font-size: 1.4rem;
  padding: 8px;
  outline: none;
  font-family: inherit;
}
.form-style ul li .field-style:focus {
  box-shadow: 0 0 5px;
  border: 1px solid;
}
.form-style ul li .field-split {
  width: 49%;
}
.form-style ul li .field-full {
  width: 100%;
}
.form-style ul li input.align-left {
  float: left;
}
.form-style ul li input.align-right {
  float: right;
}
.form-style ul li textarea {
  width: 100%;
  height: auto;
}
.form-style ul li input[type='button'],
.form-style ul li input[type='submit'] {
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
}
/* (CONTACT) FORM END */

 assets/scss/partials/vendors/mediumzoom.scss

@@ -1,35 +1,37 @@
.medium-zoom-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: opacity 300ms;
    will-change: opacity;
    background: $accent;
  @include themed() {
    background: t('accent');
  }
  
  .medium-zoom--opened .medium-zoom-overlay {
    cursor: pointer;
    cursor: zoom-out;
    opacity: 1;
  }
  
  .medium-zoom-image {
    cursor: pointer;
    cursor: zoom-in;
    transition: transform 300ms cubic-bezier(0.2, 0, 0.2, 1) !important;
    z-index: 100;
  }
  
  .medium-zoom-image--hidden {
    visibility: hidden;
  }
  
  .medium-zoom-image--opened {
    position: relative;
    cursor: pointer;
    cursor: zoom-out;
    will-change: transform;
  }
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: opacity 300ms;
  will-change: opacity;
}

.medium-zoom--opened .medium-zoom-overlay {
  cursor: pointer;
  cursor: zoom-out;
  opacity: 1;
}

.medium-zoom-image {
  cursor: pointer;
  cursor: zoom-in;
  transition: transform 300ms cubic-bezier(0.2, 0, 0.2, 1) !important;
  z-index: 100;
}

.medium-zoom-image--hidden {
  visibility: hidden;
}

.medium-zoom-image--opened {
  position: relative;
  cursor: pointer;
  cursor: zoom-out;
  will-change: transform;
}

 assets/scss/partials/vendors/tableofcontents.scss

@@ -1,23 +1,23 @@
#TableOfContents {
    display: block;
    background: transparent;
  }
  
  display: block;
  background: transparent;
}

#TableOfContents ul {
list-style: none;
line-height: 1.9em;
margin: 0;
  list-style: none;
  line-height: 1.9em;
  margin: 0;
}

#TableOfContents > ul {
padding-left: 0;
  padding-left: 0;
}

#TableOfContents li a {
display: inherit;
color: var(--link-color);
  display: inherit;
  color: var(--link-color);
}

#TableOfContents li a:hover {
display: inherit;
}
  display: inherit;
}

 layouts/_default/baseof.html

@@ -6,7 +6,7 @@
  class="html"
>
  {{- partial "head.html" . -}}
  <body class="body">
  <body class="body theme--light">
    <header class="header">{{ partial "navbar.html" . }}</header>
    <div class="wrapper">
      <aside class="wrapper__sidebar">