diff options
| -rw-r--r-- | README.md | 2 | ||||
| -rw-r--r-- | assets/scss/dark-mode.scss | 9 | ||||
| -rw-r--r-- | assets/scss/journal.scss | 12 | ||||
| -rw-r--r-- | layouts/partials/extrabar.html | 2 | ||||
| -rw-r--r-- | layouts/partials/head.html | 12 | ||||
| -rw-r--r-- | layouts/partials/mobile-header.html | 2 | ||||
| -rw-r--r-- | static/js/journal.js | 2 |
7 files changed, 20 insertions, 21 deletions
@@ -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 index 44ddf8c..f46da00 100644 --- 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 index 8ab4e02..b4f98b8 100644 --- 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 index 2b14e6b..6081842 100644 --- 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 index b435785..b0481f9 100644 --- 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 index ff2af2d..8fad175 100644 --- 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 index 2d7a8c9..153fe2e 100644 --- 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 |