add two more themes

This commit is contained in:
mivinci 2023-04-10 21:37:53 +08:00
parent 144b197c31
commit d8d9a04b4f
8 changed files with 93 additions and 49 deletions

View file

@ -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);
}
}

View file

@ -1,5 +1,6 @@
.chroma {
margin: .5em 0;
background-image: var(--back-image);
background-color: var(--code-back);
border-radius: 2px;
}

View file

@ -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;
@ -39,3 +41,27 @@
--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');
}

View file

@ -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} */
@ -53,6 +54,9 @@ function switch_minima_theme(current, next) {
/** @param {string} theme */
function switch_utterances_theme(theme) {
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')
@ -60,6 +64,9 @@ function switch_utterances_theme(theme) {
/** @param {string} theme */
function switch_giscus_theme(theme) {
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')

View file

@ -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

View file

@ -16,7 +16,7 @@
{{ $favicon := "favicon.ico" }}
<link rel="shortcut icon" href="{{ $favicon | relURL }}" type="image/x-icon" />
{{ $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 }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
{{ $options = (dict "targetPath" "minima.js" "minify" true) }}
{{ $js := resources.Get "js/main.js" | js.Build $options | resources.ExecuteAsTemplate "minima.js" . }}
@ -29,12 +29,14 @@
</head>
<script>
// default to system color scheme.
let default_theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
const default_theme_config = '{{ .Site.Params.defaultTheme }}'
const default_light_theme = default_theme_config === 'system' ? 'light' : default_theme_config;
let default_theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : default_light_theme;
try {
const local = localStorage.getItem('theme')
if (local) {
default_theme = local
const saved_theme = localStorage.getItem('theme')
if (saved_theme) {
default_theme = saved_theme === default_light_theme ? saved_theme : default_light_theme;
}
localStorage.setItem('theme', default_theme);
window.minima_theme = default_theme;

View file

@ -7,7 +7,7 @@
{{ end }}
<div id="theme-switch" class="text-3xl cursor-pointer">{{ index .Site.Params.switch 1 }}</div>
</div>
<ul class="flex items-center font-medium
<ul class="flex items-center text-base font-bold
whitespace-nowrap overflow-x-auto overflow-y-hidden">
{{ range .Site.Menus.main }}
<li class="ml-2 mr-2"><a href="{{ .Identifier | relLangURL }}">{{ T .Identifier | default .Name }}</a></li>

BIN
static/texture.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB