[css] 文档树彩虹配色修改颜色

文档树的彩虹色,参考了其他帖子的代码,做了颜色的修改,仿照 obs 的彩虹色。

image.png

但是字体颜色会影响到设置里的标题字体颜色

image.png

比较好看

/* 多彩文档树-10色新版 */ /* 定义颜色变量 */ :root { --color1: #D20F39; /* 绛红 */ --color2: #E64553; /* 珊瑚红 */ --color3: #FC7323; /* 活力橙 */ --color4: #E49320; /* 琥珀黄 */ --color5: #51A940; /* 草木绿 */ --color6: #2D9CA2; /* 孔雀青 */ --color7: #04A5E5; /* 科技蓝 */ --color8: #209FB5; /* 浅海蓝 */ --color9: #2A6EF5; /* 群青蓝 */ --color10: #7287FD; /* 薰衣草紫 */ } /* 第一层级容器样式 */ .fn__flex-1.fn__flex-column.file-tree.sy__file ul.b3-list.b3-list--background { border-radius: 8px; margin: 6px 4px; border: 1px solid rgba(0,0,0,0.12); transition: all 0.2s ease; } /* 10色循环背景 */ .fn__flex-1.fn__flex-column.file-tree.sy__file ul.b3-list.b3-list--background:nth-of-type(10n+1) { background: var(--color1) !important; } .fn__flex-1.fn__flex-column.file-tree.sy__file ul.b3-list.b3-list--background:nth-of-type(10n+2) { background: var(--color2) !important; } .fn__flex-1.fn__flex-column.file-tree.sy__file ul.b3-list.b3-list--background:nth-of-type(10n+3) { background: var(--color3) !important; } .fn__flex-1.fn__flex-column.file-tree.sy__file ul.b3-list.b3-list--background:nth-of-type(10n+4) { background: var(--color4) !important; } .fn__flex-1.fn__flex-column.file-tree.sy__file ul.b3-list.b3-list--background:nth-of-type(10n+5) { background: var(--color5) !important; } .fn__flex-1.fn__flex-column.file-tree.sy__file ul.b3-list.b3-list--background:nth-of-type(10n+6) { background: var(--color6) !important; } .fn__flex-1.fn__flex-column.file-tree.sy__file ul.b3-list.b3-list--background:nth-of-type(10n+7) { background: var(--color7) !important; } .fn__flex-1.fn__flex-column.file-tree.sy__file ul.b3-list.b3-list--background:nth-of-type(10n+8) { background: var(--color8) !important; } .fn__flex-1.fn__flex-column.file-tree.sy__file ul.b3-list.b3-list--background:nth-of-type(10n+9) { background: var(--color9) !important; } .fn__flex-1.fn__flex-column.file-tree.sy__file ul.b3-list.b3-list--background:nth-of-type(10n) { background: var(--color10) !important; } /* 所有文字颜色改为白色 */ .b3-list-item__text { color: #F6F7F9 ; font-weight: 450; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
  • 思源笔记

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

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

    25834 引用 • 106980 回帖
  • 代码片段

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

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

    177 引用 • 1247 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • yyyse
    作者

    文字选择改为下面代码,就可以了image.png

    /* 所有文字颜色改为白色 */ .b3-list-item__text[aria-label] { color: #F9F8F5 !important; font-weight: 450; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
  • 其他回帖
  • ZQ11

    有暗黑模式的吗 有点过于艳丽了

    1 回复
  • yyyse
    作者

    颜色是自己改的,就在自定义颜色变量上,我习惯用浅色,没选暗色系的

  • queguaiya via Android

    选择器没写对,是可以不影响其他文字颜色的

  • 查看全部回帖

推荐标签 标签

  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    58 引用 • 22 回帖 • 12 关注
  • 30Seconds

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

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

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 636 关注
  • 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 回帖 • 5 关注
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    10 引用 • 15 回帖 • 5 关注
  • SQLite

    SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    4 引用 • 7 回帖 • 7 关注
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    84 引用 • 324 回帖 • 1 关注
  • 小说

    小说是以刻画人物形象为中心,通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    32 引用 • 108 回帖
  • 安全

    安全永远都不是一个小问题。

    199 引用 • 818 回帖
  • OpenShift

    红帽提供的 PaaS 云,支持多种编程语言,为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 662 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 636 关注
  • IBM

    IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 146 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展,它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    201 引用 • 120 回帖
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 4 关注
  • 强迫症

    强迫症(OCD)属于焦虑障碍的一种类型,是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病,其特点为有意识的强迫和反强迫并存,一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 3 关注
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    188 引用 • 319 回帖 • 248 关注
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台,同时可以将自己看到的精彩内容分享到微信朋友圈。

    133 引用 • 796 回帖 • 1 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 463 关注
  • 架构

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

    142 引用 • 442 回帖 • 2 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    184 引用 • 822 回帖
  • AngularJS

    AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 511 关注
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    37 引用 • 157 回帖 • 1 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 677 关注