add two more themes

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

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

assets/css/theme.scss

@@ -1,9 +1,4 @@
-.light {
+:root {
-  --prime: #3170a7;
-  --grid: #e1e1e1;
-  --back: #fff;
-  --text: #222;
-
   // 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');
 }

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) {
+  if (!toggler) {
-        toggler = document.getElementById(id)
+    toggler = document.getElementById(id)
-    }
+  }
-    toggler.innerHTML = localStorage.theme === THEME_LIGHT ? icon_light : icon_dark
+  toggler.innerHTML = localStorage.theme === THEME_LIGHT ? icon_light : icon_dark
-    toggler.addEventListener('click', switch_theme);
+  toggler.addEventListener('click', switch_theme);
 }
 
 function switch_theme() {
-    const current = localStorage.getItem('theme')
+  const current = localStorage.getItem('theme')
-    const next = current === THEME_LIGHT ? THEME_DARK : THEME_LIGHT
+  const next = current === THEME_LIGHT ? THEME_DARK : THEME_LIGHT
 
-    switch_minima_theme(current, next)
+  switch_minima_theme(current, next)
 
-    switch (comment) {
+  switch (comment) {
-    case 'utterances': 
+    case 'utterances':
-        switch_utterances_theme(`github-${next}`)
+      switch_utterances_theme(`github-${next}`)
-        break
+      break
     case 'giscus':
-        switch_giscus_theme(next)
+      switch_giscus_theme(next)
-        break
+      break
     default:
-    }
+  }
 }
 
 /**
@@ -42,25 +43,31 @@ function switch_theme() {
  * @param {string} next 
  */
 function switch_minima_theme(current, next) {
-    const { classList } = document.documentElement
+  const { classList } = document.documentElement
-    const icon = next === THEME_LIGHT ? icon_light : icon_dark;
+  const icon = next === THEME_LIGHT ? icon_light : icon_dark;
 
-    classList.remove(current);
+  classList.remove(current);
-    classList.add(next);
+  classList.add(next);
-    localStorage.setItem('theme', next);
+  localStorage.setItem('theme', next);
-    toggler.innerHTML = icon;
+  toggler.innerHTML = icon;
 }
 
 /** @param {string} theme  */
 function switch_utterances_theme(theme) {
-    utterances =utterances || document.querySelector('iframe.utterances-frame')
+  if (theme !== 'dark') {
-    if (!utterances) return
+    theme = 'light'
-    utterances.contentWindow.postMessage({ type: 'set-theme', theme }, 'https://utteranc.es')
+  }
+  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 (theme !== 'dark') {
-    if (!giscus) return
+    theme = 'light_protanopia'
-    giscus.contentWindow.postMessage({giscus: {setConfig: {theme}}}, 'https://giscus.app')
+  }
+  giscus = giscus || document.querySelector('iframe.giscus-frame')
+  if (!giscus) return
+  giscus.contentWindow.postMessage({ giscus: { setConfig: { theme } } }, 'https://giscus.app')
 }

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.
+  # minima has one dark theme and multiple light themes. defaultTheme specifies
-  # currently available options: light, dark, system.
+  # a default light theme to use. currently available options: light, sand, rock, system.
-  defaultTheme: 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

layouts/partials/head.html

@@ -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')
+    const saved_theme = localStorage.getItem('theme')
-    if (local) {
+    if (saved_theme) {
-      default_theme = local
+      default_theme = saved_theme === default_light_theme ? saved_theme : default_light_theme;  
     }
     localStorage.setItem('theme', default_theme);
     window.minima_theme = default_theme;

layouts/partials/header.html

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