[js] 多彩 Tab

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

代码：

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;'
];
​