修改主题颜色

发表于 分类于 阅读次数 评论数

主题颜色

打开hexo/themes/next/source/css/_variables/base.styl找到Colors代码段，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Colors
// colors for use across theme.
// --------------------------------------------------
  $whitesmoke   = #f5f5f5
  $gainsboro    = #eee  //这个是边栏头像外框的颜色，
  $gray-lighter = #ddd  //文章中插入图片边框颜色
  $grey-light   = #ccc  //文章之间分割线、下划线颜色
  $grey         = #bbb  //页面选中圆点颜色
  $grey-dark    = #999
  $grey-dim     = #666 //侧边栏目录字体颜色
  $black-light  = #555 //修改文章字体颜色
  $black-dim    = #333
  $black-deep   = #495a80  //修改主题的颜色，这里我已经改成老蓝色了。
  $red          = #ff2a2a
  $blue-bright  = #87daff
  $blue         = #0684bd
  $blue-deep    = #262a30
  $orange       = #F39D01 //浏览文章时，目录选中的颜色
本节参考自 [晴天·Sunny](http://zhouhuix.cn/2016/11/24/%E4%BF%AE%E6%94%B9Hexo%E7%9A%84Next%E4%B8%BB%E9%A2%98/)

标题栏背景颜色

当使用Pisces主题时，网站标题栏背景颜色是黑色的，感觉不好看，可以在source/css/_schemes/Pisces/_brand.styl中修改

1
2
3
4
5
6
7
8
9
10
11
.site-meta {
  padding: 20px 0;
  color: white;
  background: $blue-dodger; //修改为自己喜欢的颜色
  +tablet() {
    box-shadow: 0 0 16px rgba(0,0,0,0.5);
  }
  +mobile() {
    box-shadow: 0 0 16px rgba(0,0,0,0.5);
  }
}

但是，我们一般不主张这样修改源码的，在next/source/css/_custom目录下面专门提供了custom.styl供我们自定义样式的，因此也可以在custom.styl里面添加：

1
2
3
4
// Custom styles.
.site-meta {
  background: $blue; //修改为自己喜欢的颜色
}
本节参考自 [孤舟蓑笠翁，独钓寒江雪](http://www.heqiangfly.com/2016/01/12/blog-optimize-next-theme/)
相关推荐