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

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

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

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

  • 思源笔记

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

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

    22023 引用 • 87833 回帖 • 3 关注

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖 • 1 关注
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 52 关注
  • OpenResty

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

    17 引用 • 47 关注
  • CSS

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

    197 引用 • 547 回帖
  • JVM

    JVM(Java Virtual Machine)Java 虚拟机是一个微型操作系统,有自己的硬件构架体系,还有相应的指令系统。能够识别 Java 独特的 .class 文件(字节码),能够将这些文件中的信息读取出来,使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖 • 1 关注
  • C++

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

    107 引用 • 153 回帖 • 3 关注
  • 小说

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

    28 引用 • 108 回帖
  • etcd

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

    5 引用 • 26 回帖 • 526 关注
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • 分享

    有什么新发现就分享给大家吧!

    247 引用 • 1792 回帖 • 7 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 32 关注
  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖 • 1 关注
  • Google

    Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖 • 1 关注
  • ngrok

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

    7 引用 • 63 回帖 • 622 关注
  • 微软

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

    8 引用 • 44 回帖
  • gRpc
    11 引用 • 9 回帖 • 61 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 388 关注
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 584 关注
  • OpenShift

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

    14 引用 • 20 回帖 • 624 关注
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 621 关注
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖
  • Android

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

    334 引用 • 323 回帖
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 124 关注