Base16配色助手 - 快速更换“类Bootstrap主题”配色的插件,为代码和界面注入统一色彩
Tillreetree 4月前

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+当前下载次数

最后于 1月前 被Tillreetree编辑 ,原因:
上传的附件:
最新回复 (25)
全部楼主
  • china0396
    4月前 2
    0
    顶顶顶顶顶顶顶!!!
  • wzry2580
    4月前 3
    0
    顶顶顶顶顶顶顶!!!
  • crll
    4月前 4
    0
    哈哈,不错哦!
  • 旺仔
    4月前 5
    0
    楼主,你写得实在是太好了。我惟一能做的,就只有把这个帖子顶上去这件事了。 
  • 幻彩流夏
    4月前 6
    0
    哈哈,不错哦!
  • 199320
    4月前 7
    0
    哈哈,不错哦!
  • 幻彩流夏
    4月前 8
    0
    祝xiunobbs论坛越办越好!!!
  • crll
    4月前 9
    0
    不错的帖子!
  • djntt
    4月前 10
    0
    沙发我没有,板凳我没有,板也没有,只好站在后面排队支持! 
  • 略懂
    4月前 11
    0
    顶顶顶顶顶顶顶!!!
  • wpdkj
    4月前 12
    0
    感谢楼主ing!!!
  • shenren
    4月前 13
    0
    我要拿出这帖子奉献给世人赏阅,我要把这个帖子一直往上顶,往上顶!顶到所有人都看到为止! 
  • www2296945504
    3月前 14
    0
    不错的帖子!
  • odinad
    3月前 15
    0
    好奇你这个能不能兼容奇狐的黑色主题
  • Tillreetree 版主 楼主
    3月前 16
    0
    odinad 好奇你这个能不能兼容奇狐的黑色主题
    我没有那个主题,所以我也不确定能否兼容……要不你先试一下?
  • odinad
    3月前 17
    0
    Tillreetree 我没有那个主题,所以我也不确定能否兼容……要不你先试一下?
    试了,那个模板很...还行吧,算是兼容,应该算是你这里面的80%或者50%一类,但是消息页面会变成白色字体,白色背景,主页背景也没变。
    大概就这两个没变,其他的都变了,我建议你那个演示页面能不能搞个下栏呢?说实话,那个配色的,我也看不懂。
  • Tillreetree 版主 楼主
    3月前 18
    0
    odinad 试了,那个模板很...还行吧,算是兼容,应该算是你这里面的80%或者50%一类,但是消息页面会变成白色字体,白色背景,主页背景也没变。 大概就这两个没变,其他的都变了,我建议你那个演示页面能不能搞个 ...
    什么“下栏”?

    设置页面应该还算比较易懂吧……?
  • yunxi0723
    2月前 19
    0
    我要拿出这帖子奉献给世人赏阅,我要把这个帖子一直往上顶,往上顶!顶到所有人都看到为止! 
  • amwdhqgu1
    2月前 20
    0
    顶顶顶顶顶顶顶!!!
返回