设置主题色

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

  1. 先确定配色方案

    背景色: #002b36

    字体色: #839496

    可以在 Solarized Color Scheme 找到更多的配色方案。

    下面步骤将用这个色值设置even 主题色,本博客就是最终效果。

  2. 设置背景色

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

    1
    2
    3
    
           // Background color of the site.
           $global-background: $white !default;
        
  3. 修改 $white 色值

    修改为 #002b36 色号

    1
    2
    3
    4
    5
    6
    7
    
           // ========== Color ========== //
           $black: #0a0a0a !default;
           $white: #002b36 !default; //#fefefe
           $light-gray: #e6e6e6 !default;
           $gray: #cacaca !default;
           $dark-gray: #8a8a8a !default;
        
  4. 设置字体的全局色

    Global 下 $global-font-color 的sRGB 值

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

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

    toc 浮动框背景色

    1
    2
    3
    4
    5
    6
    7
    
           // ========== 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