Base16配色方案简介

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

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

动机

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

功能

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

兼容性

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

100%兼容

• 原装主题（没加任何主题插件）
• Shards
• GridVista
• 起源
• 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);
  }

2000年代风格古早论坛主题特别注意

• 需要调整该主题的“bbs.css”中的色调变量

截图展示

感谢

在实现过程中，我在此感谢以下开发者：

• 1. Chris Kempson：他提出了Base16配色方案的概念，并为各种编辑器和终端提供了实现。
• 2. Github上samme的base16-styles仓库（及该仓库中的所有贡献者）：该仓库提供了CSS变量版本（和其他版本）的配色。
• 3. Github上Rotekoppen的web16仓库：该仓库提供了一个基础前端库，可以帮助我们快速地实现Base16配色的页面。

更新记录

1.3.0（2024年3月31日）

改进：预览面板会显示当前主页的粗略样子，方便根据实际需求调整配色。

新增：导航栏颜色控制

1.2.3（2024年2月12日）

改进：微调一些配色方案的颜色。

1.2.2（2024年2月2日）

改进：微调一些配色方案的颜色。

1.2.1（2024年1月23日）

新增：新增4个配色方案。

改进：微调一些配色方案的颜色。

1.2.0（2024年1月15日）

新增：新增198个配色方案。总数达到529个配色方案。

改进：主题兼容性

1.1.0（2024年1月11日）

修复：在一些第三方后台主题中（如“执事”主题），本插件的设置会被遮挡的问题。

新增：新增几个配色方案。

新增：设置“本插件提供的样式注入位置”，可选择“页面开头位置（默认）”和“页面结束位置”，选择“页面结束位置”可能会有更好的兼容性。

新增：自定义CSS输入框，降低一些自定义样式的难度。注意：必须启用本插件才能让自定义CSS生效。

1.0.0（2024年1月1日）

初次发布。

下载

见附件。

demo.html为所有可用配色方案的代码高亮预览。看了预览就能对这些配色方案有个大致印象了。

下载次数：34+当前下载次数