Base16配色助手插件-精品-修罗开源轻论坛程序

Base16配色助手插件

Tillreetree (99) 开发者管理团队 5月前查看全部

Base16配色方案简介

Base16的初衷是为了解决代码编辑器中颜色方案不一致的问题，但它的应用远不止于此。这套方案不仅适用于代码编辑器，还可以用于网站和其他用户界面的设计。通过使用Base16颜色方案，你可以提高用户体验，使你的网站等看起来更加专业、一致。

在Base16中，每种颜色都有特定的用途和意义。例如，深色和浅色的组合可以用于前景和背景，而不同的颜色可以用于表示不同类型的语法元素，如变量、操作符、关键字等。这种一致的颜色方案有助于提高代码的可读性和可维护性。

动机

如上所述，Base16不仅适用于代码编辑器，还可以用于网站和其他用户界面的设计。因此，我想尝试一下，将Base16应用到Bootstrap框架中，实现一个快速换主题配色的工具。这个工具可以帮助开发者和设计师轻松地为他们的项目创建一致的视觉体验。

功能

安装后会自动应用内置的三百五百余款配色方案中精选的一对。
简单轻松的定制页面中各个部分的颜色，带有实时预览。
可以设置自动切换颜色模式。（晚上切换成深色模式，早上切换成浅色模式）
提供颜色模式切换按钮，方便用户选择适合自己的模式。
内置代码高亮功能，无需额外插件即可享受与当前配色相同的代码高亮（所谓“为代码和界面注入统一色彩”）。
具有一定的可扩展性：利用Hook机制，可以让其他主题添加新的配色。

兼容性

应该兼容市面上多数基于Bootstrap 4开发的主题。具体的兼容性因为一些原因无法逐一测试。本插件不保证会让页面看起来更加难看。

100%兼容

原装主题（没加任何主题插件）
Shards
起源
Bootstrap 386
DecadeEcho
大白·简约风格
jiih：简约单栏
清新绿

95%兼容

Stately
猫羽雫印象主题
Flano
轻鸿

80%兼容

2000年代风格古早论坛主题
知乎蓝
xiuno仿博客主题Pigeon

50%兼容

秘言相册主题

不兼容

BLK
Win95
秘言BBS风格
迷途时光轴主题
云库论坛现代化自适应主题

Stately主题特别注意

经过测试，本插件完美兼容Stately主题，但必须确保以下设置：

“外观-板式微调→帖子详情-通用→使用代码高亮？”选择“否”
“外观→颜色→默认颜色模式”不要选择“特殊-Base16”

Flano主题特别注意

经过测试，本插件兼容Flano主题，但必须确保以下设置：

“颜色主题”为“自定义CSS”

然后在本插件的“自定义CSS”中输入：

:root {
    --body_background: var(--bs-body-background-color);
    --body_color: var(--bs-body-color);
    --body-link_color: var(--bs-primary);
    --body-link_color_hover: var(--bs-primary);
    --homepage-hero_background: linear-gradient(90deg, var(--bs-info) 0%, var(--bs-primary) 100%);
    --homepage-hero_color: var(--base00);
    --primary-button_color: var(--bs-primary);
    --primary-button_color_hover: var(--bs-primary);
    --secondary-button_color: var(--bs-secondary);
    --secondary-button_color_hover: var(--bs-secondary);
    --navbar-background_color: var(--bs-body-background-color);
    --navbar-border_color: var(--base01);
    --navbar-link_color: var(--bs-body-color-bright);
    --navbar-link_color_hover: var(--bs-primary);
    --topic-1st-border_color: var(--base03);
    --quote_background: var(--base02);
    --quote-border_color: var(--bs-secondary);
    --quote_color: var(--bs-secondary);
    --naslov_background: var(--bs-secondary);
    --tmce-editor_color_primary: var(--bs-primary);
    --loader-1_color: var(--bs-primary);
    --loader-2_color: var(--bs-secondary);
    --footer-background_color: var(--base00);
    --form_background: var(--bs-container-background-color);
    --form_color: var(--bs-body-color);
    --dropdown-menu_background: var(--bs-container-background-color);
    --dropdown-menu_background_hover: var(--bs-container-background-color);
    --dropdown-menu_border_color: var(--base01);
    --dropdown-menu_color: var(--bs-body-color);
    --scrollbar-slider_color: var(--bs-secondary);
    --scrollbar-slider_color_hover: var(--bs-primary);
}