设置even主题色

设置主题色

主题的样式文件的位置： ${Hugo-Site}/themes/even/assets/sass/_variables.scss

先确定配色方案
背景色： #002b36
字体色： #839496
可以在 Solarized Color Scheme 找到更多的配色方案。
下面步骤将用这个色值设置even 主题色，本博客就是最终效果。

设置背景色

在 _variables.scss 中找到 $global-background 属性值为 $white

1
2
   // Background color of the site.
   $global-background: $white !default;

修改 $white 色值

修改为 #002b36 色号

1
2
3
4
5
6
   // ========== Color ========== //
   $black: #0a0a0a !default;
   $white: #002b36 !default; //#fefefe
   $light-gray: #e6e6e6 !default;
   $gray: #cacaca !default;
   $dark-gray: #8a8a8a !default;

设置字体的全局色

Global 下 $global-font-color 的sRGB 值

1
2
3
   // ========== Global ========== //
   // Text color of the body. #34495e
   $global-font-color: #839496 !default;

其他

在完成上两步之后，可以看到效果样式。还有toc 样式背景需要做统一色设置。

toc 浮动框背景色

1
2
3
4
5
6
   // ========== TOC ========== //
   // Width of the post toc.
   $post-toc-width: 260px !default;

   // Backgroud color of the post toc. rgba($deputy-color, 0.6)
   $post-toc-backgroud: rgba($white, 1) !default;

参考：更新 hugo-even 主题样式 - Herbert’s Blog

文章目录

设置主题色