Color Scheme

I personally like it when my system adjust the color scheme based on what lighting conditions I’m working in because these computer screens have really taken a toll on my eyesight. I set this theme up to support @media (prefers-color-scheme: dark) by including a Sass @mixin in custom.scss and admin.scss. The Dark Mode toggle for the back end is created as an adminbar item appearing next to the user navigation item.

/css/custom.scss

@mixin dark-mode {
  body {
    background: $main-800;
    color:$main-200;
  }
  #top {
    background: $main-800;
  }
  #masthead {
    background: $main-700;
  }
  #masthead a.site-title {
    color: $light;
  }
  #footer {
    background:$main-700;
  }
  .widget {
    color:$main-300;
  }
  #colophon {
    background: $main-800;
  }
}
html {
  &[data-theme="dark"] {
    @include dark-mode;
 }
}
@media (prefers-color-scheme: dark) {
  @include dark-mode;
}

/css/admin.scss

@mixin dark-mode {
  html {
    transition: none !important;
  }
  body {
    background:$main-800;
    color:$main-200;
  }
  #wpbody-content {
    background:$main-800;
  }
//..............
}
html {
  &[data-theme="dark"] {
    @include dark-mode;
 }
}
@media (prefers-color-scheme: dark) {
  @include dark-mode;
}