diff --git a/v4/README.md b/v4/README.md index c0e79f411..9e50f5989 100644 --- a/v4/README.md +++ b/v4/README.md @@ -304,6 +304,13 @@ this will only work when the `permanentTopNav` is also set to `true`. Please note that the top navigation bar is minimized by default on mobile devices. +### Light/Dark Theme Mode +Switching between light and dark theme mode can be enabled by setting the `enableLightDarkMode` parameter to `true`: +```toml +[params] + enableLightDarkTheme = true +``` + ### Algolia Search Bilberry theme includes built-in content search via [Algolia SAAS](https://www.algolia.com/). @@ -742,6 +749,7 @@ Then, in the `config.toml` file, set the `giscus` parameter to `true` and the pr giscusCategory = "General" giscusCategoryId = "DIC_kwDOGX153M4B_2Vz" # generated by Giscus website giscusTheme = "light" + giscusDarkTheme = "dark" giscusReactions = "1" giscusEmitMetadata = "0" giscusLanguage = "en" diff --git a/v4/assets/js/check-theme-prefer.js b/v4/assets/js/check-theme-prefer.js new file mode 100644 index 000000000..b54907c45 --- /dev/null +++ b/v4/assets/js/check-theme-prefer.js @@ -0,0 +1,10 @@ + const darkStore = localStorage.getItem("dark-store"); + const docEle = document.documentElement; + const prefersDark = window.matchMedia("(prefers-color-scheme: dark)"); + if (darkStore === "true") { + docEle.classList.add("dark-mode"); + } else if (darkStore === "false") { + docEle.classList.remove("dark-mode"); + } else if (prefersDark.matches) { + docEle.classList.add("dark-mode"); + } diff --git a/v4/assets/js/theme.js b/v4/assets/js/theme.js index cbb1975c1..e35949d30 100644 --- a/v4/assets/js/theme.js +++ b/v4/assets/js/theme.js @@ -95,4 +95,27 @@ $(document).ready(function () { $('html, body').animate({scrollTop:0}, '300'); }); +// Light dark theme mode switcher + const lightDarkToggle = document.getElementById("light-dark-toggle"); + const docEle = document.documentElement; + if (lightDarkToggle) { + updateToggle(); + switchTheme(); + }; + + function switchTheme() { + lightDarkToggle.addEventListener("click", () => { + docEle.classList.toggle("dark-mode"); + localStorage.setItem("dark-store", docEle.classList.contains("dark-mode")); + updateToggle(); + }); + } + + function updateToggle() { + if (docEle.classList.contains("dark-mode")) { + lightDarkToggle.className = "fa fa-moon"; + } else { + lightDarkToggle.className = "fa fa-sun"; + } + } }); diff --git a/v4/assets/sass/_articles.scss b/v4/assets/sass/_articles.scss index 7ea44bc3b..1e0dcdef3 100644 --- a/v4/assets/sass/_articles.scss +++ b/v4/assets/sass/_articles.scss @@ -11,7 +11,7 @@ article { content: ""; display: block; border: 11px solid transparent; - border-right-color: #ddd; + border-right-color: $connection-dot-color; position: absolute; top: 49px; left: -22px; @@ -21,7 +21,7 @@ article { content: ""; display: block; border: 10px solid transparent; - border-right-color: #fff; + border-right-color: $connection-line-color; position: absolute; top: 50px; left: -20px; @@ -151,7 +151,7 @@ article { margin-top: 1.25em; li { - border-bottom: 1px solid #eee; + border-bottom: 1px solid $footer-border-color; padding-right: 10px; } @@ -170,19 +170,23 @@ article { &:hover { left: 10px; - color: $base-color; + color: $text-color; text-decoration: none; } } } } + code { + background-color: rgba(150,150,160,0.2); + border: none; + } blockquote { - background-color: #f6f6f6; + background-color: $blockquote-background-color; font-family: $headline-font; margin: 1.5em 0; padding: 2em; - border-left: 0.5em solid #ededed; + border-left: 0.5em solid rgba(invert($blockquote-background-color),0.2); font-size: 1.05em; cite { @@ -226,7 +230,7 @@ article { li { display: inherit; - color: $text-color; + color: $highlight-color; a { color: inherit; @@ -234,7 +238,7 @@ article { padding: 0; &:hover { - color: $highlight-color; + color: $text-color; background-color: transparent; } } @@ -341,7 +345,7 @@ article { padding: 5.5%; margin: 0; text-align: center; - color: #fff; + color: $header-text-color; background: none; font-size: 1.2em; position: relative; @@ -442,7 +446,7 @@ article { @include featuredImage(); a { - color: #fff; + color: $header-text-color; text-decoration: none; display: flex; flex-direction: column; @@ -478,4 +482,5 @@ article { #comments-container { margin-left: 100px; padding-bottom: 1.2em; + color: #fff; } diff --git a/v4/assets/sass/_bilberry-hugo-theme.scss b/v4/assets/sass/_bilberry-hugo-theme.scss index 41851fed1..968c7dbc8 100644 --- a/v4/assets/sass/_bilberry-hugo-theme.scss +++ b/v4/assets/sass/_bilberry-hugo-theme.scss @@ -135,6 +135,15 @@ list-style: none; } } + .flex-control-paging li a { + background: rgba($text-color,0.5); + } + .flex-control-paging li a:hover { + background: rgba($text-color,0.7); + } + .flex-control-paging li a.flex-active { + background: rgba($text-color,0.9); + } .fa-youtube-adblock-proof:before { content: "\F167"; diff --git a/v4/assets/sass/_footer.scss b/v4/assets/sass/_footer.scss index e1260788d..7ff39e2cf 100644 --- a/v4/assets/sass/_footer.scss +++ b/v4/assets/sass/_footer.scss @@ -24,6 +24,15 @@ footer { text-transform: uppercase; color: $footer-headline-color; padding-bottom: 0.75em; + display: block; + } + + a { + strong{ + &:hover { + color: $highlight-color; + } + } } ul { @@ -31,7 +40,7 @@ footer { margin-top: 1.25em; li { - border-bottom: 1px solid #eee; + border-bottom: 1px solid $footer-border-color; padding-right: 10px; } @@ -45,7 +54,7 @@ footer { &:hover { left: 10px; - color: $base-color; + color: $text-color; } } } @@ -113,10 +122,6 @@ footer { width: 100%; margin-left: 0; } - - strong { - display: block; - } } } } diff --git a/v4/assets/sass/_header.scss b/v4/assets/sass/_header.scss index 8287db69b..ee7a1476f 100644 --- a/v4/assets/sass/_header.scss +++ b/v4/assets/sass/_header.scss @@ -75,6 +75,8 @@ header { .titles { margin-left: 3rem; + margin-top: 3em; + margin-bottom: 3em; h3 { margin-bottom: 0; @@ -82,20 +84,41 @@ header { } } - .languages { - position: absolute; - right: 0; - bottom: 0; - background-color: $special-color; - padding: 0.5em 1em; - display: flex; - border-top-right-radius: 4px; - border-top-left-radius: 4px; - - a { + .selectors { + position: absolute; + right: 0; + bottom: 0; + display: flex; + .light-dark-mode { + background-color: $special-color; + margin-right: 1em; + display: flex; + border-top-right-radius: 4px; + border-top-left-radius: 4px; + button { + margin-top: 0; + margin-bottom: 0; + padding: 0.375em 0.75em; + font-size: 1.125em; + min-width: 2em; + border: transparent; + color: $header-text-color; + &:hover { + color: $highlight-color; + } + } + } + .languages { + background-color: $special-color; + padding: 0.5em 1em; + display: flex; + border-top-right-radius: 4px; + border-top-left-radius: 4px; + + a { text-transform: uppercase; font-size: 0.8em; - color: $page-background-color; + color: $header-text-color; letter-spacing: 0.1em; &.active { @@ -106,8 +129,12 @@ header { content: " | "; color: inherit; } + &:hover { + color: $highlight-color; + } + } } - } + } .toggler { position: absolute; @@ -123,5 +150,8 @@ header { &.permanentTopNav { display: none; } + &:hover { + color: $highlight-color; + } } } diff --git a/v4/assets/sass/_main.scss b/v4/assets/sass/_main.scss index ee7affc01..812b031c9 100644 --- a/v4/assets/sass/_main.scss +++ b/v4/assets/sass/_main.scss @@ -10,7 +10,7 @@ bottom: 50px; width: 2px; height: 100%; - background: rgba(0, 0, 0, 0.05); + background: $connection-line-color; z-index: 1; } @@ -22,7 +22,7 @@ bottom: 32px; height: 20px; width: 20px; - background: #ddd; + background: $connection-dot-color; border-radius: 999px; z-index: 10; } diff --git a/v4/assets/sass/_pagination.scss b/v4/assets/sass/_pagination.scss index 94724b4d6..f52072014 100644 --- a/v4/assets/sass/_pagination.scss +++ b/v4/assets/sass/_pagination.scss @@ -13,8 +13,8 @@ padding: 0.8em 1.4em; text-decoration: none; font-weight: bold; - background-color: #b4b4b4; - color: #fff; + background-color: $article-background-color; + color: $text-color; &:hover { background-color: $highlight-color; diff --git a/v4/assets/sass/_topnav.scss b/v4/assets/sass/_topnav.scss index 81f9f1988..c223ce1ef 100644 --- a/v4/assets/sass/_topnav.scss +++ b/v4/assets/sass/_topnav.scss @@ -119,12 +119,17 @@ nav { font-size: 0.75em; text-align: right; padding: 0.5em 1em; - background-color: $page-background-color; + border-radius: 0.5em; + background-color: rgba($page-background-color,0.6); img { width: 3.5em; position: relative; - top: 0.1em; + // top: 0.1em; + display: inline-block; + vertical-align: middle; + padding: 0.5em; + background: rgba(#fff,0.5); } } } @@ -138,7 +143,7 @@ nav { &:hover, &:focus { - background-color: darken($algolia-search-box-background-color, 2); + background-color: darken($algolia-search-box-background-color, 5); } .title { @@ -197,8 +202,8 @@ nav { } .aa-dropdown-menu { - background-color: #fff; - border: 1px solid rgba($algolia-border-color, 0.6); + background-color: $algolia-search-box-background-color; + border: 1px solid rgba($algolia-border-color, 0.2); min-width: 300px; margin-top: 10px; box-sizing: border-box; @@ -210,12 +215,12 @@ nav { } .aa-suggestion + .aa-suggestion { - border-top: 1px solid rgba($algolia-border-color, 0.6); + border-top: 1px solid rgba($algolia-border-color, 0.2); } .aa-suggestions-category { - border-bottom: 1px solid rgba($algolia-border-color, 0.6); - border-top: 1px solid rgba($algolia-border-color, 0.6); + border-bottom: 1px solid rgba($algolia-border-color, 0.2); + border-top: 1px solid rgba($algolia-border-color, 0.2); padding: 6px 12px; } } diff --git a/v4/assets/sass/theme.scss b/v4/assets/sass/theme.scss index 1bda62d6f..2343a9139 100644 --- a/v4/assets/sass/theme.scss +++ b/v4/assets/sass/theme.scss @@ -14,6 +14,7 @@ $base-color: {{ .Param "baseColor" | default "#1d1f38" }}; $special-color: {{ .Param "specialColor" | default "#2D3642" }}; $highlight-color: {{ .Param "highlightColor" | default "#5c8b59" }}; $text-color: {{ .Param "textColor" | default "#222" }}; +$blockquote-background-color: {{ .Param "blockquoteBackgroundColor" | default "#f6f6f6" }}; $nav-background-color: {{ .Param "navBackgroundColor" | default "$special-color" }}; $nav-text-color: {{ .Param "navTextColor" | default "$page-background-color" }}; @@ -27,6 +28,8 @@ $logo-color: {{ .Param "logoColor" | default "darken($page-background-color, 1)" $bubble-color: {{ .Param "bubbleColor" | default "#fff" }}; $bubble-background-color: {{ .Param "bubbleBackgroundColor" | default "#ccc" }}; $bubble-hover-color: {{ .Param "bubbleHoverColor" | default "$highlight-color" }}; +$connection-line-color: {{ .Param "connectionLineColor" | default "rgba(#000,0.05)" }}; +$connection-dot-color: {{ .Param "connectionDotColor" | default "#ddd" }}; $article-background-color: {{ .Param "articleBackgroundColor" | default "#fff" }}; $meta-text-color: {{ .Param "metaTextColor" | default "#999" }}; @@ -35,7 +38,7 @@ $continue-reading-hover-color: {{ .Param "continueReadingHoverColor" | default " $footer-border-color: {{ .Param "footerBorderColor" | default "#eee" }}; $footer-background-color: {{ .Param "footerBackgroundColor" | default "rgba(#ffffff, 80)" }}; -$footer-headline-color: {{ .Param "" | default "#444" }}; +$footer-headline-color: {{ .Param "footerHeadlineColor" | default "#444" }}; @mixin featuredImage() { .featured-image { @@ -60,3 +63,71 @@ $footer-headline-color: {{ .Param "" | default "#444" }}; // Base theme styling @import 'bilberry-hugo-theme'; + +// The variables below are processed in './layouts/partials/css.html' +// when it's executed as template by Hugo pipes. + +// Width of the main content area where the the actual content's width is $site-width - 100px +.dark-mode { +$site-width: {{ .Param "siteWidth" | default "800px" }}; + +$headline-font: {{ .Param "headlineFont" | default "'Comfortaa',sans-serif" }}; +$content-font: {{ .Param "contentFont" | default "'Open Sans',sans-serif" }}; +$article-footer-font: {{ .Param "articleFooterFont" | default "'Fira Code',monospace" }}; +$code-block-font: {{ .Param "codeBlockFont" | default "'Fira Code',monospace" }}; + +$page-background-color: {{ .Param "pageBackgroundColor" | default "#333" }}; +$base-color: {{ .Param "baseColor" | default "#1d1f38" }}; +$special-color: {{ .Param "specialColor" | default "#2D3642" }}; +$highlight-color: {{ .Param "highlightColor" | default "saturate(#5c8b59,20)" }}; +$text-color: {{ .Param "textColor" | default "darken(invert(#222), 20)" }}; +$blockquote-background-color: {{ .Param "blockquoteBackgroundColor" | default "rgba(99,110,110,0.2)" }}; + +$nav-background-color: {{ .Param "navBackgroundColor" | default "$special-color" }}; +$nav-text-color: {{ .Param "navTextColor" | default "darken(#f1f1f1,20)" }}; +$algolia-search-box-color: {{ .Param "algoliaSearchBoxColor" | default "$nav-text-color" }}; +$algolia-search-box-icon-color: {{ .Param "algoliaSearchBoxIconColor" | default "#888" }}; +$algolia-search-box-background-color: {{ .Param "algoliaSearchBoxBackgroundColor" | default "#222" }}; +$algolia-border-color: {{ .Param "algoliaBorderColor" | default "#e4e4e4" }}; + +$header-text-color: {{ .Param "headerTextColor" | default "$nav-text-color" }}; +$logo-color: {{ .Param "logoColor" | default "darken(#f1f1f1, 60)" }}; +$bubble-color: {{ .Param "bubbleColor" | default "$logo-color" }}; +$bubble-background-color: {{ .Param "bubbleBackgroundColor" | default "#373737" }}; +$bubble-hover-color: {{ .Param "bubbleHoverColor" | default "$highlight-color" }}; +$connection-line-color: {{ .Param "connectionLineColor" | default "#444" }}; +$connection-dot-color: {{ .Param "connectionDotColor" | default "#444" }}; + +$article-background-color: {{ .Param "articleBackgroundColor" | default "#222" }}; +$meta-text-color: {{ .Param "metaTextColor" | default "darken(#f1f1f1,40)" }}; +$meta-border-color: {{ .Param "metaBorderColor" | default "#545454" }}; +$continue-reading-hover-color: {{ .Param "continueReadingHoverColor" | default "$meta-text-color" }}; + +$footer-border-color: {{ .Param "footerBorderColor" | default "#444" }}; +$footer-background-color: {{ .Param "footerBackgroundColor" | default "#222" }}; +$footer-headline-color: {{ .Param "footerHeadlineColor" | default "darken(invert(#444),5)" }}; + +@mixin featuredImage() { + .featured-image { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 5; + opacity: 0.25; + } +} + +// Dependencies +@import '../../assets/sass/_vendor/normalize.scss'; +@import '../../assets/sass/_vendor/skeleton.scss'; +@import '../../assets/sass/_vendor/flexslider.scss'; +@import '../../assets/sass/_vendor/dimbox.scss'; +@import '../../assets/sass/_vendor/tooltipster.scss'; +@import '../../assets/sass/_vendor/tooltipster-sideTip-light.scss'; +@import 'fontface'; + +// Base theme styling +@import 'bilberry-hugo-theme'; +} diff --git a/v4/i18n/ja.toml b/v4/i18n/ja.toml index 3e10c1443..12623674c 100644 --- a/v4/i18n/ja.toml +++ b/v4/i18n/ja.toml @@ -17,10 +17,10 @@ other = "最近の投稿" other = "検索 ..." [noSearchResults] -other = "検索結果がありません." +other = "検索結果がありません。" [olderPosts] -other = "過去の投稿" +other = "古いの投稿" [newerPosts] other = "新しい投稿" @@ -29,8 +29,16 @@ other = "新しい投稿" other = "続きを読む" [otherLanguages] -other = "他言語" +other = "他の言語" [readingTime] -other = "読了時間約１分" +other = "約{{.Count}}分で読めます" +[tableOfContents] +other = "目次" + +[series] +other = "シリーズ" + +[archive] +other = "アーカイブ" diff --git a/v4/layouts/_default/baseof.html b/v4/layouts/_default/baseof.html index 10526a022..234547ba4 100644 --- a/v4/layouts/_default/baseof.html +++ b/v4/layouts/_default/baseof.html @@ -85,6 +85,10 @@ {{ end }} + {{ if .Site.Params.enableLightDarkTheme | default false }} + {{ partial "check-theme-prefer.html" . }} + {{ end }} + {{ partial "css.html" . }} {{ partial "twitter-card.html" . }} diff --git a/v4/layouts/partials/check-theme-prefer.html b/v4/layouts/partials/check-theme-prefer.html new file mode 100644 index 000000000..ab774319c --- /dev/null +++ b/v4/layouts/partials/check-theme-prefer.html @@ -0,0 +1,7 @@ +{{ $checkThemePrefer := resources.Get "js/check-theme-prefer.js" }} +{{ if or (.Site.IsServer) (eq hugo.Environment "development") }} + +{{ else }} + {{ $checkThemePrefer := $checkThemePrefer | resources.Minify | resources.Fingerprint }} + +{{ end }} diff --git a/v4/layouts/partials/css.html b/v4/layouts/partials/css.html index 3a3092272..585ad1cef 100644 --- a/v4/layouts/partials/css.html +++ b/v4/layouts/partials/css.html @@ -2,14 +2,14 @@ {{ $css := resources.Get "sass/theme.scss" | resources.ExecuteAsTemplate "theme.scss" . | toCSS $options }} {{ if or (.Site.IsServer) (eq hugo.Environment "development") }} - + {{ else }} {{ $css := $css | resources.Minify | resources.Fingerprint }} - + {{ end }} {{ if isset .Site.Params "css_modules" }} {{ range .Site.Params.css_modules }} - + {{ end }} {{ end }} diff --git a/v4/layouts/partials/giscus.html b/v4/layouts/partials/giscus.html index ace1e983a..0ab6bc004 100644 --- a/v4/layouts/partials/giscus.html +++ b/v4/layouts/partials/giscus.html @@ -16,5 +16,47 @@ crossorigin="{{ .Site.Params.giscusCrossOrigin }}" async> +{{ if .Site.Params.enableLightDarkTheme | default false }} + +{{ end }}
{{ end }} diff --git a/v4/layouts/partials/header.html b/v4/layouts/partials/header.html index c156064dd..575f33b5a 100644 --- a/v4/layouts/partials/header.html +++ b/v4/layouts/partials/header.html @@ -36,8 +36,13 @@

{{ . }} {{ end }} - - {{ if and (gt .Site.Languages 1) (.Site.Params.showHeaderLanguageChooser | default true) }} +
+ {{ if .Site.Params.enableLightDarkTheme | default false }} +
+ +
+ {{ end }} + {{ if and (gt .Site.Languages 1) (.Site.Params.showHeaderLanguageChooser | default true) }} {{- $language := .Language -}} {{- $pages := .Page.AllTranslations -}}
@@ -55,6 +60,7 @@

{{ end }}

{{ end }} +
{{ if .Site.Params.permanentTopNav }}
diff --git a/v4/tests/exampleSite/config.toml b/v4/tests/exampleSite/config.toml index a149c231b..9468f46ef 100644 --- a/v4/tests/exampleSite/config.toml +++ b/v4/tests/exampleSite/config.toml @@ -26,6 +26,8 @@ disqusShortname = "bilberry-hugo-theme" css_modules = [] js_modules = [] + enableLightDarkTheme = true + # Description and meta data for the search engines author = "Lednerb" description = "Bilberry Premium Theme for Hugo."