修改主题颜色


主题颜色

打开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/)