实在喜欢 Bear 的玛奇朵主题,花 10 分钟改了个思源配色

本贴最后更新于 200 天前,其中的信息可能已经时异事殊

CleanShot20241216at7.04.07.png

在默认的深色主题基础上花十来分钟简单修改了一下,参照的是 Bear 的玛奇朵配色。

由于个人使用笔记的场景比较简单,所以未经充分测试。

主题的完整 CSS 放下面,感兴趣的同学自取。(除配色之外,里面还包含了很多个人自定义设置,不需要的部分注释掉即可)

theme.css

:root { /* 主色 */ --b3-theme-primary: #C6A0F6; --b3-theme-primary-light: rgba(198, 160, 246, 0.8); --b3-theme-primary-lighter: rgba(198, 160, 246, 0.68); --b3-theme-primary-lightest: rgba(198, 160, 246, 0.4); --b3-theme-secondary: #8aadf4; --b3-theme-background: #24273a; --b3-theme-background-light: rgba(255, 255, 255, .075); --b3-theme-surface: #1e2030; --b3-theme-surface-light: #1e2030; --b3-theme-surface-lighter: rgba(230, 230, 230, .06); --b3-theme-error: #d23f31; --b3-theme-success: #36cea1; /* 文字颜色 */ --b3-theme-on-primary: #cad3f5; --b3-theme-on-secondary: #cad3f5; --b3-theme-on-background: #cad3f5; --b3-theme-on-surface: #cad3f5; --b3-theme-on-surface-light: #cad3f5; --b3-theme-on-error: #cad3f5; /* 字体 */ --b3-font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Segoe UI", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; --b3-font-family-protyle: var(--b3-font-family); --b3-font-family-code: "JetBrainsMono-Regular", mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, var(--b3-font-family); --b3-font-family-graph: arial; --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-font-size: 14px; /* 顶部工具栏 */ --b3-toolbar-background: var(--b3-theme-surface); --b3-toolbar-blur-background: var(--b3-border-color); --b3-toolbar-color: var(--b3-theme-on-surface); --b3-toolbar-hover: var(--b3-theme-background-light); --b3-toolbar-left-mac: 69px; /* 线条 */ --b3-border-color: #494d64; --b3-border-radius: 6px; --b3-border-radius-b: 12px; /* 滚动条 */ --b3-scroll-color: rgba(230, 230, 230, .2); /* 列表 */ --b3-list-hover: rgba(255, 255, 255, .075); --b3-list-icon-hover: rgba(201, 209, 217, .1); /* 菜单 */ --b3-menu-background: var(--b3-theme-surface); /* 提示 */ --b3-tooltips-background: #1e2030; --b3-tooltips-color: var(--b3-theme-on-surface-light); --b3-tooltips-second-color: rgba(73, 77, 100, 1); --b3-tooltips-shadow: 0 2px 8px rgba(73, 77, 100, .3); /* 为空提示 */ --b3-empty-color: var(--b3-theme-on-surface); /* 遮罩 */ --b3-mask-background: rgba(73, 77, 100, .4); /* 卡片背景 */ --b3-card-error-color: rgb(243, 153, 147); --b3-card-error-background: #442724; --b3-card-warning-color: rgb(255, 213, 153); --b3-card-warning-background: #554636; --b3-card-info-color: rgb(166, 213, 250); --b3-card-info-background: #28405c; --b3-card-success-color: rgb(183, 223, 185); --b3-card-success-background: #425347; /* 自定义文字 */ --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: #bc67bc; --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: #4c5257; --b3-font-background6: #0c3d88; --b3-font-background7: #593905; --b3-font-background8: #541812; --b3-font-background9: #6a0634; --b3-font-background10: #6b2f6b; --b3-font-background11: #376629; --b3-font-background12: #803a06; --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-color-transition: color .2s cubic-bezier(0, 0, .2, 1) 0ms; --b3-background-transition: background 20ms ease-in 0s; /* 高亮 */ --b3-highlight-color: #222; --b3-highlight-background: #ffff00; --b3-highlight-current-background: #ff9632; /* 下拉菜单 */ --b3-select-background: url("data:image/svg+xml;utf8,<svg fill='rgba(154, 160, 166, .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); /* switch */ --b3-switch-background: #444746; --b3-switch-border: var(--b3-theme-on-surface-light); --b3-switch-hover: rgba(253, 252, 251, .10); --b3-switch-checked: var(--b3-theme-primary); --b3-switch-checked-background: #a8c7fa; --b3-switch-checked-hover: var(--b3-theme-primary); --b3-switch-checked-hover2: rgba(253, 252, 251, .10); /* 阴影 */ --b3-point-shadow: inset 0 .5px .5px .5px rgba(255, 255, 255, .09), 0 3px 6px rgba(0, 0, 0, .04), 0 0 0 0 transparent; --b3-dialog-shadow: 0 8px 24px #010409; --b3-button-shadow: 0 5px 5px -3px rgb(0 0 0 / .2), 0 8px 10px 1px rgb(0 0 0 / .14), 0 3px 14px 2px rgb(0 0 0 / .12); /* 图表颜色 */ --b3-graph-p-point: #076f7e; --b3-graph-heading-point: hsl(254, 80%, 74.8%); --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: #e8eaed; --b3-graph-tag-point: #dbf32f; --b3-graph-asset-point: #05c091; --b3-graph-line: #9aa0a6; --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: #32593c; --b3-protyle-search-border-color: #486a51; --b3-protyle-search-current-background: #204282; /* 代码片段背景 */ --b3-protyle-code-background: rgba(240, 246, 252, .15); /* 所见即所得行内元素颜色 */ --b3-protyle-inline-strong-color: inherit; --b3-protyle-inline-em-color: inherit; --b3-protyle-inline-u-color: inherit; --b3-protyle-inline-s-color: inherit; --b3-protyle-inline-link-color: #c6a0f6; --b3-protyle-inline-mark-background: rgba(255, 208, 0, .4); --b3-protyle-inline-mark-color: var(--b3-theme-on-background); --b3-protyle-inline-tag-color: #9aa0a6; --b3-protyle-inline-blockref-color: #8957e5; --b3-protyle-inline-fileref-color: var(--b3-theme-secondary); /* PDF */ --b3-pdf-selection: #779170; --sidebar-width: 200px; --b3-pdf-offset: 0; --b3-pdf-background1: var(--b3-theme-error); --b3-pdf-background2: #f5822e; --b3-pdf-background3: #FACA5A; --b3-pdf-background4: #7CC868; --b3-pdf-background5: #FC5C88; --b3-pdf-background6: #69B0F2; --b3-pdf-background7: #C885DA; --b3-pdf-dark: #212224; /* 表格 */ --b3-table-even-background: rgba(255, 255, 255, .03); /* 嵌入块 */ --b3-embed-background: transparent; /* 引述块 */ --b3-bq-background: transparent; /* 父块颜色 */ --b3-parent-background: var(--b3-theme-background); } :lang(ja_JP):root { --b3-font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans", "Yu Gothic UI", "Segoe UI", sans-serif, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; } /* https://github.com/siyuan-note/siyuan/issues/6440 */ .protyle-action--order::after { mix-blend-mode: screen; } .b3-text-field::-webkit-calendar-picker-indicator { filter: invert(1) } /* 自定义修改 —————————————————————————————————————————————————————————————— */ /* 隐藏UI区块之间的分隔线 */ .layout-tab-bar { border-bottom: none; } .layout__resize--lr:after { top: 0; width: 0; left: 0; height: 0; } .toolbar { border-bottom: none; } .dock#dockLeft { border-right: none; } .dock#dockRight { border-left: none; } .status { border-top: none; } /* 去掉文字平滑 */ body { -webkit-font-smoothing: auto; } /* 文档树图标去除圆角 */ .b3-list-item__icon svg, .b3-list-item__icon img { border-radius: 0; } /* 增加填充边距 */ .protyle-wysiwyg .hljs { padding-left: 20px; } /* 隐藏不需要的边栏入口 */ span[data-title="关系图"], span[data-title="全局关系图"], span[data-title="书签"], span[data-title="收集箱"]{ display: none; } /*引用块强调色*/ .b3-typography blockquote::before, .b3-typography .bq::before, .protyle-wysiwyg blockquote::before, .protyle-wysiwyg .bq::before { content: ""; background-color: #8AADF4; width: .25em; border-radius: var(--b3-border-radius); position: absolute; left: 2px; top: 6px; bottom: 6px; } /*分割线颜色*/ .protyle-wysiwyg [data-node-id].hr>div:after { background-color: #494D64; height: 2px; } /* 修改标题大小和颜色 */ .b3-typography .h3, .b3-typography h3, .protyle-wysiwyg .h3, .protyle-wysiwyg h3 { font-size: 1.2em; } .b3-typography .h4, .b3-typography h4, .protyle-wysiwyg .h4, .protyle-wysiwyg h4 { font-size: 1em; } .b3-typography .h5, .b3-typography h5, .protyle-wysiwyg .h5, .protyle-wysiwyg h5 { font-size: 0.95em; } .b3-typography .h6, .b3-typography h6, .protyle-wysiwyg .h6, .protyle-wysiwyg h6 { font-size: 0.85em; } [data-subtype^="h"] { color: #8bd5ca; } .protyle-title__input { color: #8bd5ca; } /*菜单切换按钮样式*/ .b3-switch:checked { background-color: var(--b3-switch-background); border: 1px solid var(--b3-switch-checked); } /*侧边栏按钮聚焦样式*/ .dock__item--activefocus { background-color: var(--b3-theme-background-light) !important; } /* 标签样式 */ .b3-chip--pointer { opacity: 1; } .protyle-background>.b3-chips { justify-content: center; } .b3-chips>.b3-chip { background-color: #494D64 !important; color: #cad3f5 !important; font-size: 12px; font-weight: 600; } .b3-chip { border-radius: 6px; } .protyle-wysiwyg [data-node-id] span[data-type~=tag] { border-bottom: none; color: #cad3f5; background-color: #494D64; padding: 3px 6px; border-radius: 6px; cursor: pointer; font-size: 12px !important; font-weight: 600; } .protyle-wysiwyg[data-readonly=false] span[data-type~=tag]:hover { background-color: #494D64; }

theme.json

{ "name": "darkpro", "author": "", "url": "", "version": "1.0.0", "modes": [ "dark" ] }
  • 思源笔记

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

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

    26195 引用 • 108829 回帖 • 1 关注

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • iOS

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

    89 引用 • 150 回帖 • 3 关注
  • 叶归
    12 引用 • 56 回帖 • 23 关注
  • 房星科技

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

    6 引用 • 141 回帖 • 606 关注
  • 浅吟主题

    Jeffrey Chen 制作的思源笔记主题,项目仓库:https://github.com/TCOTC/Whisper

    1 引用 • 28 回帖
  • OpenCV
    15 引用 • 36 回帖 • 1 关注
  • RESTful

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

    30 引用 • 114 回帖 • 3 关注
  • Anytype
    3 引用 • 31 回帖 • 27 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1432 回帖
  • OnlyOffice
    4 引用 • 18 关注
  • RemNote
    2 引用 • 16 回帖 • 24 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    77 引用 • 37 回帖
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    16 引用 • 236 回帖 • 243 关注
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 443 关注
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 1 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    59 引用 • 22 回帖 • 9 关注
  • 知乎

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

    10 引用 • 66 回帖
  • JWT

    JWT(JSON Web Token)是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准(RFC 7519),定义了一种简洁的,自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 25 关注
  • H2

    H2 是一个开源的嵌入式数据库引擎,采用 Java 语言编写,不受平台的限制,同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式,可以兼容一些主流的数据库,因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 671 关注
  • 分享

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

    248 引用 • 1794 回帖
  • Visio
    1 引用 • 2 回帖
  • NetBeans

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

    78 引用 • 102 回帖 • 709 关注
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 312 关注
  • Office

    Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用(如 Word、Excel 和 PowerPoint)与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起,可帮助你在任何设备上完成操作。

    5 引用 • 34 回帖 • 1 关注
  • 旅游

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

    99 引用 • 903 回帖
  • abitmean

    有点意思就行了

    36 关注
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    188 引用 • 319 回帖 • 240 关注
  • GAE

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

    14 引用 • 42 回帖 • 823 关注