[css] 标题颜色

本贴最后更新于 425 天前,其中的信息可能已经时移世易
:root {
    --custom-color-my-black: #0C0C0C;
    --custom-color-my-blue: #2E75B5;
    --custom-color-my-orange: #ED7D31;
    --custom-color-my-red: #FA0000;
    --custom-color-my-red-1: #E84C22;
    --custom-color-my-yellow: #BF9000;
    --custom-color-my-green: #70AD47;
    --custom-color-my-purple: #8064A2;
    --custom-color-my-white: #FFFFFF;
}

:root[data-theme-mode=light] {
    /* 子标题及其对应大纲颜色 | Subheadings and their corresponding outline colors */
    --custom-h1-color: var(--custom-color-my-red-1);
    --custom-h2-color: var(--custom-color-my-yellow);
    --custom-h3-color: var(--custom-color-my-green);
    --custom-h4-color: var(--custom-color-my-blue);
    --custom-h5-color: var(--custom-color-my-purple);
    --custom-h6-color: var(--custom-color-my-black);
}

:root[data-theme-mode=dark] {
    /* 子标题及其对应大纲颜色 | Subheadings and their corresponding outline colors */
    --custom-h1-color: var(--b3-card-error-color);
    --custom-h2-color: var(--b3-card-warning-color);
    --custom-h3-color: var(--b3-card-success-color);
    --custom-h4-color: var(--b3-card-info-color);
    --custom-h5-color: #B2A1C7;
    --custom-h6-color: var(--b3-theme-on-background);
}

/* 一级标题 */
.protyle-wysiwyg [data-node-id].h1,
.b3-typography h1 {
    color: var(--custom-h1-color);
}

/* 二级标题 */
.protyle-wysiwyg [data-node-id].h2,
.b3-typography h2 {
    color: var(--custom-h2-color);
}

/* 三级标题 */
.protyle-wysiwyg [data-node-id].h3,
.b3-typography h3 {
    color: var(--custom-h3-color);
}

/* 四级标题 */
.protyle-wysiwyg [data-node-id].h4,
.b3-typography h4 {
    color: var(--custom-h4-color);
}

/* 五级标题 */
.protyle-wysiwyg [data-node-id].h5,
.b3-typography h5 {
    color: var(--custom-h5-color);
}

/* 六级标题 */
.protyle-wysiwyg [data-node-id].h6,
.b3-typography h6 {
    color: var(--custom-h6-color);
}

参考自 https://github.com/handlI/SiYuanSimpleTheme

图片.png

  • 思源笔记

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

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

    28451 引用 • 119805 回帖 • 1 关注
  • 代码片段

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

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

    286 引用 • 1988 回帖

相关帖子

欢迎来到这里!

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

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

    好使,感谢分享,特别是 github 上的自动编号主题

  • 其他回帖
  • simon2019

    非常感谢,这个正式需要的

  • LiulangZ

    妈耶实在是太有用了!!感谢!

  • A-Favaloro

    求问,将 h5 标题改为了一个紫色,但思源内依然是黑色

    theme.css 文件内:

    /* 各级标题颜色 */
    --custom-h1-color: rgba(15, 76, 129, 1);
    --custom-h2-color: #083256;
    --custom-h2-border-color: #dfe0e1;
    --custom-h3-color: rgba(15, 76, 129, 1);
    --custom-h4-color: #1c849e;
    --custom-h5-color: #9b79ff;
    --custom-h6-color: var(--b3-theme-on-background);
    --custom-blockquote-border-color: #e8e8e8;
    --custom-blockquote-background-color: #eaf7ff59;
    --custom-tag-hover-color: #559898;
    --custom-link-bottom-color: #3375ab;

    editor.css 文件内:

    /* 5. 五级标题样式 setup */
    .protyle-wysiwyg [data-node-id].h5,
    .b3-typography h5 {
    font-size: 1.1em !important;
    color: var(--custom-h5-color) !important;
    }

  • 查看全部回帖

推荐标签 标签

  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

    27 引用 • 7 回帖 • 93 关注
  • OpenCV
    15 引用 • 36 回帖 • 1 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 43 关注
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘(Capacitive Keyboard)。

    5 引用 • 74 回帖 • 548 关注
  • gRpc
    11 引用 • 9 回帖 • 116 关注
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    34 引用 • 37 回帖 • 563 关注
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    63 引用 • 289 回帖
  • 持续集成

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

    15 引用 • 7 回帖
  • 导航

    各种网址链接、内容导航。

    45 引用 • 177 回帖
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    6 引用 • 26 回帖 • 558 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 413 关注
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    110 引用 • 153 回帖
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。

    76 引用 • 258 回帖 • 641 关注
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • 大疆创新

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

    2 引用 • 14 回帖 • 1 关注
  • CongSec

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

    1 引用 • 1 回帖 • 55 关注
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    92 引用 • 752 回帖
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 17 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    105 引用 • 908 回帖
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 50 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。

    6 引用 • 144 回帖 • 3 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    22 引用 • 148 回帖 • 27 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 16 关注
  • Windows

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

    232 引用 • 484 回帖
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    151 引用 • 257 回帖
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 120 关注