add theme param

2022-08-16 02:20:41 +08:00 · 2022-08-16 02:20:41 +08:00 · d134c6dfcb
commit d134c6dfcb
parent e3d39acf6c
7 changed files with 72 additions and 52 deletions
--- 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
+  # color theme
+  theme = 'linen'                 # linen, gray, light

-    # 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'
+  # 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

-    # misc
-    disableHLJS = true              # disable requesting highlight.js
-    monoDarkIcon = true             # show monochrome dark mode icon
+  # 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
--- 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 {
--- 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;
 }
--- 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'
--- 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" . }}
--- 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 }}"
--- 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);

-    const setDark = (newDark) => {
-      metaTheme.setAttribute('content', newDark ? '#000' : '#fbfbfb');
-      htmlClass[newDark ? 'add' : 'remove']('dark');
-      localStorage.setItem('dark', newDark);
+    // mobile menu
+    const btnMenu = document.querySelector('.btn-menu');
+    btnMenu.addEventListener('click', () => {
+      htmlClass.toggle('open');
+    });
+
+    // 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