change to hugo-blog-awesome theme

themes/hugo-blog-awesome/assets/sass/_dark.scss

@@ -0,0 +1,286 @@
+@mixin dark-mode {
+  body {
+    color: $dark-text-base-color;
+    background-color: $dark-black;
+  }
+
+  // Headings
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: $dark-white;
+  }
+
+  // Table
+  table {
+    thead {
+      color: $dark-white;
+      border-color: $dark-light;
+    }
+
+    th,
+    td,
+    tr {
+      border-color: $dark-light;
+    }
+  }
+
+  // Post
+  .page-content {
+    a {
+      color: $dark-text-link-blue;
+
+      &:hover,
+      &:active,
+      &:focus {
+        color: $dark-text-link-blue-active;
+      }
+    }
+
+    h3 {
+      border-color: $dark-light;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      .anchor-head {
+        color: $dark-text-link-blue;
+      }
+    }
+  }
+
+  // ToC
+  .toc {
+    background-color: $dark-toc-bg;
+  }
+
+  // Go to top
+  #totop {
+    color: $dark-text-base-color;
+    background-color: $dark-go-top-bg;
+
+    &:hover {
+      background-color: $dark-go-top-bg-hover;
+    }
+  }
+
+  // Inline code
+  li>code,
+  p>code {
+    font-size: 0.9em;
+    padding: 1px 3px;
+    position: relative;
+    top: -1px;
+    color: $dark-inline-code-text;
+    background-color: $dark-inline-code-bg;
+    border-radius: 2px;
+    border: 1px solid rgba(128, 128, 128, 0.1);
+  }
+
+  // kbd tag
+  kbd {
+    color: $dark-inline-code-text;
+    background-color: $dark-inline-code-bg;
+  }
+
+  // horizontal rule
+  hr {
+    border-color: $dark-light;
+  }
+
+  // Post Meta
+  .post-meta {
+    color: $dark-gray;
+
+    time {
+      &::after {
+        background-color: $dark-light;
+      }
+    }
+
+    span[itemprop="author"] {
+      border-color: $dark-light;
+    }
+  }
+
+  // Link
+  a {
+    color: inherit;
+    text-decoration-color: $dark-smoke;
+
+    &:hover {
+      color: $dark-text-link-blue;
+    }
+
+    &:focus {
+      outline-color: rgba(44, 118, 246, 0.6);
+    }
+  }
+
+  // List
+  li {
+    &:before {
+      color: $dark-white;
+    }
+  }
+
+  // Blockquote
+  blockquote {
+    color: $dark-blockquote-text;
+    border-color: $dark-bloquote-border;
+  }
+
+  // Strong, Bold
+  strong,
+  b {
+    color: $dark-white;
+  }
+
+  // Navbar
+  .navbar {
+    border-color: $dark-light;
+
+    .menu {
+      a#mode {
+        .mode-sunny {
+          display: block;
+        }
+
+        .mode-moon {
+          display: none;
+        }
+      }
+
+      .menu-link {
+        color: $dark-white;
+      }
+
+      @include media-query($on-mobile) {
+        background-color: $dark-black;
+        border-color: $dark-light;
+
+        input[type="checkbox"]:checked~.trigger {
+          background: $dark-black;
+        }
+      }
+    }
+  }
+
+  // Post Item
+  .post-item {
+    &:not(:first-child) {
+      border-color: $dark-light;
+    }
+
+    .post-item-date {
+      color: $dark-white;
+    }
+
+    .post-item-title {
+      a {
+        color: $dark-text-base-color;
+
+        &:hover,
+        &focus {
+          color: $dark-white;
+        }
+      }
+    }
+  }
+
+  // Post Navigation
+  .post-nav {
+    border-color: $dark-light;
+
+    .post-nav-item {
+      font-weight: $bold-weight;
+
+      .post-title {
+        color: $dark-white;
+        opacity: 0.9;
+      }
+
+      &:hover,
+      &:focus {
+        .post-title {
+          color: $dark-text-link-blue-active;
+        }
+      }
+
+      .nav-arrow {
+        color: $dark-gray;
+      }
+    }
+
+    @include media-query($on-mobile) {
+      .post-nav-item:nth-child(even) {
+        border-color: $dark-light;
+      }
+    }
+  }
+
+  // Footer
+  .footer {
+    span.footer_item {
+      color: $dark-white;
+    }
+
+    a.footer_item:not(:last-child) {
+      color: $dark-white;
+    }
+
+    .footer_copyright {
+      color: $dark-gray;
+      opacity: 1;
+    }
+  }
+
+  // 404 Page
+  .not-found {
+    .title {
+      color: $dark-white;
+      text-shadow: 1px 0px 0px $dark-text-link-blue;
+    }
+
+    .phrase {
+      color: $dark-text-base-color;
+    }
+
+    .solution {
+      color: $dark-text-link-blue;
+    }
+
+    .solution:hover {
+      color: $dark-text-link-blue-active;
+    }
+  }
+
+  .search-article {
+    input[type="search"] {
+      color: $dark-text-base-color;
+
+      &::-webkit-input-placeholder {
+        color: rgba(128, 128, 128, 0.8);
+      }
+    }
+  }
+}
+
+// support JS disabled environment with media query
+@media (prefers-color-scheme: dark) {
+  // use "light" class to avoid style conflicts in js enabled environment
+  html:not(.light) {
+    @include dark-mode()
+  }
+}
+
+html.dark {
+  @include dark-mode()
+}