欢迎使用Base16主题助手

请问您想调整什么?

点击屏幕左下角的“≡”显示Xiuno BBS主菜单。

别忘了在调整完成后按返回键保存设置!

浅色模式

🎨 选择配色

📝 自定义颜色

页面 Page

页面背景颜色

整个页面的背景颜色

容器背景颜色

卡片等主要容器的背景颜色

文字颜色

普通的文字颜色

└─── 对比度:... ───┘
着重文字颜色

如标题、激活的菜单项等

次要文字颜色

一些次要信息会用这个颜色

选中文字背景颜色

请以实际选择颜色为准,背景色会更深

选中文字前景颜色

请以实际选择颜色为准

└─── 对比度:... ───┘

导航 Navigation

对比度:...

启用导航栏颜色控制?
导航栏背景颜色
导航栏前景颜色

主要 Primary

对比度:...

推荐选择你喜欢的颜色

背景颜色
文字颜色

次要 Secondary

对比度:...

推荐选择灰色

背景颜色
文字颜色

信息 Info

对比度:...

推荐选择水绿色/青色

背景颜色
文字颜色

成功 Success

对比度:...

推荐选择绿色

背景颜色
文字颜色

警告 Warning

对比度:...

推荐选择黄色/橙色

背景颜色
文字颜色

危险 Danger

对比度:...

推荐选择黄色/红色

背景颜色
文字颜色

深色模式

🎨 选择配色

📝 自定义颜色

页面 Page

推荐选择你喜欢的颜色

页面背景颜色

整个页面的背景颜色

容器背景颜色

卡片等主要容器的背景颜色

文字颜色
└─── 对比度:... ───┘
着重文字颜色

如标题、激活的菜单项等

次要文字颜色

一些次要信息会用这个颜色

选中文字背景颜色

请以实际选择颜色为准,背景色会更深

选中文字前景颜色

请以实际选择颜色为准

└─── 对比度:... ───┘

导航 Navigation

对比度:...

启用导航栏颜色控制?
导航栏背景颜色
导航栏前景颜色

主要 Primary

对比度:...

推荐选择你喜欢的颜色

背景颜色
文字颜色

次要 Secondary

对比度:...

推荐选择灰色

背景颜色
文字颜色

信息 Info

对比度:...

推荐选择水绿色/青色

背景颜色
文字颜色

成功 Success

对比度:...

推荐选择绿色

背景颜色
文字颜色

警告 Warning

对比度:...

推荐选择黄色/橙色

背景颜色
文字颜色

危险 Danger

对比度:...

推荐选择黄色/红色

背景颜色
文字颜色

Base16配色助手设置

自动切换配色模式

'自动(根据时间选择模式)','light' => '浅色模式','dark' => '深色模式', ],$settings['b16_color_mode']) ?>

首次访问网站时的配色模式

选择“是”,将会在页面一角显示颜色模式切换按钮,为用户提供随时切换配色的便利。

推荐设置为18:00之后

推荐设置为07:00左右

自定义CSS

其他设置

'页面开头位置(</head>)','body_end'=>'页面结束位置(</body>)'],$settings['b16_inject_location']) ?>

默认为“页面开头位置”;选择“页面结束位置”可能会有更好的兼容性。

仅限原装后台主题,使用“执事”等后台主题可能不兼容。

小知识

对比度等级

WCAG 2.0 中将颜色对比等级分为3种,A级,AA级,AAA级,等级越高意味着颜色的对比度越高,呈现出来的视觉压力越大:

  • A 级 (采用3:1的对比度,是普通观察者可接受的最低对比度)
  • AA 级(采用4.5:1 的对比度,是普通视力损失的人可接受的最低对比度)
  • AAA 级(采用7:1的对比度,是严重视力损失的人可接受的最低对比度)

关于Base16配色助手

作者
Tillreetree
感谢
Github上Chris Kempson的base16仓库:他提出了Base16配色方案的概念。
Github上samme的base16-styles仓库及该仓库中所有的贡献者 - 提供了CSS变量版本(和其他版本)的各种配色。
Github上Rotekoppen的web16仓库 - 提供了基础前端库,帮助我快速地实现Base16配色的页面。
Geticer - 制作协力,转换了一些Vim中的配色方案到Base16风格的配色。
文心一言 - 撰写演示页面的HTML结构、文章、评论。
七濑胡桃 - 精神支持。