在默认的深色主题基础上花十来分钟简单修改了一下，参照的是 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" ] }
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于