add theme param

7 files changed, 74 insertions, 54 deletions

diff --git a/README.md b/README.md
index 427a310..f1c42ca 100755
--- a/README.md
+++ b/README.md
@@ -49,20 +49,23 @@ Available options to `config.toml`:
 disqusShortname = 'YOUR_DISQUS_SHORTNAME'   # add disqus comments
 
 [params]
-    # show header social icons
-    twitter = 'YOUR_TWITTER_ID'     # twitter.com/YOUR_TWITTER_ID
-    github = 'YOUR_GITHUB_ID'       # github.com/YOUR_GITHUB_ID
-    instagram = 'YOUR_INSTAGRAM_ID' # instagram.com/YOUR_INSTAGRAM_ID
-    rss = true                      # show rss icon with link
-
-    # show home page profile
-    avatar = 'GRAVATAR_EMAIL'       # Gravatar email or image url(e.g. "https://deno.land/logo.svg")
-    name = 'YOUR_NAME'
-    bio = 'YOUR_BIO'
-
-    # misc
-    disableHLJS = true              # disable requesting highlight.js
-    monoDarkIcon = true             # show monochrome dark mode icon
+  # color theme
+  theme = 'linen'                 # linen, gray, light
+
+  # header social icons
+  twitter = 'YOUR_TWITTER_ID'     # twitter.com/YOUR_TWITTER_ID
+  github = 'YOUR_GITHUB_ID'       # github.com/YOUR_GITHUB_ID
+  instagram = 'YOUR_INSTAGRAM_ID' # instagram.com/YOUR_INSTAGRAM_ID
+  rss = true                      # show rss icon with link
+
+  # home page profile
+  avatar = 'GRAVATAR_EMAIL'       # Gravatar email or image url(e.g. "https://deno.land/logo.svg")
+  name = 'YOUR_NAME'
+  bio = 'YOUR_BIO'
+
+  # misc
+  disableHLJS = true              # disable requesting highlight.js
+  monoDarkIcon = true             # show monochrome dark mode icon
 ```
 
 ## License
diff --git a/assets/app.css b/assets/app.css
index c549c02..6a99dfa 100644
--- a/assets/app.css
+++ b/assets/app.css
@@ -3,7 +3,7 @@
  * A simple, clean, flexible Hugo theme
  * https://github.com/nanxiaobei/hugo-paper
  * Designed by 南小北 (https://lee.so/)
- * Updated in 2022.7.20
+ * Updated in 2022.8.16
  */
 
 @tailwind base;
@@ -16,9 +16,13 @@
     @apply h-full;
   }
 
+  html {
+    --bg: transparent;
+  }
+
   body {
     -webkit-tap-highlight-color: transparent;
-    background: #fbfbfb;
+    background: var(--bg);
 
     @apply dark:bg-black;
   }
@@ -45,7 +49,7 @@
   }
 
   .nav-wrapper {
-    background: #fbfbfb;
+    background: var(--bg);
   }
 
   .open {
diff --git a/assets/main.css b/assets/main.css
index 22dec80..a762469 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -3,11 +3,11 @@
  * A simple, clean, flexible Hugo theme
  * https://github.com/nanxiaobei/hugo-paper
  * Designed by 南小北 (https://lee.so/)
- * Updated in 2022.7.20
+ * Updated in 2022.8.16
  */
 
 /*
- ! tailwindcss v3.1.6 | MIT License | https://tailwindcss.com
+ ! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com
  */
 
 /*
@@ -363,13 +363,6 @@ input::-moz-placeholder, textarea::-moz-placeholder {
   /* 2 */
 }
 
-input:-ms-input-placeholder, textarea:-ms-input-placeholder {
-  opacity: 1;
-  /* 1 */
-  color: #9ca3af;
-  /* 2 */
-}
-
 input::placeholder,
 textarea::placeholder {
   opacity: 1;
@@ -430,9 +423,13 @@ html,
   height: 100%;
 }
 
+html {
+  --bg: transparent;
+}
+
 body {
   -webkit-tap-highlight-color: transparent;
-  background: #fbfbfb;
+  background: var(--bg);
 }
 
 .dark body {
@@ -1503,7 +1500,6 @@ body {
 .select-none {
   -webkit-user-select: none;
      -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
 }
 
@@ -1565,8 +1561,8 @@ body {
   border-color: rgb(0 0 0 / 0.1);
 }
 
-.bg-white\/80 {
-  background-color: rgb(255 255 255 / 0.8);
+.bg-white\/50 {
+  background-color: rgb(255 255 255 / 0.5);
 }
 
 .\!bg-black\/5 {
@@ -1697,12 +1693,6 @@ body {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-sm {
-  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .duration-200 {
   transition-duration: 200ms;
 }
@@ -1734,7 +1724,7 @@ body {
 }
 
 .nav-wrapper {
-  background: #fbfbfb;
+  background: var(--bg);
 }
 
 .open {
@@ -1848,6 +1838,10 @@ article blockquote {
   --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
 }
 
+.dark .dark\:bg-white\/80 {
+  background-color: rgb(255 255 255 / 0.8);
+}
+
 .dark .dark\:\!bg-black\/80 {
   background-color: rgb(0 0 0 / 0.8) !important;
 }
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 435c44d..997443f 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -15,6 +15,8 @@ theme = "hugo-paper"
 title = "Paper"
 
 [params]
+  theme = 'linen'
+
   twitter = 'nanxiaobei'
   github = 'nanxiaobei'
   instagram = 'nan.xiaobei'
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index df618ad..63182d4 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -1,11 +1,16 @@
 <!DOCTYPE html>
 
+{{ $.Scratch.Delete "theme_color" }}<!---->
 {{ $.Scratch.Delete "social_list" }}<!---->
 {{ $.Scratch.Delete "avatar_url" }}<!---->
 
+<!-- theme_color -->
+{{ $theme_map := dict "gray" "#fbfbfb" "light" "#fff" "linen" "#faf6f1" "wheat" "#f1efe1" }}<!---->
+{{ $.Scratch.Set "theme_color" (index $theme_map (site.Params.theme | default (print "gray"))) }}<!---->
+
 <!-- social_list -->
-{{ $socialParams := slice "twitter" "github" "instagram" "rss" }}<!---->
-{{ range $socialParams }}<!---->
+{{ $social_params := slice "twitter" "github" "instagram" "rss" }}<!---->
+{{ range $social_params }}<!---->
 {{ if isset site.Params . }}<!---->
 {{ $.Scratch.Add "social_list" (slice .) }}<!---->
 {{ end }}<!---->
@@ -22,7 +27,11 @@
 {{ end }}<!---->
 {{ end }}<!---->
 
-<html class="not-ready text-sm lg:text-base" lang="{{ site.LanguageCode }}">
+<html
+  class="not-ready text-sm lg:text-base"
+  style="--bg: {{ $.Scratch.Get `theme_color` }}"
+  lang="{{ site.LanguageCode }}"
+>
   {{ partial "head.html" . }}
   <body class="text-black duration-200 ease-out dark:text-white">
     {{ partial "header.html" . }}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index cf2bf11..29dfa53 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -17,11 +17,13 @@
 <!-- avatar -->
 {{ if and $.IsHome (eq $paginator.PageNumber 1) (eq $index 0) }}<!---->
 
-{{ $avatar_url := $.Scratch.Get `avatar_url` }}<!---->
+{{ $avatar_url := $.Scratch.Get "avatar_url" }}<!---->
 {{ if or $avatar_url site.Params.name }}
 <div class="-mt-4 mb-20 flex items-start">
   {{ if $avatar_url }}
-  <div class="mr-5 shrink-0 rounded-full border-[0.5px] border-black/10 bg-white/80 p-3 shadow-xl">
+  <div
+    class="mr-5 shrink-0 rounded-full border-[0.5px] border-black/10 bg-white/50 p-3 shadow-xl dark:bg-white/80"
+  >
     <img
       class="my-0 h-14 w-14 rounded-full !bg-black/5 hover:animate-spin dark:!bg-black/80"
       src="{{ $avatar_url }}"
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 51049c8..73fdc1e 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -12,15 +12,27 @@
     class="btn-menu relative z-50 -mr-8 flex h-[5rem] w-[5rem] shrink-0 cursor-pointer flex-col items-center justify-center gap-2.5 lg:hidden"
   ></a>
 
+  {{ $theme_color := $.Scratch.Get "theme_color" }}
   <script>
-    const metaTheme = document.querySelector('meta[name="theme-color"]');
+    // base
     const htmlClass = document.documentElement.classList;
-    setTimeout(() => htmlClass.remove('not-ready'), 10);
+    setTimeout(() => {
+      htmlClass.remove('not-ready');
+    }, 10);
+
+    // mobile menu
+    const btnMenu = document.querySelector('.btn-menu');
+    btnMenu.addEventListener('click', () => {
+      htmlClass.toggle('open');
+    });
 
-    const setDark = (newDark) => {
-      metaTheme.setAttribute('content', newDark ? '#000' : '#fbfbfb');
-      htmlClass[newDark ? 'add' : 'remove']('dark');
-      localStorage.setItem('dark', newDark);
+    // dark theme
+    const metaTheme = document.querySelector('meta[name="theme-color"]');
+    const lightBg = `{{ $.Scratch.Get "theme_color" }}`.replace(/"/g, '');
+    const setDark = (isDark) => {
+      metaTheme.setAttribute('content', isDark ? '#000' : lightBg);
+      htmlClass[isDark ? 'add' : 'remove']('dark');
+      localStorage.setItem('dark', isDark);
     };
 
     // init
@@ -38,12 +50,6 @@
     btnDark.addEventListener('click', () => {
       setDark(localStorage.getItem('dark') !== 'true');
     });
-
-    // mobile menu
-    const btnMenu = document.querySelector('.btn-menu');
-    btnMenu.addEventListener('click', () => {
-      htmlClass.toggle('open');
-    });
   </script>
 
   <div