分享一个自己搭配的浅色主题

本贴最后更新于 519 天前,其中的信息可能已经事过景迁

主题颜色是自己搭配的,浅色系,虽然谈不上特别好看,但是各个元素辨识度很高而且看时间长眼睛也很舒服。

:root {
    /* 主色 */
    --b3-theme-primary: #3575f0;
    --b3-theme-primary-light: rgba(53, 117, 240, 0.54);
    --b3-theme-primary-lighter: rgba(53, 117, 240, 0.38);
    --b3-theme-primary-lightest: rgba(53, 117, 240, 0.12);
    --b3-theme-secondary: #f3a92f;
    /* */
    /* 主面板背景色 */
    --b3-theme-background: #ececec;
    /* 鼠标滑过大纲栏 显示的颜色 */
    --b3-theme-background-light: #d3c5b6;
    /* 大纲面板背景色 */
    --b3-theme-surface: #dbe2e9;
    --b3-theme-surface-light: rgba(243, 243, 243, .86);
    --b3-theme-surface-lighter: rgba(0, 0, 0, .06);
    --b3-theme-error: #d23f31;

    /* 文字颜色 */
    --b3-theme-on-primary: #fff;
    --b3-theme-on-secondary: #fff;
    --b3-theme-on-background: #0b0b0b;
    --b3-theme-on-surface: #191919;
    --b3-theme-on-surface-light: rgba(27, 27, 27, 0.68);
    --b3-theme-on-error: #fff;

    /* 字体 */
    --b3-font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
    --b3-font-family-code: "JetBrainsMono-Regular", mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
    --b3-font-family-graph: mononoki;
    --b3-font-family-emoji: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji";
    --b3-font-family-math: KaTeX_Math;

    /* 顶部工具栏 */
    --b3-toolbar-background: #2b2d30;
    --b3-toolbar-blur-background: #373a41;
    --b3-toolbar-color: #e1e1e1;
    --b3-toolbar-hover: #383a42;
    --b3-toolbar-left-mac: 69px;

    /* 线条 */
    --b3-border-color: rgba(0, 0, 0, 0.623);

    /* 滚动条 */
    --b3-scroll-color: rgba(0, 0, 0, .2);

    /* 列表 */
    /* 大纲当前位置处于的项的颜色*/
    --b3-list-hover: #8dafad50;
    /* 大纲当前位置处于的项的 后续图标被放上鼠标的颜色*/
    --b3-list-icon-hover: rgba(222, 124, 163, 0.548);

    /* 菜单 */
    --b3-menu-background: #f8f9fa;

    /* 提示 */
    --b3-tooltips-color: rgba(0, 0, 0, 0.54);

    /* 遮罩 */
    --b3-mask-background: rgba(0, 0, 0, 0.78);

    /* 卡片背景 */
    --b3-card-error-color: rgb(97, 26, 21);
    --b3-card-error-background: #f5d1cf;
    --b3-card-warning-color: rgb(102, 60, 0);
    --b3-card-warning-background: #ffe8c8;
    --b3-card-info-color: rgb(13, 60, 97);
    --b3-card-info-background: #d6eaf9;
    --b3-card-success-color: rgb(30, 70, 32);
    --b3-card-success-background: #d7eed8;

    /* 自定义文字 */
    --b3-font-color1: var(--b3-card-error-color);
    --b3-font-color2: var(--b3-card-warning-color);
    --b3-font-color3: var(--b3-card-info-color);
    --b3-font-color4: var(--b3-card-success-color);
    --b3-font-color5: var(--b3-theme-on-surface);
    --b3-font-color6: var(--b3-theme-primary);
    --b3-font-color7: var(--b3-theme-secondary);
    --b3-font-color8: var(--b3-theme-error);
    --b3-font-color9: #f5539e;
    --b3-font-color10: #944194;
    --b3-font-color11: #65b84d;
    --b3-font-color12: #f5822e;
    --b3-font-color13: var(--b3-theme-background);
    --b3-font-background1: var(--b3-card-error-background);
    --b3-font-background2: var(--b3-card-warning-background);
    --b3-font-background3: var(--b3-card-info-background);
    --b3-font-background4: var(--b3-card-success-background);
    --b3-font-background5: #e2e3e4;
    --b3-font-background6: #acd0fc;
    --b3-font-background7: #fdeed6;
    --b3-font-background8: rgba(255, 193, 153, 0.5);
    --b3-font-background9: #fdd5e7;
    --b3-font-background10: #e6c7e6;
    --b3-font-background11: #def0d9;
    --b3-font-background12: rgba(253, 198, 200, 0.5);
    --b3-font-background13: var(--b3-theme-on-background);

    /* 动画效果 */
    --b3-transition: all .2s cubic-bezier(0, 0, .2, 1) 0ms;
    --b3-width-transition: width .2s cubic-bezier(0, 0, .2, 1) 0ms;

    /* 下拉菜单 */
    --b3-select-background: url("data:image/svg+xml;utf8,<svg fill='rgba(95, 99, 104, .68)' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") no-repeat right 2px center var(--b3-theme-background);

    /* 阴影 */
    --b3-point-shadow: 0 3px 6px rgba(140, 149, 159, 0.15);
    --b3-dialog-shadow: 0 8px 24px rgba(140, 149, 159, 0.2);
    --b3-button-shadow: 0px 5px 5px -3px rgb(0 0 0 / 0.2), 0px 8px 10px 1px rgb(0 0 0 / 0.14), 0px 3px 14px 2px rgb(0 0 0 / 0.12);

    /* 图表颜色 */
    --b3-graph-p-point: #076f7e;
    --b3-graph-heading-point: #8250df;
    --b3-graph-math-point: #80FFA5;
    --b3-graph-code-point: #00DDFF;
    --b3-graph-table-point: #37A2FF;
    --b3-graph-list-point: #FF0087;
    --b3-graph-todo-point: #FFBF00;
    --b3-graph-olist-point: #b3005f;
    --b3-graph-listitem-point: #f65b00;
    --b3-graph-bq-point: #8d48e3;
    --b3-graph-super-point: #dd79ff;
    --b3-graph-doc-point: #202124;
    --b3-graph-tag-point: #dbf32f;
    --b3-graph-asset-point: #05c091;
    --b3-graph-line: #5f6368;
    --b3-graph-ref-line: #d23f31;
    --b3-graph-tag-line: #5f6b06;
    --b3-graph-tag-tag-line: #dbf32f;
    --b3-graph-asset-line: #037457;
    --b3-graph-hl-point: #f3a92f;
    --b3-graph-hl-line: #4285f4;

    /* 编辑器搜索颜色 */
    --b3-protyle-search-background: #ffe955;
    --b3-protyle-search-border-color: #f2e680;
    --b3-protyle-search-current-background: #a5d3fe;

    /* 行内代码背景 */
    --b3-protyle-code-background: rgba(215, 163, 111, 0.374);
    /*--b3-protyle-code-background: rgba(137, 195, 80, 0.384);*/
    --b3-protyle-code-linenumber-hl: #b9d1f4;

    /* 所见即所得行内元素颜色 */
    /* 加粗 */
    --b3-protyle-inline-strong-color: #da2727;
    --b3-protyle-inline-em-color: #202124;
    --b3-protyle-inline-s-color: #202124;
    --b3-protyle-inline-link-color: #3475dd;
    --b3-protyle-inline-mark-background: rgb(228, 179, 74);
    --b3-protyle-inline-mark-color: #202124;
    --b3-protyle-inline-tag-color: #5f6368;
    --b3-protyle-inline-blockref-color: #6d29eb;
    --b3-protyle-inline-fileref-color: #21862e;

    /* PDF */
    --b3-pdf-selection: #d0e9c8;
    --b3-pdf-sidebar-width: 200px;
    --b3-pdf-offset: 0;
    --b3-pdf-background1: var(--b3-theme-error);
    --b3-pdf-background2: #f5822e;
    --b3-pdf-background3: var(--b3-theme-secondary);
    --b3-pdf-background4: #65b84d;
    --b3-pdf-background5: #f5539e;
    --b3-pdf-background6: var(--b3-theme-primary);
    --b3-pdf-background7: #944194;
    --b3-pdf-dark: #212224;
}

/* https://github.com/siyuan-note/siyuan/issues/6440 */
.protyle-action--order:after {
    mix-blend-mode: multiply;
}

.b3-typography div.hljs, .protyle-wysiwyg div.hljs {
    background-color: #f8f9fa;
}

  • 思源笔记

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

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

    22337 引用 • 89378 回帖

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • wolai

    我来 wolai:不仅仅是未来的云端笔记!

    2 引用 • 14 回帖
  • OpenShift

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

    14 引用 • 20 回帖 • 633 关注
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖
    用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力:

    • 遵守开源守则,体现开源&贡献精神:以分享为目的,拒绝非法牟利。
    • 自我保护:使用适当的 License 保护自己的原创作品。
    • 尊重他人:不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露;以礼相待,尊重所有对社区做出贡献的开发者;通过他人的分享习得知识,要留下足迹,表示感谢。
    • 热爱编程、热爱学习:加入组织,热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友,也同样欢迎默默成就的朋友。
    • 倾听:正确并恳切对待、处理问题与建议,及时修复开源项目的 Bug ,及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视:不诋毁、轻视、嘲讽其他开发者,主动提出建议、施以帮助,以和谐为本。只要他人肯努力,你也可能会被昔日小看的人所超越,所以请保持谦虚。
    • 乐观且活跃:你的努力决定了你的高度。不要放弃,多年后回头俯瞰,才会发现自己已经成就往日所仰望的水平。积极地将项目开源,帮助他人学习、改进,自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    117 引用 • 99 回帖 • 211 关注
  • SQLServer

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

    21 引用 • 31 回帖
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 611 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖
  • 学习

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

    169 引用 • 506 回帖
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 65 回帖 • 437 关注
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”,乌云众测平台认证的“安全云”,为移动时代的创业者提供新一代的 CDN 加速服务。

    21 引用 • 37 回帖 • 545 关注
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    407 引用 • 1246 回帖 • 582 关注
  • etcd

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

    5 引用 • 26 回帖 • 528 关注
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    567 引用 • 3532 回帖
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 595 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    107 引用 • 295 回帖
  • JSON

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

    52 引用 • 190 回帖
  • WebComponents

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

    1 引用
  • 百度

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

    63 引用 • 785 回帖 • 175 关注
  • Chrome

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

    62 引用 • 289 回帖 • 1 关注
  • IPFS

    IPFS(InterPlanetary File System,星际文件系统)是永久的、去中心化保存和共享文件的方法,这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    21 引用 • 245 回帖 • 241 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 22 关注
  • sts
    2 引用 • 2 回帖 • 196 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    85 引用 • 139 回帖 • 1 关注
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    12 引用 • 54 回帖 • 165 关注
  • 周末

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

    14 引用 • 297 回帖
  • Eclipse

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

    75 引用 • 258 回帖 • 617 关注
  • 微服务

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

    96 引用 • 155 回帖 • 1 关注