[js] 多彩 Tab

当思源中打开文档的时候,如果频繁切换目标文档,有时光靠标签文字看起来不够直观,不够快速,这个多彩 tab,可以在打开文档时,自动给 tab 生成一个随机背景颜色,方便快速识别不同的标签。

mtab.png

代码:

https://gitee.com/wish163/mysoft/blob/main/%E6%80%9D%E6%BA%90/%E5%A4%9A%E5%BD%A9Tab.js

使用说明:

可以通过参数 tabStyles 修改或添加不同的 tab 样式,默认是思源自带的背景色 1-12,你也可以根据需要自定义。

为了适应明暗主题,如果你自定义的颜色,建议最好用 css 代码片段先设置不同主题下的颜色方案。

当然,你也可以直接写在 tableStyles 参数里,比如,[data-theme-mode="light"] &{background-color:lightblue;}[data-theme-mode="dark"] &{background-color:darkred;} 这个样式在亮色主题下用 lightblue,在暗色主题下用 darkred,但必须 useInlineStyle 参数设置为 no 的时候才支持这样写。

当 useInlineStyle 参数设置为 no 的时候,也支持对子元素控制样式,比如,background-color:var(--b3-font-background1);.item__text{color:white},这个支持对 tab 标题文字的颜色修改。

注意,再次强调,支持直接写主题样式和子元素样式,必须在 0.0.2 版本以后才行,且必须参数 useInlineStyle='no'。

以下是我用的样式,给背景设置了半透明和加了圆角

// 添加tab样式,可根据自己需要添加或修改样式 const tabStyles = [ 'background-color:color-mix(in srgb, var(--b3-font-background1) 50%, transparent);border-radius: 5px;', 'background-color:color-mix(in srgb, var(--b3-font-background2) 50%, transparent);border-radius: 5px;', 'background-color:color-mix(in srgb, var(--b3-font-background3) 50%, transparent);border-radius: 5px;', 'background-color:color-mix(in srgb, var(--b3-font-background4) 50%, transparent);border-radius: 5px;', 'background-color:color-mix(in srgb, var(--b3-font-background5) 50%, transparent);border-radius: 5px;', 'background-color:color-mix(in srgb, var(--b3-font-background6) 50%, transparent);border-radius: 5px;', 'background-color:color-mix(in srgb, var(--b3-font-background7) 50%, transparent);border-radius: 5px;', 'background-color:color-mix(in srgb, var(--b3-font-background8) 50%, transparent);border-radius: 5px;', 'background-color:color-mix(in srgb, var(--b3-font-background9) 50%, transparent);border-radius: 5px;', 'background-color:color-mix(in srgb, var(--b3-font-background10) 50%, transparent);border-radius: 5px;', 'background-color:color-mix(in srgb, var(--b3-font-background11) 50%, transparent);border-radius: 5px;', 'background-color:color-mix(in srgb, var(--b3-font-background12) 50%, transparent);border-radius: 5px;' ];
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    25407 引用 • 105036 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    162 引用 • 1103 回帖
1 操作
wilsons 在 2025-04-21 19:46:13 更新了该帖

相关帖子

7 回帖

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • suxiang999

    一键三连

  • lichlaughing via macOS

    用上了 👍

  • 感谢,喜欢

  • lichlaughing via macOS

    image.png

    能不能多彩 tab 的时候,把 tab 里面的文字颜色设置为白色。要不然黑色看不清。

    1 回复
  • wilsons

    tabStyles 参数里不是可以随意设置样式吗?哪个颜色有问题,后面加上 color:white 就行。

    另外,也可以按照我下面的样式那样,把背景设为半透明,颜色就不会那么深了。

    1 回复
  • lichlaughing via macOS

    不知道是否哪里影响了。我在上次回帖的时候就尝试添加了。

    image.png

    但是结果:image.png

    我发现文字在里面的 span 里。不知道这个情况怎么处理。 我使用的 QYL 主题。

    1 回复
  • wilsons

    方法 1 (推荐

    代码已实现支持对子元素样式的控制。

    比如:可在样式后添加 .item__text{color:white;} 来实现。

    更新代码到 0.0.2 版即可,useInlineStyle 参数可设定使用内联样式还是使用外部样式。

    方法 2

    增加 css 片段专门控制这些颜色

    比如,针对你这个颜色添加

    .layout-tab-bar .item[style*="--b3-font-background10"] .item__text{ color: white; }

    方法 3 (不推荐)

    简单粗暴

    比如,我这里 item__text 用的是--b3-theme-on-surace

    image.png

    那直接在 tabStyles 参数里添加--b3-theme-on-surface: white

    image.png

    但这样也会影响到 tab 关闭按钮的颜色,所以推荐方法 1

    2 操作
    wilsons 在 2025-04-21 19:25:46 更新了该回帖
    wilsons 在 2025-04-21 19:19:46 更新了该回帖
请输入回帖内容 ...
wilsons
人生最大的敌人是自己,战胜自己,才能超越一切。

推荐标签 标签

  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖
  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 1 关注
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 247 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 585 回帖 • 1 关注
  • 印象笔记
    3 引用 • 16 回帖 • 3 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 63 关注
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    58 引用 • 25 回帖 • 2 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    116 引用 • 54 回帖 • 4 关注
  • 国际化

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖 • 3 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    143 引用 • 442 回帖 • 1 关注
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 316 关注
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    54 引用 • 44 回帖
  • 一些有用的避坑指南。

    69 引用 • 93 回帖
  • 工具

    子曰:“工欲善其事,必先利其器。”

    298 引用 • 763 回帖 • 1 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    245 引用 • 1338 回帖 • 1 关注
  • wolai

    我来 wolai:不仅仅是未来的云端笔记!

    2 引用 • 14 回帖 • 4 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 67 回帖 • 450 关注
  • Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。

    495 引用 • 931 回帖
  • GraphQL

    GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。GraphQL 并没有和任何特定数据库或者存储引擎绑定,而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 11 关注
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    7 引用 • 69 回帖
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 590 关注
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 691 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    125 引用 • 74 回帖
  • 招聘

    哪里都缺人,哪里都不缺人。

    188 引用 • 1057 回帖
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 374 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    54 引用 • 37 回帖