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

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

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

: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;
}

  • 思源笔记

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

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

    19189 引用 • 72262 回帖

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    6693 引用 • 30045 回帖 • 243 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    122 引用 • 73 回帖 • 3 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 381 关注
  • 电影

    这是一个不能说的秘密。

    120 引用 • 597 回帖
  • etcd

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

    5 引用 • 26 回帖 • 497 关注
  • Hprose

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

    9 引用 • 17 回帖 • 605 关注
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    51 引用 • 226 回帖
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    182 引用 • 451 回帖
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 698 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 2 关注
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 634 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 7 关注
  • 微软

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

    8 引用 • 44 回帖
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    90 引用 • 383 回帖
  • 30Seconds

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

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

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 601 关注
  • IDEA

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

    180 引用 • 400 回帖
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    284 引用 • 247 回帖 • 166 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    331 引用 • 614 回帖
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 453 关注
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    918 引用 • 931 回帖
  • 反馈

    Communication channel for makers and users.

    123 引用 • 906 回帖 • 202 关注
  • GraphQL

    GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。GraphQL 并没有和任何特定数据库或者存储引擎绑定,而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 23 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 684 关注
  • HTML

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

    103 引用 • 294 回帖 • 1 关注
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff)、语法高亮、全面的帮助系统、本地脚本(Vimscript)和便于选择的可视化模式。

    27 引用 • 66 回帖 • 1 关注