Nino | Web开发者｜阅读写作爱好者

hexo | A4颜色搭配推荐

最近更新：2024-07-16 | 字数总计：1.1k | 阅读估时：4分钟 | 阅读量：次

灰白配色-默认
1. 效果演示
2. 如何启用？
棕色墨绿护眼配色-预置
1. 效果演示
2. 如何启用？
青花瓷配色
1. 效果演示
2. 如何启用？
绿金配色
1. 效果演示
2. 如何启用？
你想推荐你的配色？

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

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

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

灰白配色-默认

效果演示

如何启用？

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

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

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

青花瓷配色

效果演示

如何启用？

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

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

绿金配色

效果演示

如何启用？

该配色_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.脚标测试 ↩

2023-05-21 该篇文章被 nino 打上标签: 搭建网站 hexo hexoPlugin 归为分类: 软件