Complete dark mode.

greentin · Apr 11, 2020 · 75049e8 · 75049e8
1 parent 0f48914
commit 75049e8
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -81,6 +81,8 @@ See [/exampleSite/config.toml](https://github.com/AmazingRise/hugo-theme-diary/b
 
 [Disable Table of Contents](https://github.com/AmazingRise/hugo-theme-diary/wiki/Customization#disable-table-of-contents)
 
+[Disable Dark Mode](https://github.com/AmazingRise/hugo-theme-diary/wiki/Customization#disable-dark-mode)
+
 [Add or disable comment area](https://github.com/AmazingRise/hugo-theme-diary/wiki/Customization#add-comment-area)
 
 [Add Google Analytics and Site Verification](https://github.com/AmazingRise/hugo-theme-diary/wiki/Customization#add-google-analytics)

diff --git a/assets/scss/dark-mode.scss b/assets/scss/dark-mode.scss
@@ -4,8 +4,8 @@ $light-accent: lighten($color-accent, 10%);
 $deep-light-accent: lighten($color-accent, 30%);
 $dark-mode-text: darken(#FFF, 20%);
 
-$dark-mode-back-container-background: #151515;
-$dark-mode-front-container-background: #252525;
+$dark-mode-back-container-background: #232323;
+$dark-mode-front-container-background: #282828;
 
 body.night {
   background: $dark-mode-back-container-background;
@@ -25,7 +25,7 @@ body.night {
   }
 
   code {
-    color: $deep-light-accent;
+    color: $dark-mode-text;
   }
 
   a {
@@ -65,7 +65,7 @@ body.night {
     .nav-link-list {
       $nav-item-hover-indicator-alpha: 0.6;
       $nav-item-hover-color-lighten: 30%;
-      $nav-item-active-background-alpha: 0.03;
+      $nav-item-active-background-alpha: 0.1;
       $nav-item-active-color-lighten: 20%;
       flex-grow: 1;
       .nav-link-item {
@@ -78,6 +78,7 @@ body.night {
         }
         &.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;
         }
       }

diff --git a/assets/scss/journal.scss b/assets/scss/journal.scss
@@ -3,7 +3,7 @@ $color-accent: #1976d2;
 $back-container-background: #fcfcfc;
 $front-container-background: #ffffff;
 
-$default-font-list: "Lora", "Noto Serif SC", serif;
+$default-font-list: "Lora", "Noto Serif SC";
 $mono-font-list: "Fira Mono", "Cousine", Monaco, Menlo, "Source Code Pro",
   monospace;
 $sans-preferred-font-list: "Montserrat", "Roboto", "Source Sans Pro",
@@ -57,11 +57,6 @@ $h-diff: 3px;
 }
 
 body {
-  -webkit-transition: all 0.5s ease;
-  -moz-transition: all 0.5s ease;
-  -o-transition: all 0.5s ease;
-  transition: all 0.5s ease;
-
   background: $back-container-background;
   padding: 0;
   margin: 0;
@@ -602,11 +597,6 @@ a {
   }
 
   .post-list-container {
-    -webkit-transition: all 0.5s ease;
-    -moz-transition: all 0.5s ease;
-    -o-transition: all 0.5s ease;
-    transition: all 0.2s ease;
-
     width: 100%;
     min-height: 100vh;
     padding: 20px 0 20px 0;

diff --git a/layouts/partials/extrabar.html b/layouts/partials/extrabar.html
@@ -10,6 +10,7 @@
                 keyboard_arrow_up
             </i>
         </a>
+        {{ if not .Site.Params.disableDarkMode }}
         <a class="pagination-action" v-on:click="toggleDarkMode">
             <i class="material-icons pagination-action-icon" v-if="isDarkMode">
                 brightness_4
@@ -18,6 +19,7 @@
                 brightness_7
             </i>
         </a>
+        {{ end }}
         {{ if .Paginator }}
         {{ if gt .Paginator.TotalPages 1 }}
             <div class="pagination-indicator">

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
@@ -30,10 +30,16 @@
 {{ $styles := resources.Get "scss/journal.scss" | toCSS | minify | fingerprint }}
 <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">
 
+{{ if not .Site.Params.disableDarkmode }}
 {{ $darkmode := resources.Get "scss/dark-mode.scss" | toCSS | minify | fingerprint }}
 <link rel="stylesheet" href="{{ $darkmode.Permalink }}" integrity="{{ $darkmode.Data.Integrity }}" media="screen">
+{{ end }}
 
 <script src="{{.Site.BaseURL}}/js/loadCSS.js"></script>
+<script>
+  loadCSS("https://fonts.googleapis.com/css?family=Lora|Montserrat|Fira+Mono|Noto+Serif+SC|Material+Icons");
+</script>
+
 <script src="{{.Site.BaseURL}}/js/table.js"></script>
 
 {{ if and (not (.Params.disableToC) ) (.IsPage) }}
@@ -46,9 +52,6 @@
 </style>
 {{ end }}
 
-<script>
-    loadCSS("https://fonts.googleapis.com/css?family=Lora|Montserrat|Fira+Mono|Noto+Serif+SC|Material+Icons");
-</script>
 {{ if and (.Site.Params.enableGitalk) (.IsPage) }}
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
 <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
@@ -97,8 +100,7 @@
       appId: '{{ .Site.Params.Valine.appId }}',
       appKey: '{{ .Site.Params.Valine.appKey }}',
       visitor: true,
-      recordIP: true,
-      verify: true
+      recordIP: true
   }));
 </script>
 {{ end }}

diff --git a/layouts/partials/mobile-header.html b/layouts/partials/mobile-header.html
@@ -44,6 +44,7 @@
         <a ref="navTitle" class="navbar-brand" href="{{.Site.BaseURL}}">
             {{.Site.Title}}
         </a>
+        {{ if not .Site.Params.disableDarkMode }}
         <button type="button" class="nav-darkmode-toggle" v-on:click="toggleDarkMode">
             <i class="material-icons" v-if="isDarkMode">
                 brightness_4
@@ -52,6 +53,7 @@
                 brightness_7
             </i>
         </button>
+        {{ end }}
     </div>
 </nav>
 <div class="single-column-header-container" ref="pageHead"

diff --git a/static/js/journal.js b/static/js/journal.js
@@ -75,7 +75,7 @@ app = new Vue({
         var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1");
         if (night==""){
             if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                this.toggleDarkMode();
+                //this.toggleDarkMode();
             }
         }else{
             // If night is not empty