From d8d9a04b4f35be60c4ae3aec01ece94276632b31 Mon Sep 17 00:00:00 2001 From: mivinci Date: Mon, 10 Apr 2023 21:37:53 +0800 Subject: [PATCH] add two more themes --- assets/css/main.scss | 8 +++++ assets/css/syntax.scss | 1 + assets/css/theme.scss | 38 +++++++++++++++++---- assets/js/theme.js | 63 +++++++++++++++++++---------------- exampleSite/config.yaml | 18 +++++----- layouts/partials/head.html | 12 ++++--- layouts/partials/header.html | 2 +- static/texture.png | Bin 0 -> 6290 bytes 8 files changed, 93 insertions(+), 49 deletions(-) create mode 100644 static/texture.png diff --git a/assets/css/main.scss b/assets/css/main.scss index 32e71ec..46ce128 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -4,6 +4,7 @@ @import "./md.scss"; @import "./syntax.scss"; + :root { --max-w: 640px; --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, @@ -23,6 +24,8 @@ body { margin: 0 16px; font-family: var(--font); font-weight: 400; + line-height: 1.6; + background-image: var(--back-image); background-color: var(--back); color: var(--text); transition-property: background-color, border-color, color; @@ -53,3 +56,8 @@ main p a:hover { } } +@media (min-width: 640px) { + body { + margin-top: calc(1rem + 2vh); + } +} diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss index 97de9df..186e3c7 100644 --- a/assets/css/syntax.scss +++ b/assets/css/syntax.scss @@ -1,5 +1,6 @@ .chroma { margin: .5em 0; + background-image: var(--back-image); background-color: var(--code-back); border-radius: 2px; } diff --git a/assets/css/theme.scss b/assets/css/theme.scss index aaa09e5..40f4411 100644 --- a/assets/css/theme.scss +++ b/assets/css/theme.scss @@ -1,9 +1,4 @@ -.light { - --prime: #3170a7; - --grid: #e1e1e1; - --back: #fff; - --text: #222; - +:root { // code highlighting --code-back: #f6f8fa; --code-text: #24292f; @@ -19,6 +14,13 @@ --code-highlighted-line: #e9e9e9; } +.light { + --prime: #3170a7; + --grid: #e1e1e1; + --back: #fff; + --text: #333; +} + .dark { --prime: #3170a7; --back: #181818; @@ -38,4 +40,28 @@ --code-function: #dcdcaaca; --code-meta: #c586c0cb; --code-highlighted-line: #9494951b; +} + +.sand { + --prime: #3170a7; + --back: #e6dece; + --text: #434343; + + --code-back: #dbd3c1be; + --code-text: #24292f; + --code-highlighted-line: #cec3ac; + + --back-image: url('texture.png'); +} + +.rock { + --prime: #3170a7; + --back: #ccc; + --text: #434343; + + --code-back: #c1c1c1be; + --code-text: #24292f; + --code-highlighted-line: #afaeae; + + --back-image: url('texture.png'); } \ No newline at end of file diff --git a/assets/js/theme.js b/assets/js/theme.js index 163c55c..61d5af8 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -1,7 +1,8 @@ const comment = '{{ .Site.Params.comment.provider }}' +const default_theme_config = '{{ .Site.Params.defaultTheme }}' const icon_light = '{{ index .Site.Params.switch 1 }}' const icon_dark = '{{ index .Site.Params.switch 0 }}' -const THEME_LIGHT = 'light' +const THEME_LIGHT = default_theme_config === 'system' ? 'light' : default_theme_config const THEME_DARK = 'dark' /** @type {HTMLElement} */ @@ -13,28 +14,28 @@ let giscus /** @param {string} id */ export function setup_theme_switch(id) { - if (!toggler) { - toggler = document.getElementById(id) - } - toggler.innerHTML = localStorage.theme === THEME_LIGHT ? icon_light : icon_dark - toggler.addEventListener('click', switch_theme); + if (!toggler) { + toggler = document.getElementById(id) + } + toggler.innerHTML = localStorage.theme === THEME_LIGHT ? icon_light : icon_dark + toggler.addEventListener('click', switch_theme); } function switch_theme() { - const current = localStorage.getItem('theme') - const next = current === THEME_LIGHT ? THEME_DARK : THEME_LIGHT + const current = localStorage.getItem('theme') + const next = current === THEME_LIGHT ? THEME_DARK : THEME_LIGHT - switch_minima_theme(current, next) + switch_minima_theme(current, next) - switch (comment) { - case 'utterances': - switch_utterances_theme(`github-${next}`) - break + switch (comment) { + case 'utterances': + switch_utterances_theme(`github-${next}`) + break case 'giscus': - switch_giscus_theme(next) - break + switch_giscus_theme(next) + break default: - } + } } /** @@ -42,25 +43,31 @@ function switch_theme() { * @param {string} next */ function switch_minima_theme(current, next) { - const { classList } = document.documentElement - const icon = next === THEME_LIGHT ? icon_light : icon_dark; + const { classList } = document.documentElement + const icon = next === THEME_LIGHT ? icon_light : icon_dark; - classList.remove(current); - classList.add(next); - localStorage.setItem('theme', next); - toggler.innerHTML = icon; + classList.remove(current); + classList.add(next); + localStorage.setItem('theme', next); + toggler.innerHTML = icon; } /** @param {string} theme */ function switch_utterances_theme(theme) { - utterances =utterances || document.querySelector('iframe.utterances-frame') - if (!utterances) return - utterances.contentWindow.postMessage({ type: 'set-theme', theme }, 'https://utteranc.es') + if (theme !== 'dark') { + theme = 'light' + } + utterances = utterances || document.querySelector('iframe.utterances-frame') + if (!utterances) return + utterances.contentWindow.postMessage({ type: 'set-theme', theme }, 'https://utteranc.es') } /** @param {string} theme */ function switch_giscus_theme(theme) { - giscus = giscus || document.querySelector('iframe.giscus-frame') - if (!giscus) return - giscus.contentWindow.postMessage({giscus: {setConfig: {theme}}}, 'https://giscus.app') + if (theme !== 'dark') { + theme = 'light_protanopia' + } + giscus = giscus || document.querySelector('iframe.giscus-frame') + if (!giscus) return + giscus.contentWindow.postMessage({ giscus: { setConfig: { theme } } }, 'https://giscus.app') } diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index 4c32d4b..7581172 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -1,7 +1,7 @@ baseURL: https://mivinci.github.io/hugo-theme-minima languageCode: en-us title: Hugo on Minima -copyright: © 2022 X +copyright: © 2023 X googleAnalytics: # paginate specifies the maximum number of posts displayed on the home page. paginate: 12 @@ -12,10 +12,10 @@ defaultContentLanguage: en # language.x setup languages: en: - languageName: EN + languageName: EN # will be displayed in the navbar. weight: 1 zh-cn: - languageName: ZH + languageName: 简中 # will be displayed in the navbar. weight: 2 author: status: 目前住在地球 🌍 @@ -40,17 +40,17 @@ params: greet: Hello :) # subtitle speficies a subtitle displayed right after the site title. subtitle: - # switch specifies two emojis to be used as the button toggling color themes. + # switch specifies two emojis used as the button toggling color themes. switch: ["🌚", "🌝"] - # defaultTheme specifies a default theme to be used. - # currently available options: light, dark, system. - defaultTheme: system + # minima has one dark theme and multiple light themes. defaultTheme specifies + # a default light theme to use. currently available options: light, sand, rock, system. + defaultTheme: sand # displayDate speficies whether or not to display post date on the home page. displayDate: true # displayDescription specifies whether or not to display post description on # the hoem page. displayDescription: true - # selectable specifies if your post content can be selected. + # selectable specifies if or not your post content can be selected. selectable: true # social is an array containing as many as social accounts to be displayed # in the buttom of every page. @@ -116,7 +116,7 @@ taxonomies: series: series # markup.highlight has two keys set to make sure that the syntax highlighting -# in your posts are rendered correctly, so do not edit them. +# in your posts are rendered correctly, so DO NOT edit them. markup: highlight: lineNos: true diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 7b3aad6..8ef7c53 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -16,7 +16,7 @@ {{ $favicon := "favicon.ico" }} {{ $options := (dict "targetPath" "minima.css" "outputStyle" "compressed" "enableSourceMap" true) }} - {{ $style := resources.Get "css/main.scss" | resources.ToCSS $options }} + {{ $style := resources.Get "css/main.scss" | resources.ExecuteAsTemplate "main.scss" . | resources.ToCSS $options }} {{ $options = (dict "targetPath" "minima.js" "minify" true) }} {{ $js := resources.Get "js/main.js" | js.Build $options | resources.ExecuteAsTemplate "minima.js" . }} @@ -29,12 +29,14 @@