[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); }
  • 思源笔记

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

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

    25376 引用 • 104805 回帖
  • 代码片段

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

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

    160 引用 • 1039 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • queguaiya via Android

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

  • 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); }
  • yyyse
    作者

    错了错了,选择器修改为,之前的范围大了

    /* 所有文字颜色改为白色 */ ul.b3-list--background[data-sort] span.b3-list-item__text[aria-label] { color: #F9F8F5 !important; font-weight: 450; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }/* 所有文字颜色改为白色 */ ul.b3-list--background[data-sort] span.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
    作者

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

推荐标签 标签

  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    28 引用 • 226 回帖 • 132 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 3 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 705 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 56 关注
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖 • 1 关注
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 31 关注
  • Jenkins

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

    54 引用 • 37 回帖
  • 域名

    域名(Domain Name),简称域名、网域,是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。

    43 引用 • 208 回帖
  • RemNote
    2 引用 • 16 回帖 • 10 关注
  • 微软

    微软是一家美国跨国科技公司,也是世界 PC 软件开发的先导,由比尔·盖茨与保罗·艾伦创办于 1975 年,公司总部设立在华盛顿州的雷德蒙德(Redmond,邻近西雅图)。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖 • 1 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations,简称 DJI),成立于 2006 年,是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商,客户遍布全球 100 多个国家。通过持续的创新,大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    133 引用 • 1124 回帖 • 112 关注
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 410 关注
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1441 引用 • 10069 回帖 • 495 关注
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    173 引用 • 518 回帖 • 1 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    20 引用 • 23 回帖 • 740 关注
  • 笔记

    好记性不如烂笔头。

    310 引用 • 794 回帖
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    335 引用 • 324 回帖 • 3 关注
  • 以太坊

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

    34 引用 • 367 回帖 • 4 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    227 引用 • 476 回帖 • 1 关注
  • SQLite

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

    5 引用 • 7 回帖 • 1 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 342 关注
  • DevOps

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

    58 引用 • 25 回帖 • 1 关注
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 92 关注
  • IDEA

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

    181 引用 • 400 回帖
  • 反馈

    Communication channel for makers and users.

    121 引用 • 907 回帖 • 272 关注