^-^
Web开发者|阅读写作爱好者
hexo | A4颜色搭配推荐
  1. 灰白配色-默认
    1. 效果演示
    2. 如何启用?
  2. 棕色墨绿护眼配色-预置
    1. 效果演示
    2. 如何启用?
  3. 青花瓷配色
    1. 效果演示
    2. 如何启用?
  4. 绿金配色
    1. 效果演示
    2. 如何启用?
  5. 你想推荐你的配色?

在hexo-theme-A4即本主题更新了1.6.7版本后,支持页面所有颜色自定义调整,只需要在_config.a4.yml配置文件中相应配置修改为你喜欢的颜色即可。[1]

但是颜色搭配是一门学问,以下直接告诉你可供选择使用的配色,利于切换主题风格。

你有自己研究出来的顺眼配色,也可在下方评论区留言,我看到后将更新到此页面。

灰白配色-默认

效果演示

灰白A4

如何启用?

该配色为A4启动后默认配色。保证_config.a4.yml配置文件中color设置为false即可

或者color设置为true采用以下配置

# 实验性功能:A4色调调整:颜色搭配是很主观的行为
# 设置为 false 为 A4 默认色调,可设置为 true 直接hexo s 体验下 另一种预置色调
# 注:颜色代码需加“#”,颜色单词不需要加“#”
color: 
  enable: true 
  font: "#000000" 
  background: "#e4e4e4" 
  indexBackGround: "#ffffff" 
  postBackGround: "#ffffff" 
  codeBackGround: "black" 
  codeFont: "white"  
  linkBeforeClick: "#fec591" # 链接点击前的颜色,标题也是链接,所以标题颜色也在此修改
  linkAfterClick: "#fec591" # 链接点击后的颜色

棕色墨绿护眼配色-预置

效果演示

棕红

如何启用?

该配色_config.a4.yml配置文件中预置,将color设置为true,采用以下配置

# 实验性功能:A4色调调整:颜色搭配是很主观的行为
# 设置为 false 为 A4 默认色调,可设置为 true 直接hexo s 体验下 另一种预置色调
# 注:颜色代码需加“#”,颜色单词不需要加“#”
color: 
  enable: true 
  font: "#9e5345" 
  background: "#e8e0c9" 
  indexBackGround: "#efeae2" 
  postBackGround: "#efeae2" 
  codeBackGround: "#e8e0c9"  # 代码行和块的背景色
  codeFont: "#2e5041"
  linkBeforeClick: "#2e5041" # 链接点击前的颜色,标题也是链接,所以标题颜色也在此修改
  linkAfterClick: "#9c9caf" # 链接点击后的颜色

青花瓷配色

效果演示

青蓝A4

如何启用?

该配色_config.a4.yml配置文件中预置,将color设置为true,采用以下配置

# 实验性功能:A4色调调整:颜色搭配是很主观的行为
# 设置为 false 为 A4 默认色调,可设置为 true 直接hexo s 体验下 另一种预置色调
# 注:颜色代码需加“#”,颜色单词不需要加“#”
color: 
  enable: true 
  font: "#323e74" 
  background: "#eaeae8" 
  indexBackGround: "#f2fafc" 
  postBackGround: "#f2fafc" 
  codeBackGround: "#e7f7f3"  # 代码行和块的背景色
  codeFont: "#7f688d"
  linkBeforeClick: "#7f688d" # 链接点击前的颜色,标题也是链接,所以标题颜色也在此修改
  linkAfterClick: "#767c7c" # 链接点击后的颜色

绿金配色

效果演示

绿金A4

如何启用?

该配色_config.a4.yml配置文件中预置,将color设置为true,采用以下配置

# 实验性功能:A4色调调整:颜色搭配是很主观的行为
# 设置为 false 为 A4 默认色调,可设置为 true 直接hexo s 体验下 另一种预置色调
# 注:颜色代码需加“#”,颜色单词不需要加“#”
color: 
  enable: true # true | false 
  font: "#fec591" # 字体颜色
  background: "#005454" # 最底部层背景颜色
  indexBackGround: "#005454" # 首页层颜色
  postBackGround: "#005454" # 文章页层颜色
  codeBackGround: "black" # 代码块背景颜色
  codeFont: "white" # 代码块字体颜色 
  linkBeforeClick: "#fec591" # 链接点击前的颜色,标题也是链接,所以标题颜色也在此修改
  linkAfterClick: "#fec591" # 链接点击后的颜色

你想推荐你的配色?

请在评论区回复你的配置文件color部分代码。

# 实验性功能:A4色调调整:颜色搭配是很主观的行为
# 设置为 false 为 A4 默认色调,可设置为 true 直接hexo s 体验下 另一种预置色调
# 注:颜色代码需加“#”,颜色单词不需要加“#”
color: 
  enable: true # true | false 
  font: "#fec591" # 字体颜色
  background: "#005454" # 最底部层背景颜色
  indexBackGround: "#005454" # 首页层颜色
  postBackGround: "#005454" # 文章页层颜色
  codeBackGround: "black" # 代码块背景颜色
  codeFont: "white" # 代码块字体颜色 
  linkBeforeClick: "#fec591" # 链接点击前的颜色,标题也是链接,所以标题颜色也在此修改
  linkAfterClick: "#fec591" # 链接点击后的颜色

我看到后将更新到此页面。


  1. 1.脚标测试
以上