自定义主题色&网站字体大小 (#131)

* 自定义主题色与全站字体大小

* 新增主题配色与字体大小

* waline适配主题色

* 新增主题色

* 主题色

* waline适配主题色

* twikoo主题色跟随

* waline主题色跟随

* twikoo主题色跟随

_config.yml

@@ -365,13 +365,21 @@ plugins:
 style:
   darkmode: auto # auto / always / false
   smooth_scroll: true # true / false
+  font-size: 16px
   font-family:
     logo: system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif
     body: system-ui, "Microsoft Yahei", "Segoe UI", -apple-system, Roboto, Ubuntu, "Helvetica Neue", Arial, "WenQuanYi Micro Hei", sans-serif
     code: Menlo, Monaco, Consolas, system-ui, "Courier New", monospace, sans-serif
   theme:
-    light: '#f8f8f8'
-    dark: '#313438'
+    main: '#1BCDFC'
+    link: '#2196f3'
+    button: '#1BCDFC'
+    hover: '#ff5722'
+    highlight: '#ff5722'
+    inner: '#fff'
+    cat: '#FF7844'
+    light: '#f8f8f8' #浅色背景颜色
+    dark: '#313438' #深色背景颜色
   animated_avatar:
     animate: auto # auto, always
     background: https://fastly.jsdelivr.net/gh/cdn-x/placeholder@1.0.2/avatar/round/rainbow64@3x.webp

source/css/_custom.styl

@@ -1,13 +1,13 @@
 @require('_defines/const')
 
 // 通用主题色
-$color-theme = #1BCDFC
-$color-link = #2196f3
-$color-button = #1BCDFC
-$color-hover = #ff5722
-$color-highlight = #ff5722
-$color-inner = #fff
-$color-cat = #FF7844
+$color-theme = convert(hexo-config('style.theme.main'))
+$color-link = convert(hexo-config('style.theme.link'))
+$color-button = convert(hexo-config('style.theme.button'))
+$color-hover = convert(hexo-config('style.theme.hover'))
+$color-highlight = convert(hexo-config('style.theme.highlight'))
+$color-inner = convert(hexo-config('style.theme.inner'))
+$color-cat = convert(hexo-config('style.theme.cat'))
 $color-cat-hover = darken($color-cat, 20)
 
 // 浅色
@@ -51,7 +51,7 @@ if hexo-config('style.font-family.logo')
 
 
 // font size
-$fs-root = 16px
+$fs-root = convert(hexo-config('style.font-size'))
 $fs-15 = .9375rem
 $fs-14 = .875rem
 $fs-13 = .8125rem

source/css/_plugins/comments/twikoo.styl

@@ -2,7 +2,7 @@
   --twikoo-lighttext: #ef794f;
   --twikoo-secondtext: #909094;
   --twikoo-emoji-background: #f8f8f8;
-  --twikoo-theme: #409eff;
+  --twikoo-theme: $color-theme;
   margin-top: 1.5rem
 
   .tk-content

source/css/_plugins/comments/waline.styl

@@ -5,7 +5,7 @@
   --waline-light-grey: #999;
   --waline-dark-grey: #666;
   /* 主题色 */
-  --waline-theme-color: #3498db;
+  --waline-theme-color: $color-theme;
   --waline-active-color: #2ecc71;
   /* 布局颜色 */
   --waline-color: #444;