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 disqusShortname = 'YOUR_DISQUS_SHORTNAME' # add disqus comments
[params] [params]
# color theme # color style
theme = 'gray' # gray, light, linen, wheat color = 'linen' # linen, wheat, gray, light
# header social icons # header social icons
twitter = 'YOUR_TWITTER_ID' # twitter.com/YOUR_TWITTER_ID twitter = 'YOUR_TWITTER_ID' # twitter.com/YOUR_TWITTER_ID

2
exampleSite/config.toml
View file

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

10
layouts/_default/baseof.html
View file

@ -1,12 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
{{ $.Scratch.Delete "theme_color" }}<!----> {{ $.Scratch.Delete "bg_color" }}<!---->
{{ $.Scratch.Delete "social_list" }}<!----> {{ $.Scratch.Delete "social_list" }}<!---->
{{ $.Scratch.Delete "avatar_url" }}<!----> {{ $.Scratch.Delete "avatar_url" }}<!---->
<!-- theme_color --> <!-- bg_color -->
{{ $theme_map := dict "gray" "#fbfbfb" "light" "#fff" "linen" "#faf6f1" "wheat" "#f1efe1" }}<!----> {{ $color_map := dict "linen" "#faf6f1" "wheat" "#f1efe1" "gray" "#fbfbfb" "light" "#fff" }}<!---->
{{ $.Scratch.Set "theme_color" (index $theme_map (site.Params.theme | default (print "gray"))) }}<!----> {{ $.Scratch.Set "bg_color" (index $color_map (site.Params.color | default (print "linen"))) }}<!---->
<!-- social_list --> <!-- social_list -->
{{ $social_params := slice "twitter" "github" "instagram" "rss" }}<!----> {{ $social_params := slice "twitter" "github" "instagram" "rss" }}<!---->
@ -29,7 +29,7 @@
<html <html
class="not-ready text-sm lg:text-base" class="not-ready text-sm lg:text-base"
style="--bg: {{ $.Scratch.Get `theme_color` }}" style="--bg: {{ $.Scratch.Get `bg_color` }}"
lang="{{ site.LanguageCode }}" lang="{{ site.LanguageCode }}"
> >
{{ partial "head.html" . }} {{ 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" 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> ></a>
{{ $theme_color := $.Scratch.Get "theme_color" }} {{ $bg_color := $.Scratch.Get "bg_color" }}
<script> <script>
// base // base
const htmlClass = document.documentElement.classList; const htmlClass = document.documentElement.classList;
@ -28,7 +28,7 @@
// dark theme // dark theme
const metaTheme = document.querySelector('meta[name="theme-color"]'); 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) => { const setDark = (isDark) => {
metaTheme.setAttribute('content', isDark ? '#000' : lightBg); metaTheme.setAttribute('content', isDark ? '#000' : lightBg);
htmlClass[isDark ? 'add' : 'remove']('dark'); htmlClass[isDark ? 'add' : 'remove']('dark');