[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;' ];
  • 思源笔记

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

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

    26298 引用 • 109336 回帖 • 1 关注
  • 代码片段

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

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

    201 引用 • 1444 回帖 • 2 关注
1 操作
wilsons 在 2025-04-21 19:46:13 更新了该帖

相关帖子

7 回帖

欢迎来到这里!

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

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

    一键三连

  • lichlaughing via macOS

    用上了 👍

  • harryZ 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
正在努力开发 wilsons 工具箱中 🛠️ 目前已正式入驻爱发电啦!💖 想催更、提需求?欢迎访问 👉 https://afdian.com/a/wilsons

推荐标签 标签

  • Markdown

    Markdown 是一种轻量级标记语言,用户可使用纯文本编辑器来排版文档,最终通过 Markdown 引擎将文档转换为所需格式(比如 HTML、PDF 等)。

    172 引用 • 1538 回帖
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    24 引用 • 246 回帖
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖
  • OpenCV
    15 引用 • 36 回帖
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 233 回帖
  • 京东

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

    14 引用 • 102 回帖 • 314 关注
  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    127 引用 • 169 回帖
  • 智能合约

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

    1 引用 • 11 回帖 • 2 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    5 引用 • 16 回帖 • 1 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 2 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖 • 2 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 614 关注
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    15 引用 • 7 回帖 • 1 关注
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 384 回帖 • 3 关注
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 37 关注
  • 博客

    记录并分享人生的经历。

    273 引用 • 2389 回帖 • 1 关注
  • 倾城之链
    23 引用 • 66 回帖 • 166 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 650 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    4 引用 • 16 回帖 • 196 关注
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    211 引用 • 358 回帖
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • 前端

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

    246 引用 • 1338 回帖
  • 微服务

    微服务架构是一种架构模式,它提倡将单一应用划分成一组小的服务。服务之间互相协调,互相配合,为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建,能够被独立的部署。

    96 引用 • 155 回帖
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 2 关注