www.duckland.org/themes/diary/assets/scss/dark-mode.scss

@import "journal";

$light-accent: lighten($color-accent, 10%);
$deep-light-accent: lighten($color-accent, 30%);
$dark-mode-text: darken(#FFF, 10%);

$dark-mode-back-container-background: #212121;
$dark-mode-front-container-background: #282828;

body.night {
  background: $dark-mode-back-container-background;
  :root{
    --color_555: #ccc;
    --color_ededed: #000;
  }

  img {
    opacity: .8;
  }

  blockquote {
    * {
        color: $deep-light-accent !important;
    }
  }

  a {
    color: $light-accent;
    &:hover {
      color: $deep-light-accent !important;
    }
    @media screen and (max-width: $single-column-max-width) {
      &:hover {
        text-decoration: none !important;
      }
    }
  }

  code:not([data-lang]) {
    color: $deep-light-accent !important;
  }

  pre {
    code:not([data-lang]) {
      background: none !important;
      color: $dark-mode-text !important;
    }
  }

  table * {
    color: $dark-mode-text;
  }

  .side-container {
    $nav-item-hover-background-alpha: 0.02;
    $nav-item-hover-indicator-alpha: 0.6;
    $nav-item-hover-color-darken: 30%;
    $nav-item-active-background-alpha: 0.03;
    $nav-item-active-color-darken: 20%;
    * {
      color: $dark-mode-text;
    }
    .nav-head {
      //border-right: 4px solid $color-accent;
      &:hover {
        border-right: 2px solid
          rgba($color-accent, $nav-item-hover-indicator-alpha);
        background: rgba($color-accent, $nav-item-hover-background-alpha);
        color: lighten($color-accent, $nav-item-hover-color-darken);
      }
      &.active {
        border-right: 2px solid $color-accent;
        background: rgba($color-accent, $nav-item-active-background-alpha);
        color: lighten($color-accent, $nav-item-active-color-darken);
      }
    }

    .nav-link-list {
      $nav-item-hover-indicator-alpha: 0.6;
      $nav-item-hover-color-lighten: 30%;
      $nav-item-active-background-alpha: 0.1;
      $nav-item-active-color-lighten: 20%;
      flex-grow: 1;
      .nav-link-item {
        color: $dark-mode-text !important;
        //border-right: 4px solid transparent;
        &:hover {
          border-right: 2px solid
            rgba($color-accent, $nav-item-hover-indicator-alpha);
          color: lighten($color-accent, $nav-item-hover-color-lighten) !important;
        }
        &.active {
          border-right: 2px solid $color-accent;
          background: rgba($color-accent, $nav-item-active-background-alpha);
          color: lighten($color-accent, $nav-item-active-color-lighten) !important;
        }
      }
    }
  }
  .stream-container {
    .post-head-wrapper-text-only *{
      color: $dark-mode-text;
    }
    .post{
      background: $dark-mode-front-container-background;
      @media screen and (max-width: $single-column-max-width) {
        background: $dark-mode-back-container-background;
      }
      .post-pagination a:not([href]){
        color: $dark-mode-text;
      }
      .post-comment-wrapper * {
        color: $dark-mode-text;
      }
    }
    .post-list-container {
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
      background: $dark-mode-front-container-background;
      @media screen and (max-width: $single-column-max-width) {
        background: $dark-mode-back-container-background;
      }
      &,
    > * {
      .post-item-wrapper {
        * {
          color: $dark-mode-text;
        }
        .post-item-info-wrapper{
          @media screen and (max-width: $single-column-max-width) {
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
            background: $dark-mode-front-container-background;
          }
        }

        @media screen and (max-width: $single-column-max-width) {
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
          background: $dark-mode-front-container-background;
        }
        &:not(.post-item-wrapper-no-hover):hover {
          background: rgba(255,255,255, 0.03);
          * {
            color: $deep-light-accent !important;
          }
        }
        }
      }
    }
    
  }

  .single-column-nav-container {
    * { 
      color: $dark-mode-text;
    }
    @media screen and (max-width: $single-column-max-width) {
      .nav-dropdown-toggle {
        &:hover {
          color: #3f587d !important;
        }
      }
      .navbar-brand {
        color: $dark-mode-text;
        &:hover {
            color: $dark-mode-text;
        }
      }
      .nav-background {
        background: $dark-mode-front-container-background;
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
      }
    }
  }

  .single-column-header-container {
      @media screen and (max-width: $single-column-max-width) {
        * {
          font-family: $sans-preferred-font-list;
          color: $deep-light-accent;
        }
        .single-column-header-title {
          color: $dark-mode-text;
        }
        .single-column-header-subtitle {
          color: $dark-mode-text;
        }
      }
  }


  .single-column-drawer-container {
    @media screen and (max-width: $single-column-max-width) {
      .drawer-content {
        background: $dark-mode-front-container-background;
        .toc{
          background-color: lighten($dark-mode-front-container-background,10%);
        }
        .drawer-menu {
          .drawer-menu-item {
            color: $dark-mode-text;
            &.active {
              border-right: 2px solid $color-accent;
              color: $light-accent;
            }
          }
        }
      }
    }
  }

  #single-column-footer {
    color: $dark-mode-text;
  }

  .toc{
    background-color: $dark-mode-front-container-background;
    *{
      color: $dark-mode-text;
    }
    a {
      color: $dark-mode-text;
    }
    .toc-active{
      color: $light-accent !important;
    }
  }

  .post-body p,h1,h2,h3,h4,h5,h6,li {
    color: $dark-mode-text;
    *:not(a){
      color: $dark-mode-text;
    }
  }
  .pagination * {
    color: $dark-mode-text;
  }

  .vwrap * {
    color: $dark-mode-text !important;
  }

  .vcontent p {
    color: $dark-mode-text !important;
  }
  
  .gsc-control-searchbox-only table *{
    color: black !important;
  }

}