malte70/hugo-paper
1
0
Fork 0
Code Activity

update default bg color

Browse source
This commit is contained in:
nanxiaobei 2022-08-21 13:57:54 +08:00
parent 1d39ed7d73
commit 115284347f
4 changed files with 10 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -49,8 +49,8 @@ Available options to `config.toml`:
disqusShortname = 'YOUR_DISQUS_SHORTNAME' # add disqus comments
[params]
# color theme
theme = 'gray' # gray, light, linen, wheat
# color style
color = 'linen' # linen, wheat, gray, light
# header social icons
twitter = 'YOUR_TWITTER_ID' # twitter.com/YOUR_TWITTER_ID

2
exampleSite/config.toml
View file

@ -15,7 +15,7 @@ theme = "hugo-paper"
title = "Paper"
[params]
theme = 'linen'
color = 'linen'
twitter = 'nanxiaobei'
github = 'nanxiaobei'

10
layouts/_default/baseof.html
View file

@ -1,12 +1,12 @@
<!DOCTYPE html>
{{ $.Scratch.Delete "theme_color" }}<!---->
{{ $.Scratch.Delete "bg_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"))) }}<!---->
<!-- bg_color -->
{{ $color_map := dict "linen" "#faf6f1" "wheat" "#f1efe1" "gray" "#fbfbfb" "light" "#fff" }}<!---->
{{ $.Scratch.Set "bg_color" (index $color_map (site.Params.color | default (print "linen"))) }}<!---->
<!-- social_list -->
{{ $social_params := slice "twitter" "github" "instagram" "rss" }}<!---->
@ -29,7 +29,7 @@
<html
class="not-ready text-sm lg:text-base"
style="--bg: {{ $.Scratch.Get `theme_color` }}"
style="--bg: {{ $.Scratch.Get `bg_color` }}"
lang="{{ site.LanguageCode }}"
>
{{ partial "head.html" . }}

4
layouts/partials/header.html
View file

@ -12,7 +12,7 @@
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" }}
{{ $bg_color := $.Scratch.Get "bg_color" }}
<script>
// base
const htmlClass = document.documentElement.classList;
@ -28,7 +28,7 @@
// dark theme
const metaTheme = document.querySelector('meta[name="theme-color"]');
const lightBg = `{{ $.Scratch.Get "theme_color" }}`.replace(/"/g, '');
const lightBg = `{{ $.Scratch.Get "bg_color" }}`.replace(/"/g, '');
const setDark = (isDark) => {
metaTheme.setAttribute('content', isDark ? '#000' : lightBg);
htmlClass[isDark ? 'add' : 'remove']('dark');