├── README.md ├── base.css ├── palette ├── autumn.css ├── blue.css ├── cyan.css ├── dark.css ├── green.css ├── light.css ├── spring.css ├── tonight.css ├── winter.css └── yinxiang.css ├── preview.png ├── src ├── bg.jpg └── iconTriangle.svg ├── theme.css └── theme.json /README.md: -------------------------------------------------------------------------------- 1 | # Toy 思源笔记主题 2 | 3 | ![preview](https://raw.githubusercontent.com/langzhou/toy-theme-for-siyuan/main/preview.png) 4 | 5 | 这是一款「玩具」主题，将页面布局和配色分离，通过简单的配置即可快速实现多种主题样式效果。 6 | 7 | 目前支持的配置： 8 | - 独立的配色文件 9 | - 全屏下自动隐藏顶部工具栏 10 | - 设置左边栏背景色 11 | - 设置左边栏背景图 12 | - 全局毛玻璃效果 13 | - 多种页签栏样式 14 | 15 | ### 使用方法 16 | 将`theme.css`中的`@import url("palette/XXX.css")`中的XXX.css 替换成其他的配色文件，目前已提供以下配色文件： 17 | - yinxiang.css：仿照印象笔记配色，会自动隐藏顶栏 18 | - blue.css：蓝色暗调 19 | - cyan.css：兰色暗调 20 | - light.css：亮色配色模板，可修改此文件创建自己的配色方案 21 | - dark.css：深色配色模板，可修改此文件创建自己的配色方案 22 | - green.css：护眼主题 23 | - 四季主题：spring.css、autumn.css、winter.css -------------------------------------------------------------------------------- /base.css: -------------------------------------------------------------------------------- 1 | /******* Theme for SiYuan Note ************ 2 | 1. 本样式仅在16px字号设置下进行有限场景的测试，不能保证所有页面均完美呈现。如果遇到相关功能或样式问题，请重置为官方主题后再确认问题是否重现。 3 | 2. 标注为「实验功能」的部分请谨慎开启使用。 4 | /****************************************/ 5 | 6 | 7 | /************** 一、页面框架与控件 ***********************/ 8 | 9 | /**** 顶部工具栏 toolbar ****/ 10 | .toolbar{ 11 | background-color: var(--dock-background); 12 | border-bottom: var(--dock-border); 13 | } 14 | /**** 实验功能：全屏下自动隐藏顶部工具栏 **** 15 | 1）需要将 min-height 和 min-width 设置成自己电脑全屏时的分辨率 16 | 2）如果需要鼠标悬浮时显示，请将.toolbar{height:0px;}设置为一个较小的高度值，如 8px 17 | **** 18 | @media only screen and (min-height: 900px) and (min-width: 1440px) 19 | { 20 | .toolbar{ height: 0px; transition: height 400ms ease 0s; } 21 | .toolbar > div{ visibility: hidden; } 22 | .toolbar:hover{ height: 30px; transition: height 400ms ease 0s; } 23 | .toolbar:hover >div{ visibility: visible; } 24 | } 25 | /**** 实验功能代码结束 ****/ 26 | 27 | /**** 停靠栏 dock ****/ 28 | #dockLeft, #dockRight, #dockTop, #dockBottom{ background-color: var(--dock-background); } 29 | #dockLeft { border-right: var(--dock-border); } 30 | #dockRight { border-left: var(--dock-border); } 31 | #dockTop { border-bottom: var(--dock-border); } 32 | #dockBottom { border-top: var(--dock-border); } 33 | 34 | /**** 边栏 column ****/ 35 | /* 边栏面板 */ 36 | 37 | /* 边栏标题栏 */ 38 | .block__icons{ 39 | /* background-color: var(--b3-theme-surface); 40 | color: var(--b3-theme-on-surface); */ 41 | } 42 | /* 边栏列表项 */ 43 | .b3-list-item, .b3-list-item__text{ 44 | color: var(--b3-theme-on-surface); 45 | } 46 | .file-tree [data-type="navigation-file"] .b3-list-item__text{ 47 | opacity: 1; 48 | } 49 | /* 边栏搜索 */ 50 | .search__label .b3-form__icon-input{ 51 | background-color: var(--b3-theme-surface); 52 | } 53 | /* 边栏分割线 */ 54 | .layout__resize--lr:after{ 55 | background-color: var(--column-border); 56 | } 57 | 58 | 59 | /* 左边栏 */ 60 | /**** 实验功能：左边栏背景色 **** 61 | 1）在配色文件中设置背景色及文字颜色 62 | 2）需要关闭左边栏背景图及毛玻璃效果 63 | *****/ 64 | .fn__flex-shrink, .fn__flex-shrink .block__icons{ 65 | background-color: var(--left-sidebar-background); 66 | color: var(--left-sidebar-color); 67 | } 68 | .fn__flex-shrink .b3-list-item__text,.fn__flex-shrink .b3-list-item__graphic,.toolbar__item, .dock__item{ 69 | color: var(--left-sidebar-color); 70 | } 71 | .fn__flex-shrink div{ background: transparent;} 72 | /**** 左边栏背景色 代码结束 ****/ 73 | 74 | /**** 实验功能：开启左边栏背景图 **** 75 | 1）需要在配色文件中设置背景图 76 | 2）需要关闭左边栏背景色及毛玻璃效果 77 | **** 78 | body{ 79 | background-image: var(--background-image); 80 | background-position: center top; 81 | background-size: cover; 82 | } 83 | .toolbar,#dockLeft, #dockRight, #dockTop, #dockBottom{ 84 | background: transparent; 85 | } 86 | .fn__flex-shrink div{ 87 | background: transparent; 88 | } 89 | .fn__flex-shrink { 90 | position: relative; 91 | overflow: hidden; 92 | z-index: 2; 93 | box-sizing: border-box; 94 | } 95 | .fn__flex-shrink::before{ 96 | content: ''; 97 | position: absolute; 98 | top: 0; left: 0; right: 0; bottom: 0; 99 | -webkit-filter: blur(var(--blur-value)); 100 | -moz-filter: blur(var(--blur-value)); 101 | -ms-filter: blur(var(--blur-value)); 102 | -o-filter: blur(var(--blur-value)); 103 | filter: blur(var(--blur-value)); 104 | z-index: -3; 105 | background-image: var(--background-image); 106 | background-position: center top; 107 | background-size: cover; 108 | background-attachment: fixed; 109 | } 110 | 111 | #layouts > .fn__flex-1 > .fn__flex-column ::-webkit-scrollbar{ width: 6px;} 112 | #layouts > .fn__flex-1 > .fn__flex-column ::-webkit-scrollbar-thumb{ background-color: rgba(23, 155, 147, 0.13);} 113 | #layouts > .fn__flex-1 > .fn__flex-column ::-webkit-scrollbar-thumb:hover{ background-color: rgba(20, 20, 20, 0.13);} 114 | /*********** 开启左边栏背景图 代码结束 ***********/ 115 | 116 | /**** 反链面板 ****/ 117 | 118 | /**** 关系图 ****/ 119 | 120 | 121 | /**** 菜单 ****/ 122 | /* 右键菜单 */ 123 | .b3-menu{ 124 | padding: 10px 0px; 125 | } 126 | /* 菜单项 */ 127 | .b3-menu__item{ 128 | padding: 4px 16px 4px 16px; 129 | color: var(--b3-theme-on-surface); 130 | } 131 | /* 菜单分割线 */ 132 | .b3-menu__separator{ 133 | height: 1px; 134 | margin: 6px 0; 135 | } 136 | /* 菜单项选中状态 */ 137 | .b3-menu__item:hover:not(.b3-menu__item--readonly):not(.b3-menu__item--custom), .b3-menu__item--current{ 138 | border-radius: 0px; 139 | } 140 | .b3-menu__item:hover:not(.b3-menu__item--readonly):not(.b3-menu__item--custom)>.b3-menu__label, .b3-menu__item:hover:not(.b3-menu__item--readonly):not(.b3-menu__item--custom)>.b3-menu__accelerator, .b3-menu__item:hover:not(.b3-menu__item--readonly):not(.b3-menu__item--custom)>.b3-menu__icon, .b3-menu__item--current>.b3-menu__label, .b3-menu__item--current>.b3-menu__accelerator, .b3-menu__item--current>.b3-menu__icon{ 141 | color: var(--b3-theme-on-background); 142 | } 143 | 144 | /*二级菜单*/ 145 | .b3-menu__submenu{ 146 | box-shadow: var(--b3-point-shadow); 147 | margin: 2px; 148 | border: none !important; 149 | border-radius: 4px !important; 150 | } 151 | /* 菜单中文字描述 */ 152 | .b3-menu__item--readonly{ 153 | line-height: 1.7em; 154 | } 155 | 156 | /* 字体样式设置弹框：调大间距，增大按钮 */ 157 | .protyle-font div{ 158 | padding: 4px 0; 159 | } 160 | .b3-color__square{ 161 | margin-right: 6px; 162 | height: 22px; 163 | width: 22px; 164 | line-height: 22px; 165 | border-radius: 2px; 166 | } 167 | .b3-text-filed[readonly]{ 168 | border: none; 169 | } 170 | 171 | /**** Switch 开关 ****/ 172 | /* 未开启状态 */ 173 | .b3-switch:after{ 174 | background-color: var(--switch-uncheck-color); 175 | border-color: var(--switch-uncheck-color); 176 | } 177 | /**** 弹框 ****/ 178 | /* 弹出设置框，如超级链接设置 */ 179 | .protyle-util{ 180 | padding: 10px; 181 | } 182 | 183 | /**** 反链浮窗 ****/ 184 | /* 实验功能：优化反链浮窗面板的显示样式 */ 185 | .block__popover .protyle-breadcrumb:hover .protyle-breadcrumb__item,.block__popover .protyle-breadcrumb:hover .protyle-breadcrumb__arrow{ 186 | opacity: 1; /*悬浮时显示完整面包屑*/ 187 | transition: var(--common-transition); 188 | } 189 | .block__popover .protyle-breadcrumb__item:not(:first-child),.block__popover .protyle-breadcrumb__arrow:not(:first-child){ 190 | opacity: 0; 191 | } 192 | .block__popover .protyle-breadcrumb__item:first-child{ 193 | font-weight: bold; /*文件名加粗*/ 194 | } 195 | 196 | /*弱化右侧三点菜单图标*/ 197 | .block__popover .protyle-breadcrumb .b3-tooltips svg{ 198 | opacity: 0.2; 199 | float: none; 200 | padding: 0; 201 | } 202 | /****** 实验功能结束 *******/ 203 | 204 | 205 | /********文档预览模式 ********/ 206 | /*预览工具栏*/ 207 | .protyle-preview__action{ 208 | background-color: var(--b3-theme-background); 209 | } 210 | .protyle-preview__action button{ 211 | padding: 5px 20px; 212 | font-weight: bold; 213 | border-radius: 100px; 214 | } 215 | 216 | /**** 滚动条 ****/ 217 | /* 通用滚动条 */ 218 | ::-webkit-scrollbar { width: 8px;} 219 | ::-webkit-scrollbar-thumb{ background-color:var(--b3-scroll-color); border-radius: 30px; } 220 | ::-webkit-scrollbar-thumb:hover{ background-color: var(--scrollbar-hover-background);} 221 | 222 | /* 边栏滚动条 */ 223 | #layouts>.fn__flex-1>.fn__flex-column ::-webkit-scrollbar{ width: 6px;} 224 | #layouts>.fn__flex-1>.fn__flex-column ::-webkit-scrollbar-thumb{ background-color: var(--column-scrollbar-background); } 225 | #layouts>.fn__flex-1>.fn__flex-column ::-webkit-scrollbar-thumb:hover{ background-color: var(--column-scrollbar-hover-background); } 226 | 227 | 228 | 229 | /************** 二、文档编辑区 **************************/ 230 | 231 | /**** 页签栏 ****/ 232 | /* 通用设置 */ 233 | .layout-tab-bar{ 234 | border-bottom: var(--dock-border); 235 | padding: 0; 236 | } 237 | /*清除页签栏边框对侧边栏的影响*/ 238 | .layout-tab-bar:empty{ 239 | border-bottom: none; 240 | } 241 | /* 清除标题过长时渐变效果 */ 242 | .layout-tab-bar .item__text::after,.layout-tab-bar .item--focus .item__text::after,.layout-tab-bar .item:hover:not(.item--focus) .item__text::after{ 243 | background: transparent; 244 | } 245 | /* 标题过长时...表示 */ 246 | .layout-tab-bar .item__text{ 247 | text-overflow:ellipsis; 248 | padding: 0 2px; 249 | } 250 | /* 隐藏关闭按钮，悬浮时展现 */ 251 | .layout-tab-bar .item__close{ 252 | opacity: 0; 253 | width: 0; 254 | height: 0; 255 | margin: 0; 256 | transition: all 300ms ease 0s; 257 | } 258 | .layout-tab-bar .item:hover .item__close{ 259 | opacity: 1; 260 | width: 8px; 261 | height: 8px; 262 | margin: 0 4px;; 263 | } 264 | /** 页签项包含3种样式，使用时需要注释另一种样式 **/ 265 | /* 样式 1：官方默认 266 | 需要将页签栏颜色设置为与背景色不同 267 | * 268 | .layout-tab-bar{ 269 | border: none; 270 | } 271 | .layout-tab-bar .item{ 272 | padding: 8px; 273 | } 274 | /* 样式 1 代码结束 */ 275 | 276 | /* 样式 2：下划线 277 | 需要将页签栏颜色设置为与背景色相同 278 | */ 279 | .layout-tab-bar .item{ 280 | padding: 0 8px; 281 | background-color: transparent; 282 | } 283 | .layout-tab-bar .item--focus .item__text{ 284 | border-color: var(--b3-theme-primary); 285 | opacity: 1; 286 | } 287 | .layout-tab-bar .item__text{ 288 | border-bottom: 2px solid transparent; 289 | padding: 8px; 290 | text-overflow:ellipsis; 291 | opacity: 0.6; 292 | } 293 | /* 样式 2 代码结束 */ 294 | 295 | /* 样式 3：圆点 * 296 | .layout-tab-bar{ 297 | border: none; 298 | padding-left: 10px; 299 | } 300 | .layout-tab-bar .item{ 301 | border-radius: 40px; 302 | margin: 6px 0px 4px 0px; 303 | padding: 4px; 304 | border-bottom: none; 305 | background: transparent; 306 | } 307 | .layout-tab-bar .item__text{ 308 | padding: 0 0 0 15px; 309 | color: var(--b3-theme-on-background); 310 | text-overflow:ellipsis; 311 | opacity: 0.6; 312 | } 313 | .layout__wnd--active .layout-tab-bar .item--focus .item__text{ 314 | color: var(--b3-theme-on-background); 315 | border-color: transparent; 316 | opacity: 1; 317 | } 318 | .layout-tab-bar .item__close{ 319 | margin-right: 10px !important; 320 | } 321 | 322 | .layout-tab-bar .item--focus .item__text::after{ 323 | background: transparent; 324 | background-color: #1295c9; 325 | position: absolute; 326 | width: 4px; 327 | height: 4px; 328 | border-radius: 4px; 329 | border: 1px solid var(--b3-theme-background); 330 | box-shadow: 0 0 1px 1px #1295c9; 331 | top: 8px; 332 | left: 4px; 333 | } 334 | .layout-tab-bar .item--unupdate.item--focus .item__text::after{ 335 | background-color: #2ba81a; 336 | border: 1px solid var(--b3-theme-background); 337 | box-shadow: 0 0 1px 1px #2ba81a; 338 | } 339 | .layout-tab-bar .item--unupdate.item--focus{ 340 | color: var(--b3-theme-on-background) !important; 341 | } 342 | .layout-tab-bar .item--unupdate{ 343 | font-style: normal; 344 | } 345 | /* 样式 3 代码结束 */ 346 | 347 | /**** 面包屑 ****/ 348 | .protyle-breadcrumb .fn__flex-shrink{ 349 | background-color: var(--b3-theme-background); 350 | } 351 | /* 设置编辑区的面包屑样式，浮窗中的面包屑不受影响 */ 352 | /* 样式 1：透明背景 * 353 | .layout__center .protyle-breadcrumb{ 354 | background: transparent; 355 | } 356 | .layout__center .protyle-breadcrumb__bar{ 357 | background-color: var(--b3-theme-surface); 358 | border-radius: 100px; 359 | padding: 4px 6px; 360 | } 361 | /* 样式 1 代码结束 */ 362 | 363 | /* 样式 2：非透明背景 * 364 | .layout__center .protyle-breadcrumb{ 365 | background: var(--b3-theme-background); 366 | } 367 | .layout__center .protyle-breadcrumb__bar{ 368 | background-color: var(--b3-theme-surface); 369 | border-radius: 100px; 370 | padding: 4px 6px; 371 | } 372 | /* 样式 2 代码结束 */ 373 | 374 | /**** 浮出工具栏 ****/ 375 | .protyle-toolbar{ 376 | border-radius: 30px; 377 | padding: 1px 10px; 378 | z-index: 100; 379 | } 380 | 381 | /**** 页面标题 ****/ 382 | 383 | /**** 头图 ****/ 384 | 385 | /**** 块图标 ****/ 386 | /* 减淡块图标颜色 */ 387 | .protyle-gutters svg { 388 | color: var(--b3-scroll-color); 389 | } 390 | /* 增加块图标悬浮时背景色 */ 391 | .protyle-gutters button:hover svg{ 392 | color: var(--b3-theme-primary); 393 | } 394 | .protyle-gutters button{ 395 | /* padding: 2px 0 0 0; 396 | width: 20px; 397 | height: 20px; 398 | border-radius: 3px; 399 | margin-left: 3px; 400 | line-height: 20px; */ 401 | /* background-color: var(--b3-theme-background); */ 402 | /* 强制块图标使用背景色，以避免在超级块等场景下显示不清楚 */ 403 | } 404 | .protyle-gutters:hover button { 405 | /* background-color: var(--gutters-hover-background); */ 406 | /* 采用非透明色，避免在超级块等场景下显示不清楚 */ 407 | } 408 | 409 | /* 调整设置行高后的块图标整体位置偏移 */ 410 | .protyle-gutters{ 411 | /* margin: 0.625em 0; */ 412 | } 413 | /**** 块属性 ****/ 414 | /* 将页面（标题）的属性移至左侧 */ 415 | .protyle-title .protyle-attr{ 416 | left: 0; 417 | } 418 | 419 | /* 自定义属性 */ 420 | /* 日期 */ 421 | [data-type="tag"][data-content^="@"]{ 422 | border-radius: 30px; 423 | background-color: var(--b3-border-color); 424 | padding: 1px 8px; 425 | border-bottom: none !important; 426 | font-size: 95%; 427 | } 428 | /* 待办事项 */ 429 | [custom-lz-todo] div[contenteditable="true"]::after{ 430 | padding:1px 8px; 431 | border-radius: 30px; 432 | font-size: 90%; 433 | margin:0 2px; 434 | } 435 | [custom-lz-todo="todo"]> div[contenteditable="true"]:first-child::after,[custom-lz-todo="todo"].li > .p div:first-child::after,[custom-lz-todo="todo"].list>.li:first-child> .p div:first-child::after{ 436 | content: "@todo"; 437 | background-color: var(--b3-card-info-background); 438 | color: var(--b3-card-info-color); 439 | } 440 | [custom-lz-todo="inbox"]> div[contenteditable="true"]:first-child::after,[custom-lz-todo="inbox"].li > .p div:first-child::after,[custom-lz-todo="inbox"].list>.li:first-child> .p div:first-child::after{ 441 | content: "@Inbox"; 442 | background-color: var(--b3-card-info-background); 443 | color: var(--b3-card-info-color); 444 | } 445 | [custom-lz-todo="someday"]> div[contenteditable="true"]:first-child::after,[custom-lz-todo="someday"].li > .p div:first-child::after,[custom-lz-todo="someday"].list>.li:first-child> .p div:first-child::after{ 446 | content: "@Someday"; 447 | background-color: var(--b3-card-info-background); 448 | color: var(--b3-card-info-color); 449 | } 450 | [custom-lz-todo="doing"]> div[contenteditable="true"]:first-child::after,[custom-lz-todo="doing"].li > .p div:first-child::after,[custom-lz-todo="doing"].list>.li:first-child> .p div:first-child::after{ 451 | content: "@Doing"; 452 | background-color: var(--b3-card-warning-background); 453 | color: var(--b3-card-warning-color); 454 | } 455 | [custom-lz-todo="done"]> div[contenteditable="true"]:first-child::after,[custom-lz-todo="done"].li > .p div:first-child::after,[custom-lz-todo="done"].list>.li:first-child> .p div:first-child::after{ 456 | content: "@Done"; 457 | background-color: var(--b3-card-success-background); 458 | color: var(--b3-card-success-color); 459 | } 460 | 461 | /* 优先级 */ 462 | [custom-lz-priority] div[contenteditable="true"]::before{ 463 | padding:1px 6px; 464 | border-radius: 3px; 465 | font-size: 90%; 466 | margin:0 2px; 467 | } 468 | [custom-lz-priority="P0"]> div[contenteditable="true"]:first-child::before,[custom-lz-priority="P0"].li > .p div:first-child::before,[custom-lz-priority="P0"].list>.li:first-child> .p div:first-child::before{ 469 | content: "P0"; 470 | background-color: var(--b3-card-error-background); 471 | color: var(--b3-card-error-color); 472 | } 473 | [custom-lz-priority="P1"]> div[contenteditable="true"]:first-child::before,[custom-lz-priority="P1"].li > .p div:first-child::before,[custom-lz-priority="P1"].list>.li:first-child> .p div:first-child::before{ 474 | content: "P1"; 475 | background-color: var(--b3-card-error-background); 476 | color: var(--b3-card-error-color); 477 | } 478 | [custom-lz-priority="P2"]> div[contenteditable="true"]:first-child::before,[custom-lz-priority="P2"].li > .p div:first-child::before,[custom-lz-priority="P2"].list>.li:first-child> .p div:first-child::before{ 479 | content: "P2"; 480 | background-color: var(--b3-card-warning-background); 481 | color: var(--b3-card-warning-color); 482 | } 483 | [custom-lz-priority="P3"]> div[contenteditable="true"]:first-child::before,[custom-lz-priority="P3"].li > .p div:first-child::before,[custom-lz-priority="P3"].list>.li:first-child> .p div:first-child::before{ 484 | content: "P3"; 485 | background-color: var(--b3-card-success-background); 486 | color: var(--b3-card-success-color); 487 | } 488 | 489 | 490 | /**** 全屏模式 ****/ 491 | /**** 预览模式 ****/ 492 | .protyle-preview__action{ 493 | background-color: var(--b3-theme-background); 494 | } 495 | .protyle-preview__action button{ 496 | padding: 5px 20px; 497 | font-weight: bold; 498 | border-radius: 100px; 499 | } 500 | .protyle-preview__action button.protyle-preview__action--current{ 501 | background-color: var(--b3-theme-primary); 502 | color: var(--b3-theme-surface); 503 | } 504 | 505 | /**** 其他 ****/ 506 | /* 大文件分页加载条 */ 507 | .protyle-scroll{ 508 | opacity: 0; 509 | transition: var(--page-scrollbar-transition); 510 | } 511 | .protyle-scroll:hover{ 512 | visibility: visible; 513 | opacity: 1; 514 | } 515 | 516 | /* 编辑器光标颜色 */ 517 | .protyle-wysiwyg{ 518 | caret-color:var(--b3-theme-primary); 519 | } 520 | /* 文本选中样式 */ 521 | .protyle-wysiwyg ::selection{ 522 | background-color: var(--text-selection-background); 523 | color: var(--text-selection-color); 524 | } 525 | /* 实验功能：清除鼠标划选区域*/ 526 | .protyle-select{ 527 | background-color: transparent; 528 | } 529 | 530 | /* 隐藏空白行的提示文字 */ 531 | .protyle-wysiwyg [data-node-id] [spellcheck="false"]:focus:empty:after { 532 | content: ''; 533 | } 534 | /************** 三、编辑器行内样式 ***********************/ 535 | 536 | /**** 双向链接、块引用 ****/ 537 | /* 样式一：下划线 */ 538 | .protyle-wysiwyg [data-node-id] span[data-type="block-ref"]{ 539 | border-bottom: 1px dashed var(--b3-theme-primary); 540 | padding: 2px 0; 541 | margin: 0px 2px; 542 | } 543 | .protyle-wysiwyg [data-node-id] span[data-type="block-ref"]:hover{ 544 | background-color: var(--b3-theme-primary-lightest); 545 | } 546 | /* 样式一 代码结束 */ 547 | 548 | /* 样式二：背景色 * 549 | .protyle-wysiwyg [data-node-id] span[data-type="block-ref"]{ 550 | border-bottom: none; 551 | background-color: var(--b3-theme-primary-lightest); 552 | padding: 1px 2px ; 553 | margin: 0px 2px; 554 | border-radius: 1px; 555 | } 556 | .protyle-wysiwyg [data-node-id] span[data-type="block-ref"]:hover{ 557 | background-color: var(--b3-theme-primary-lighter); 558 | } 559 | /* 样式二 代码结束 */ 560 | 561 | /**** 超级链接 ****/ 562 | .b3-typography a,.protyle-wysiwyg [data-node-id] span[data-type="a"]{ 563 | color: var(--b3-protyle-inline-link-color); 564 | margin: 0 1px; 565 | text-decoration: none; 566 | padding: 2px 0; 567 | } 568 | .b3-typography a:hover,.protyle-wysiwyg [data-node-id] span[data-type="a"]:hover{ 569 | /* border-bottom: 1px solid inherit; */ 570 | } 571 | 572 | 573 | 574 | /**** 粗体、斜体 ****/ 575 | /* 颜色卡片内的粗体继承卡片颜色 */ 576 | [style*="background-color"] strong, [style*="background-color"] em{ 577 | color: inherit; 578 | } 579 | 580 | /**** 下划线、删除线 ****/ 581 | [style*="background-color"] s{ 582 | color: inherit; 583 | } 584 | .protyle-wysiwyg u, .b3-typography u{ 585 | text-decoration: none; 586 | border-bottom: 1px solid var(--b3-theme-on-background); 587 | border-color: inherit; 588 | padding: 2px 0; 589 | } 590 | 591 | /**** 高亮 ****/ 592 | .b3-typography mark, .protyle-wysiwyg mark{ 593 | border-radius: 2px; 594 | padding: 1px 2px; 595 | } 596 | 597 | /**** 行内代码 ****/ 598 | .b3-typography code:not(.hljs), .protyle-wysiwyg code:not(.hljs){ 599 | font-size: 90%; 600 | margin: 0 1px; 601 | color: var(--inline-code-color); 602 | } 603 | 604 | /**** KBD ****/ 605 | .b3-typography kbd, .protyle-wysiwyg kbd{ 606 | font-size: 85%; 607 | margin: 0 1px; 608 | } 609 | 610 | /**** 数学公式 ****/ 611 | 612 | /**** 图片 ****/ 613 | .b3-typography img, .protyle-wysiwyg img{ 614 | border-radius: 4px; 615 | } 616 | 617 | /**** 标签 ****/ 618 | /* 红色标签 */ 619 | span[data-type="tag"][data-content="紧急"],span[data-type="tag"][data-content="高优先级"],span[data-type="tag"][data-content="待办"],span[data-type="tag"][data-content="重要"],span[data-type="tag"][data-content="高"],span[data-type="tag"][data-content="注意"],span[data-type="tag"][data-content="问题"]{ 620 | background-color: var(--b3-card-error-background); 621 | color: var(--b3-card-error-color) !important; 622 | border: none !important; 623 | font-size: 90%; 624 | padding: 0 4px; 625 | margin: 0 2px; 626 | border-radius: 2px; 627 | } 628 | /* 橙色标签 */ 629 | span[data-type="tag"][data-content="TODO"],span[data-type="tag"][data-content="todo"],span[data-type="tag"][data-content="待办"],span[data-type="tag"][data-content="中"],span[data-type="tag"][data-content="中优先级"],span[data-type="tag"][data-content="NOTE"],span[data-type="tag"][data-content="提示"]{ 630 | background-color: var(--b3-card-warning-background); 631 | color: var(--b3-card-warning-color) !important; 632 | border: none !important; 633 | font-size: 90%; 634 | padding: 0 4px; 635 | margin: 0 2px; 636 | border-radius: 2px; 637 | } 638 | /* 绿色标签 */ 639 | span[data-type="tag"][data-content="完成"],span[data-type="tag"][data-content="低"],span[data-type="tag"][data-content="低优先级"]{ 640 | background-color: var(--b3-card-success-background); 641 | color: var(--b3-card-success-color) !important; 642 | border: none !important; 643 | font-size: 90%; 644 | padding: 0 4px; 645 | margin: 0 2px; 646 | border-radius: 2px; 647 | } 648 | 649 | /**** 颜色卡片 ****/ 650 | /* 超级块内颜色卡片增加padding */ 651 | .sb div[data-node-id][style*="background-color"]{ 652 | padding: 8px 10px; 653 | } 654 | /* 嵌套内的颜色卡片恢复正常padding */ 655 | .sb div[data-node-id][style*="background-color"] div[data-node-id][style*="background-color"] { 656 | padding: var(--block-padding); 657 | } 658 | /* 颜色卡片内的块引用字体颜色与卡片保持一致 */ 659 | .protyle-wysiwyg [style*="background-color"] span[data-type="block-ref"]{ 660 | color: inherit; 661 | border-color: inherit; 662 | } 663 | /* 颜色卡片内的超级链接字体颜色与卡片保持一致，并添加下划线 */ 664 | .protyle-wysiwyg [style*="background-color"][data-node-id] span[data-type="a"]{ 665 | color: inherit; 666 | border-bottom-style: solid; 667 | border-bottom-width: 1px; 668 | } 669 | /* 颜色卡片内的圆点颜色与卡片保持一致 */ 670 | .protyle-wysiwyg [data-node-id][style*="background-color"] .protyle-action { 671 | color:inherit !important; 672 | } 673 | 674 | 675 | /**** 折叠 ****/ 676 | /* 消除官方折叠时高度固定为 24px 的设置，因为这样的设置改变字号和行高后会产生问题 */ 677 | .protyle-wysiwyg [data-node-id][fold="1"]:not(.li){ 678 | height: var(--line-height) !important; 679 | } 680 | /* 调整折叠时段落样式 */ 681 | .protyle-wysiwyg [data-type="NodeParagraph"][fold="1"]{ 682 | padding-left: 18px; 683 | opacity: 1 !important; 684 | } 685 | /* 段落折叠后添加三角形标识 */ 686 | .protyle-wysiwyg [data-type="NodeParagraph"][fold="1"]:after{ 687 | content: ""; 688 | background-color: var(--b3-theme-on-background); 689 | width: 12px; 690 | height: var(--line-height) ; 691 | position: absolute; 692 | left: 4px; 693 | top: var(--padding-top-bottom); 694 | -webkit-mask: url(src/iconTriangle.svg) no-repeat; 695 | mask: url(src/iconTriangle.svg) no-repeat; 696 | -webkit-mask-size: 100% 100%; 697 | mask-size: 100% 100%; 698 | } 699 | 700 | /* 调整折叠时引述块样式 */ 701 | .protyle-wysiwyg [data-type="NodeBlockquote"][fold="1"]{ 702 | margin-left : 0 !important; 703 | margin-right : 0 !important; 704 | } 705 | /* 调整折叠时引述块下列表及段落样式 */ 706 | .protyle-wysiwyg [data-type="NodeBlockquote"][fold="1"] .protyle-action{ 707 | display: none; /* 隐藏大纲圆点 */ 708 | } 709 | .protyle-wysiwyg [data-type="NodeBlockquote"][fold="1"] div{ 710 | margin-left: 0 !important; 711 | margin-right: 0 !important; 712 | margin: 0 !important; 713 | padding: 0 !important; 714 | border:none; 715 | } 716 | 717 | /* 调整折叠时大纲、列表样式 */ 718 | .protyle-wysiwyg [data-type="NodeList"][fold="1"]{ 719 | height: calc( var(--line-height) + var(--padding-top-bottom) * 2 ) !important; 720 | } 721 | .protyle-wysiwyg [data-type="NodeList"][fold="1"] div{ 722 | padding-top: 0 !important; 723 | padding-bottom: 0 !important; 724 | margin-top: 0 !important; 725 | margin-bottom: 0 !important; 726 | } 727 | .protyle-wysiwyg [data-type="NodeList"][fold="1"]>[data-type="NodeListItem"]{ 728 | padding-top: var(--padding-top-bottom) !important; 729 | padding-bottom: var(--padding-top-bottom) !important; 730 | } 731 | 732 | /************** 四、排版 **************************/ 733 | /**** 整体设置 ****/ 734 | .b3-typography, .protyle-wysiwyg [data-node-id]{ 735 | line-height: var(--line-height); 736 | letter-spacing: 0px; /* 字间距 */ 737 | word-spacing: 0px; /* 词间距 */ 738 | word-break: normal; 739 | word-wrap: break-word; 740 | } 741 | 742 | /* 段落及通用块 */ 743 | .b3-typography p, .b3-typography [data-node-id], .protyle-wysiwyg p, .protyle-wysiwyg [data-node-id]{ 744 | margin: var(--block-margin); 745 | padding: var(--block-padding); 746 | line-height: var(--line-height) !important; 747 | } 748 | 749 | /**** 超级块、横排 ****/ 750 | /*** 调整超级块中元素间距 ***/ 751 | .protyle-wysiwyg .sb div[data-node-id]{ 752 | margin: 4px; 753 | border-radius: 3px; 754 | } 755 | .protyle-wysiwyg [data-node-id].sb[data-sb-layout="col"] .sb,.protyle-wysiwyg [data-node-id].sb[data-sb-layout="row"] .sb{ 756 | margin:4px; 757 | } 758 | /**** 嵌入块 ****/ 759 | 760 | /* iframe */ 761 | .b3-typography iframe, .protyle-wysiwyg iframe{ 762 | border-color: transparent; 763 | } 764 | .b3-typography iframe:hover, .protyle-wysiwyg iframe:hover{ 765 | /* border-color: var(--b3-border-color); */ 766 | } 767 | 768 | /**** 标题 ****/ 769 | .b3-typography .h1,.b3-typography h1,.b3-typography .h2,.b3-typography h2,.b3-typography .h3,.b3-typography h3,.b3-typography .h4,.b3-typography h4,.b3-typography .h5,.b3-typography h5,.b3-typography .h6,.b3-typography h6,.protyle-wysiwyg .h1,.protyle-wysiwyg h1,.protyle-wysiwyg .h2,.protyle-wysiwyg h2,.protyle-wysiwyg .h3,.protyle-wysiwyg h3,.protyle-wysiwyg .h4,.protyle-wysiwyg h4,.protyle-wysiwyg .h5,.protyle-wysiwyg h5,.protyle-wysiwyg .h6,.protyle-wysiwyg h6 { 770 | 771 | } 772 | 773 | .b3-typography .h1, .b3-typography h1, .protyle-wysiwyg .h1, .protyle-wysiwyg h1{ 774 | margin: 12px 0 8px 0; 775 | padding: 0.2em 4px; 776 | font-size: 1.75em; 777 | border-bottom: 1px solid var(--b3-border-color); 778 | color: var(--h1-color); 779 | } 780 | 781 | .b3-typography .h2, .b3-typography h2, .protyle-wysiwyg .h2, .protyle-wysiwyg h2{ 782 | margin: 12px 0 0 0; 783 | padding: 0.1em 4px; 784 | font-size: 1.55em; 785 | border:none; 786 | color: var(--h2-color); 787 | } 788 | .b3-typography .h3, .b3-typography h3, .protyle-wysiwyg .h3, .protyle-wysiwyg h3{ 789 | margin: 10px 0 0 0; 790 | font-size: 1.38em; 791 | color: var(--h3-color); 792 | } 793 | .b3-typography .h4, .b3-typography h4, .protyle-wysiwyg .h4, .protyle-wysiwyg h4{ 794 | margin: 6px 0 0 0; 795 | font-size: 1.25em; 796 | color: var(--h4-color); 797 | } 798 | .b3-typography .h5, .b3-typography h5, .protyle-wysiwyg .h5, .protyle-wysiwyg h5{ 799 | /* margin: 6px 0 0 0; */ 800 | font-size: 1.13em; 801 | color: var(--h5-color); 802 | } 803 | .b3-typography .h6, .b3-typography h6, .protyle-wysiwyg .h6, .protyle-wysiwyg h6{ 804 | /* margin: 6px 0 0 0; */ 805 | font-size: 1em; 806 | color: var(--h6-color); 807 | } 808 | 809 | /**** 大纲、列表 ****/ 810 | /* 圆点悬浮时外圈样式 */ 811 | .protyle-wysiwyg [data-node-id].li>.protyle-action:hover:after{ 812 | opacity: 0.2; /* 圆点悬浮时外圈透明度 */ 813 | } 814 | 815 | /* 大纲折叠时样式 */ 816 | .protyle-wysiwyg [data-node-id].li[fold="1"]>.protyle-action:after{ 817 | background-color: var(--b3-theme-on-surface); 818 | opacity: 0.2; 819 | } 820 | .protyle-wysiwyg [data-node-id].li[fold="1"]>.protyle-action{ 821 | color: var(--b3-theme-on-background); 822 | transform: scale(1.1); 823 | font-weight: bold; 824 | } 825 | /* 圆点悬浮时放大效果（折叠时无效果） */ 826 | .protyle-wysiwyg [data-node-id].li:not([fold="1"])>.protyle-action:hover svg, .protyle-wysiwyg [data-node-id].li:not([fold="1"])>.protyle-action:hover:after{ 827 | transition: all .2s ease-in-out; 828 | transform: scale(1.22); 829 | } 830 | 831 | /* 消除待办事项图标背景色 */ 832 | .protyle-wysiwyg [data-node-id].li[fold="1"]>.protyle-action--task:after, .protyle-wysiwyg [data-node-id].li>.protyle-action--task:hover:after{ 833 | background: transparent !important; 834 | } 835 | 836 | /* 待办事项已完成的样式 */ 837 | .protyle-task--done>.p, .protyle-task--done>.protyle-action svg{ 838 | opacity: 0.5; 839 | text-decoration: line-through; 840 | } 841 | 842 | 843 | /**** 引述 ****/ 844 | .b3-typography blockquote, .b3-typography .bq, .protyle-wysiwyg blockquote, .protyle-wysiwyg .bq { 845 | border-left: var(--quote-border-width) solid var(--b3-theme-primary); 846 | border-color: var(--quote-border-color); 847 | color: var(--quote-color); 848 | background-color: var(--quote-background); 849 | margin:1em 2em 1em 2em ; 850 | padding: 0px 4px; 851 | padding-left: 1em ; 852 | } 853 | /* 调整引述在超级块中的样式 */ 854 | .protyle-wysiwyg .sb blockquote, .protyle-wysiwyg .sb .bq{ 855 | border-left: 3px solid var(--b3-border-color); 856 | margin: var(--allen-block-margin); 857 | padding: var(--allen-block-padding); 858 | } 859 | 860 | /**** 代码块 ****/ 861 | .b3-typography .code-block, .protyle-wysiwyg .code-block{ 862 | padding: 0; 863 | margin: 1em 0; 864 | line-height: 1.625 !important; 865 | } 866 | 867 | /**** 表格 ****/ 868 | /* 去除默认背景色 */ 869 | .b3-typography table tbody tr,.protyle-wysiwyg table tbody tr { 870 | background: transparent; 871 | } 872 | /* 添加行悬浮时背景色 */ 873 | .b3-typography table tr:hover, .protyle-wysiwyg table tr:hover{ 874 | background-color: var(--b3-theme-surface) !important; 875 | } 876 | 877 | /*********实验功能：毛玻璃效果 代码开始 ****** 878 | 1）需要关闭左边栏背景色、背景图功能 879 | ************ 880 | body{ 881 | background-color: white; 882 | background-image: var(--background-image); 883 | background-position: center top; 884 | background-size: cover; 885 | } 886 | 887 | .fn__flex-1.fn__flex [data-type='wnd']{ 888 | background: transparent; 889 | min-height: 90% !important; 890 | margin: 10px; 891 | padding: 10px; 892 | position: relative; 893 | box-shadow: var(--glass-box-shadow); 894 | overflow: hidden; 895 | z-index: 2; 896 | box-sizing: border-box; 897 | border-radius: 6px; 898 | } 899 | .layout__center .fn__flex-1.fn__flex [data-type='wnd']{ 900 | margin: 10px auto; 901 | padding: 10px 0px; 902 | max-width: 1030px; 903 | } 904 | 905 | [data-type='wnd']::before{ 906 | content: ''; 907 | position: absolute; 908 | top: 0; left: 0; right: 0; bottom: 0; 909 | z-index: -3; 910 | background-image: var(--background-image); 911 | background-position: center top; 912 | background-size: cover; 913 | background-attachment: fixed; 914 | background:var(--glass-editor-background); 915 | backdrop-filter: blur(var(--blur-value)); 916 | } 917 | 918 | .layout__center .fn__flex{ 919 | padding-right: 8px; 920 | padding-left: 8px; 921 | } 922 | 923 | .protyle-background{ 924 | margin: 10px; 925 | border-radius: 8px; 926 | } 927 | 928 | .toolbar,#dockLeft, #dockRight, #dockTop, #dockBottom{ 929 | background: transparent; 930 | border: none; 931 | opacity: 0; 932 | transition: opacity 400ms ease 0s; 933 | } 934 | .toolbar:hover,#dockLeft:hover, #dockRight:hover, #dockTop:hover, #dockBottom:hover{ 935 | opacity: 1; 936 | } 937 | 938 | .layout__empty, .layout__center .layout-tab-bar, .layout__center .layout-tab-bar .item, 939 | .protyle-preview,.protyle-preview__action,.graph, 940 | [data-type='wnd'] .layout-tab-container ,[data-type='wnd'] .protyle,[data-type='wnd'] .protyle-content,[data-type='wnd'] .protyle-wysiwyg,.block__icons, 941 | .search__label .b3-form__icon-input, 942 | .b3-dialog__container,.layout__center .protyle-title__input, 943 | .b3-tab-container,.config-account__center--text,.spread-search__preview,.protyle-breadcrumb, 944 | .search__header .b3-text-filed--text,.b3-text-filed, 945 | .b3-dialog__scrim,.b3-menu__item, 946 | .protyle-toolbar, 947 | .block__popover,.block__popover .protyle, 948 | .protyle-breadcrumb__bar, 949 | .fn__flex-shrink, .fn__flex-shrink .block__icons, 950 | .b3-typography table tr, .protyle-wysiwyg table tr{ 951 | background: transparent !important; 952 | 953 | } 954 | .b3-menu__item:hover:not(.b3-menu__item--readonly):not(.b3-menu__item--custom), .b3-menu__item--current{ 955 | background-color: var(--b3-list-hover) !important; 956 | } 957 | 958 | .protyle-preview__action button{ 959 | background-color:rgba(255, 255, 255, 0.8); 960 | } 961 | 962 | .b3-typography table tr:hover, .protyle-wysiwyg table tr:hover{ 963 | background-color: rgba(255, 255, 255, 0.3) !important; 964 | } 965 | 966 | .protyle-wysiwyg [data-node-id].render-node[data-type="NodeBlockQueryEmbed"]{ 967 | background-color: rgba(255, 255, 255, 0.5); 968 | } 969 | .b3-menu, .protyle-util,.protyle-gutters button{ 970 | background-color: rgba(255, 255, 255, 0.45); 971 | } 972 | 973 | .protyle-toolbar,.block__popover,.protyle-breadcrumb__bar, 974 | .b3-dialog__container,.b3-menu, .protyle-util{ 975 | backdrop-filter: blur(var(--blur-value)); 976 | } 977 | 978 | .protyle--fullscreen{ 979 | background-image:var(--allen-background-image)!important; 980 | background-position:center; 981 | background-size:cover; 982 | background-repeat:no-repeat; 983 | } 984 | .protyle--fullscreen .protyle-content{ 985 | background: transparent !important; 986 | backdrop-filter: blur(var(--blur-value)); 987 | } 988 | 989 | /******** 毛玻璃效果实验功能代码结束 ***************/ -------------------------------------------------------------------------------- /palette/autumn.css: -------------------------------------------------------------------------------- 1 | /******* Autumn 主题 **********/ 2 | :root { 3 | /* 主色 */ 4 | --b3-theme-primary: #A47327; /* 主色调，一般用在按钮等其他需要醒目的地方 */ 5 | --b3-theme-primary-light: rgba(164, 115, 39, 0.54); /* 主色调的透明色，用于文本选中背景等 */ 6 | --b3-theme-primary-lighter: rgba(164, 115, 39, 0.3); 7 | --b3-theme-primary-lightest:rgba(164, 115, 39, 0.1); 8 | --b3-theme-secondary: #f3a92f; 9 | --b3-theme-background: #F6F1E0; /* 背景色，主要用于编辑器背景 */ 10 | --b3-theme-surface: #EDE7CF; /* 主要用于分栏背景 */ 11 | --b3-theme-surface-light: #f7f6f38c; 12 | --b3-theme-error: #d23f31; 13 | 14 | /* 文字颜色 */ 15 | --b3-theme-on-primary: #fff; /* 主色调上的文字颜色 */ 16 | --b3-theme-on-secondary: #fff; 17 | --b3-theme-on-background:#473F3C; /* 编辑器上的文字颜色 */ 18 | --b3-theme-on-surface: #5f6368; /* 分栏、面板上的文字颜色 */ 19 | --b3-theme-on-error: #fff; 20 | 21 | 22 | /* 字体 */ 23 | --b3-font-family: "Pingfang SC", "quote", "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; 24 | --b3-font-family-code: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; 25 | --b3-font-family-graph: mononoki; 26 | 27 | /* 线条 */ 28 | --b3-border-color: rgba(0, 0, 0, .05); 29 | 30 | /* 滚动条 */ 31 | --b3-scroll-color: rgba(0, 0, 0, .2); 32 | 33 | /* 列表 */ 34 | --b3-list-hover: rgba(0, 0, 0, .05); 35 | 36 | /* 页签 */ 37 | --b3-tab-background: var(--b3-theme-background); 38 | --b3-tab-background-hover: var(--b3-theme-primary-lightest); 39 | 40 | /* 菜单 */ 41 | --b3-menu-background: var(--b3-theme-background); 42 | 43 | /* 提示 */ 44 | --b3-tooltips-color: rgba(0, 0, 0, 0.7); 45 | 46 | /* 卡片背景 */ 47 | --b3-card-error-color: rgb(97, 26, 21); 48 | --b3-card-error-background: rgb(253, 236, 234); 49 | --b3-card-warning-color: rgb(102, 60, 0); 50 | --b3-card-warning-background:rgb(255, 244, 229); 51 | --b3-card-info-color: rgb(13, 60, 97); 52 | --b3-card-info-background: rgb(232, 244, 253); 53 | --b3-card-success-color: rgb(30, 70, 32); 54 | --b3-card-success-background:rgb(237, 247, 237); 55 | 56 | /* 自定义文字 */ 57 | --b3-font-color1: var(--b3-card-error-color); 58 | --b3-font-color2: var(--b3-card-warning-color); 59 | --b3-font-color3: var(--b3-card-info-color); 60 | --b3-font-color4: var(--b3-card-success-color); 61 | --b3-font-color5: var(--b3-theme-on-surface); 62 | --b3-font-color6: var(--b3-theme-primary); 63 | --b3-font-color7: var(--b3-theme-secondary); 64 | --b3-font-color8: var(--b3-theme-error); 65 | --b3-font-color9: #f5539e; 66 | --b3-font-color10: #944194; 67 | --b3-font-color11: #65b84d; 68 | --b3-font-color12: #f5822e; 69 | --b3-font-color13: var(--b3-theme-background); 70 | --b3-font-background1: var(--b3-card-error-background); 71 | --b3-font-background2: var(--b3-card-warning-background); 72 | --b3-font-background3: var(--b3-card-info-background); 73 | --b3-font-background4: var(--b3-card-success-background); 74 | --b3-font-background5: var(--b3-theme-surface); 75 | --b3-font-background6: var(--b3-theme-primary-light); 76 | --b3-font-background7: rgba(217, 211, 215, 0.5); 77 | --b3-font-background8: rgba(255, 193, 153, 0.5); 78 | --b3-font-background9: rgba(189, 201, 255, 0.5); 79 | --b3-font-background10: rgba(239, 218, 251, 0.5); 80 | --b3-font-background11: rgba(234, 202, 220, 0.5); 81 | --b3-font-background12: rgba(253, 198, 200, 0.5); 82 | --b3-font-background13: var(--b3-theme-on-background); 83 | 84 | /* 动画效果 */ 85 | --b3-transition: all .15s cubic-bezier(0, 0, .2, 1) 0ms; 86 | --b3-width-transition: width .15s cubic-bezier(0, 0, .2, 1) 0ms; 87 | 88 | /* 阴影 */ 89 | --b3-point-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); 90 | --b3-dialog-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 91 | 92 | /* diff */ 93 | --b3-diff-add: #dfd; 94 | --b3-diff-add-surface: #97f295; 95 | --b3-diff-del: #fee8e9; 96 | --b3-diff-del-surface: #ffb6ba; 97 | 98 | /* 图表颜色 */ 99 | --b3-graph-p-point: #076f7e; 100 | --b3-graph-heading-point: #660e7a; 101 | --b3-graph-math-point: #80FFA5; 102 | --b3-graph-code-point: #00DDFF; 103 | --b3-graph-table-point: #37A2FF; 104 | --b3-graph-list-point: #FF0087; 105 | --b3-graph-todo-point: #FFBF00; 106 | --b3-graph-olist-point: #b3005f; 107 | --b3-graph-listitem-point: #f65b00; 108 | --b3-graph-bq-point: #8d48e3; 109 | --b3-graph-super-point: #dd79ff; 110 | --b3-graph-doc-point: #202124; 111 | --b3-graph-tag-point: #dbf32f; 112 | --b3-graph-asset-point: #05c091; 113 | --b3-graph-line: #5f6368; 114 | --b3-graph-ref-line: #d23f31; 115 | --b3-graph-tag-line: #5f6b06; 116 | --b3-graph-tag-tag-line: #dbf32f; 117 | --b3-graph-asset-line: #037457; 118 | --b3-graph-hl-point: #f3a92f; 119 | --b3-graph-hl-line: #4285f4; 120 | 121 | /* 编辑器搜索颜色 */ 122 | --b3-protyle-search-background: #ffe955; 123 | --b3-protyle-search-border-color: #f2e680; 124 | --b3-protyle-search-current-background: #a5d3fe; 125 | 126 | /* 代码片段背景 */ 127 | --b3-protyle-code-background: rgba(27, 31, 35, .05); 128 | 129 | /* 所见即所得行内元素颜色 */ 130 | --b3-protyle-inline-strong-color: inherit; /* 粗体 */ 131 | --b3-protyle-inline-em-color: inherit; /* 斜体 */ 132 | --b3-protyle-inline-s-color: inherit; /* 删除线 */ 133 | --b3-protyle-inline-link-color: var(--b3-theme-primary); /* 超级链接 */ 134 | --b3-protyle-inline-mark-background: #ffe68d; /* 高亮背景 */ 135 | --b3-protyle-inline-mark-color: inherit; /* 高亮文字 */ 136 | --b3-protyle-inline-tag-color: #5f6368; /* 标签 */ 137 | --b3-protyle-inline-blockref-color: var(--b3-theme-primary); /* 双向链接 */ 138 | 139 | /************** Theme *********************/ 140 | /**** 配色 ****/ 141 | --dock-background: var(--b3-theme-surface); /* 顶栏、dock 栏背景色 */ 142 | --left-sidebar-background: var(--b3-theme-surface); /* 左边栏背景色 */ 143 | --left-sidebar-color: var(--b3-theme-on-surface); /* 左边栏文字颜色 */ 144 | --caret-color: var(--b3-theme-primary); /* 光标颜色 */ 145 | --text-selection-background: rgba(45, 170, 219, 0.3); /* 文本选中背景色 */ 146 | --text-selection-color: inherit; /* 文本选中颜色 */ 147 | --inline-code-color: var(--b3-theme-primary); /* 行内代码文字颜色 */ 148 | --quote-border-width: 3px; /* 引述左边框宽度 */ 149 | --quote-border-color: var(--b3-theme-primary); /* 引述左边框颜色 */ 150 | --quote-color: var(--b3-theme-on-surface); /* 引述文字颜色 */ 151 | --quote-background: transparent; /* 引述背景色 */ 152 | 153 | --gutters-hover-background: var(--b3-theme-surface); /* 块图标悬浮时背景色（不要使用透明色） */ 154 | --switch-uncheck-color: #FFF; /* switch 开关未开启时颜色 */ 155 | 156 | --scrollbar-hover-background: #ccc; /* 滚动条悬浮时背景色 */ 157 | --column-scrollbar-background: var(--b3-theme-background); /* 边栏内滚动条通用背景色 */ 158 | --column-scrollbar-hover-background: #ccc; /* 边栏内滚动条悬浮时背景色 */ 159 | 160 | /* 标题颜色 */ 161 | --h1-color: inherit; 162 | --h2-color: inherit; 163 | --h3-color: inherit; 164 | --h4-color: inherit; 165 | --h5-color: inherit; 166 | --h6-color: inherit; 167 | 168 | /**** 设置 ****/ 169 | --dock-border: 1px solid var(--b3-border-color); /* 顶栏、dock、页签栏边框 */ 170 | --column-border: var(--b3-border-color); /* 分栏分割线 */ 171 | --line-height: 1.75em; /* 行高 */ 172 | --margin-top-bottom: 2px; /* 上下 margin */ 173 | --margin-left-right: 0px; /* 左右 margin */ 174 | --padding-top-bottom: 2px; /* 上下 padding */ 175 | --padding-left-right: 4px; /* 左右 padding */ 176 | --block-margin: var(--margin-top-bottom) var(--margin-left-right) !important; /* 块间距 */ 177 | --block-padding: var(--padding-top-bottom) var(--padding-left-right) !important; /* 块内边距 */ 178 | --background-image: url("src/bg.jpg"); /* 背景图 */ 179 | --blur-value: 40px; /* 背景图片模糊程度 */ 180 | --glass-editor-background: rgba(255,255,255,0.1); /* 毛玻璃效果：背景色 */ 181 | --glass-box-shadow: 0 4px 12px rgba(120,120,120,0.35); /* 毛玻璃效果：阴影 */ 182 | 183 | /**** 动画 ****/ 184 | --page-scrollbar-transition: opacity 800ms ease 0s; /* 分页加载条动画 */ 185 | --flex-column-transition: width 200ms cubic-bezier(0, 0.7, 0.4, 1); /* 侧边栏动画 */ 186 | --common-transition: all 1s cubic-bezier(0, 0.7, .2, 1) 0ms; /* 通用动画 */ 187 | 188 | } 189 | 190 | /**** 特殊样式 ****/ 191 | /* 工具栏选中状态 */ 192 | .protyle-toolbar__item--current{ 193 | color: rgba(45, 170, 219, 1); 194 | } 195 | /**/ -------------------------------------------------------------------------------- /palette/blue.css: -------------------------------------------------------------------------------- 1 | /******* Blue Theme **********/ 2 | :root { 3 | /* 主色 */ 4 | --b3-theme-primary: #d1af02; 5 | --b3-theme-primary-light: #d1af028c; 6 | --b3-theme-primary-lighter: #d1af0260; 7 | --b3-theme-primary-lightest: #d1af0220; 8 | --b3-theme-secondary: #f3a92f; 9 | --b3-theme-background: #002451; 10 | --b3-theme-surface: #001c40; 11 | --b3-theme-surface-light: rgba(41, 42, 45, .86); 12 | --b3-theme-error: #d23f31; 13 | 14 | /* 文字颜色 */ 15 | --b3-theme-on-primary: #fff; 16 | --b3-theme-on-secondary: #fff; 17 | --b3-theme-on-background: #96b5da; 18 | --b3-theme-on-surface: #4671a7; 19 | --b3-theme-on-error: #fff; 20 | 21 | /* 字体 */ 22 | --b3-font-family: "Pingfang SC", "quote", "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; 23 | --b3-font-family-code: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; 24 | --b3-font-family-graph: mononoki; 25 | 26 | /* 线条 */ 27 | --b3-border-color: rgba(230, 230, 230, .08); 28 | 29 | /* 滚动条 */ 30 | --b3-scroll-color: rgba(230, 230, 230, .2); 31 | 32 | /* 列表 */ 33 | --b3-list-hover: rgba(230, 230, 230, .05); 34 | 35 | /* 页签 */ 36 | --b3-tab-background: var(--b3-theme-background); 37 | --b3-tab-background-hover: var(--b3-theme-primary-lightest); 38 | 39 | /* 菜单 */ 40 | --b3-menu-background: var(--b3-theme-background); 41 | 42 | /* 提示 */ 43 | --b3-tooltips-color: rgba(70, 72, 76, .86); 44 | 45 | /* 卡片背景 */ 46 | --b3-card-error-color: #6D2833; 47 | --b3-card-error-background: #d8b0ae; 48 | --b3-card-warning-color: #6D360B; 49 | --b3-card-warning-background: #dac28b; 50 | --b3-card-info-color: #084970; 51 | --b3-card-info-background: #85BBDC; 52 | --b3-card-success-color: #073E26; 53 | --b3-card-success-background: #A2D1BC; 54 | 55 | /* 自定义文字 */ 56 | --b3-font-color1: var(--b3-card-error-color); 57 | --b3-font-color2: var(--b3-card-warning-color); 58 | --b3-font-color3: var(--b3-card-info-color); 59 | --b3-font-color4: var(--b3-card-success-color); 60 | --b3-font-color5: var(--b3-theme-on-surface); 61 | --b3-font-color6: var(--b3-theme-primary); 62 | --b3-font-color7: var(--b3-theme-secondary); 63 | --b3-font-color8: var(--b3-theme-error); 64 | --b3-font-color9: #f5539e; 65 | --b3-font-color10: #944194; 66 | --b3-font-color11: #65b84d; 67 | --b3-font-color12: #f5822e; 68 | --b3-font-color13: var(--b3-theme-background); 69 | --b3-font-background1: var(--b3-card-error-background); 70 | --b3-font-background2: var(--b3-card-warning-background); 71 | --b3-font-background3: var(--b3-card-info-background); 72 | --b3-font-background4: var(--b3-card-success-background); 73 | --b3-font-background5: var(--b3-theme-surface); 74 | --b3-font-background6: var(--b3-theme-primary-light); 75 | --b3-font-background7: rgba(217, 211, 215, 0.5); 76 | --b3-font-background8: rgba(255, 193, 153, 0.5); 77 | --b3-font-background9: rgba(189, 201, 255, 0.5); 78 | --b3-font-background10: rgba(239, 218, 251, 0.5); 79 | --b3-font-background11: rgba(234, 202, 220, 0.5); 80 | --b3-font-background12: rgba(253, 198, 200, 0.5); 81 | --b3-font-background13: var(--b3-theme-on-background); 82 | 83 | /* 动画效果 */ 84 | --b3-transition: all .15s cubic-bezier(0, 0, .2, 1) 0ms; 85 | --b3-width-transition: width .15s cubic-bezier(0, 0, .2, 1) 0ms; 86 | 87 | /* 阴影 */ 88 | --b3-point-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); 89 | --b3-dialog-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 90 | 91 | 92 | /* diff */ 93 | --b3-diff-add: #133a1c; 94 | --b3-diff-add-surface: #28853e; 95 | --b3-diff-del: #440c10; 96 | --b3-diff-del-surface: #b1202d; 97 | 98 | /* 图表颜色 */ 99 | --b3-graph-p-point: #076f7e; 100 | --b3-graph-heading-point: #9876aa; 101 | --b3-graph-math-point: #80FFA5; 102 | --b3-graph-code-point: #00DDFF; 103 | --b3-graph-table-point: #37A2FF; 104 | --b3-graph-list-point: #FF0087; 105 | --b3-graph-todo-point: #FFBF00; 106 | --b3-graph-olist-point: #b3005f; 107 | --b3-graph-listitem-point: #f65b00; 108 | --b3-graph-bq-point: #8d48e3; 109 | --b3-graph-super-point: #dd79ff; 110 | --b3-graph-doc-point: #e8eaed; 111 | --b3-graph-tag-point: #dbf32f; 112 | --b3-graph-asset-point: #05c091; 113 | --b3-graph-line: #9aa0a6; 114 | --b3-graph-ref-line: #d23f31; 115 | --b3-graph-tag-line: #5f6b06; 116 | --b3-graph-tag-tag-line: #dbf32f; 117 | --b3-graph-asset-line: #037457; 118 | --b3-graph-hl-point: #f3a92f; 119 | --b3-graph-hl-line: #4285f4; 120 | 121 | /* 编辑器搜索颜色 */ 122 | --b3-protyle-search-background: #32593c; 123 | --b3-protyle-search-border-color: #486a51; 124 | --b3-protyle-search-current-background: #204282; 125 | 126 | /* 代码片段背景 */ 127 | --b3-protyle-code-background: rgba(240, 246, 252, .15); 128 | 129 | /* 所见即所得行内元素颜色 */ 130 | --b3-protyle-inline-strong-color: inherit; 131 | --b3-protyle-inline-em-color: inherit; 132 | --b3-protyle-inline-s-color: inherit; 133 | --b3-protyle-inline-link-color: #defea9; 134 | --b3-protyle-inline-mark-background: #ffe68d; 135 | --b3-protyle-inline-mark-color: #444; 136 | --b3-protyle-inline-tag-color: #9aa0a6; 137 | --b3-protyle-inline-blockref-color: var(--b3-theme-primary); 138 | 139 | /************** Theme *********************/ 140 | /**** 配色 ****/ 141 | --dock-background: #001733; /* 顶栏、dock 栏背景色 */ 142 | --left-sidebar-background: var(--b3-theme-surface); /* 左边栏背景色 */ 143 | --left-sidebar-color: var(--b3-theme-on-surface); /* 左边栏文字颜色 */ 144 | --caret-color: var(--b3-theme-primary); /* 光标颜色 */ 145 | --text-selection-background: var(--b3-theme-primary-lighter); /* 文本选中背景色 */ 146 | --text-selection-color: inherit; /* 文本选中颜色 */ 147 | --inline-code-color: var(--b3-theme-primary); /* 行内代码文字颜色 */ 148 | --quote-border-width: 2px; /* 引述左边框宽度 */ 149 | --quote-border-color: #7bd88f; /* 引述左边框颜色 */ 150 | --quote-color: var(--b3-theme-on-background); /* 引述文字颜色 */ 151 | --quote-background: transparent; /* 引述背景色 */ 152 | 153 | --gutters-hover-background: var(--b3-theme-surface); /* 块图标悬浮时背景色（不要使用透明色） */ 154 | --switch-uncheck-color: #FFF; /* switch 开关未开启时颜色 */ 155 | 156 | --scrollbar-hover-background: #999; /* 滚动条悬浮时背景色 */ 157 | --column-scrollbar-background: var(--b3-scroll-color); /* 边栏内滚动条通用背景色 */ 158 | --column-scrollbar-hover-background: #999; /* 边栏内滚动条悬浮时背景色 */ 159 | 160 | /* 标题颜色 */ 161 | --h1-color: #9dc2fa; 162 | --h2-color: #9dc2fa; 163 | --h3-color: #7bd88f; 164 | --h4-color: #7bd88f; 165 | --h5-color: #7bd88f; 166 | --h6-color: inherit; 167 | 168 | /**** 设置 ****/ 169 | --dock-border: 0px solid var(--b3-border-color); /* 顶栏、dock、页签栏边框 */ 170 | --column-border: transparent; /* 分栏分割线 */ 171 | --line-height: 1.75em; /* 行高 */ 172 | --margin-top-bottom: 2px; /* 上下 margin */ 173 | --margin-left-right: 0px; /* 左右 margin */ 174 | --padding-top-bottom: 2px; /* 上下 padding */ 175 | --padding-left-right: 4px; /* 左右 padding */ 176 | --block-margin: var(--margin-top-bottom) var(--margin-left-right) !important; /* 块间距 */ 177 | --block-padding: var(--padding-top-bottom) var(--padding-left-right) !important; /* 块内边距 */ 178 | --background-image: url("src/bg.jpg"); /* 背景图 */ 179 | --blur-value: 40px; /* 背景图片模糊程度 */ 180 | --glass-editor-background: rgba(255,255,255,0.1); /* 毛玻璃效果：背景色 */ 181 | --glass-box-shadow: 0 4px 12px rgba(120,120,120,0.35); /* 毛玻璃效果：阴影 */ 182 | 183 | /**** 动画 ****/ 184 | --page-scrollbar-transition: opacity 800ms ease 0s; /* 分页加载条动画 */ 185 | --flex-column-transition: width 200ms cubic-bezier(0, 0.7, 0.4, 1); /* 侧边栏动画 */ 186 | --common-transition: all 1s cubic-bezier(0, 0.7, .2, 1) 0ms; /* 通用动画 */ 187 | } 188 | -------------------------------------------------------------------------------- /palette/cyan.css: -------------------------------------------------------------------------------- 1 | /******* Cyan Theme **********/ 2 | :root { 3 | /* 主色 */ 4 | --b3-theme-primary: #b58900; 5 | --b3-theme-primary-light: #b589008c; 6 | --b3-theme-primary-lighter: #b5890060; 7 | --b3-theme-primary-lightest: #b5890026; 8 | --b3-theme-secondary: #f3a92f; 9 | --b3-theme-background: #002b36; 10 | --b3-theme-surface: #00212b; 11 | --b3-theme-surface-light: rgba(41, 42, 45, .86); 12 | --b3-theme-error: #d23f31; 13 | 14 | /* 文字颜色 */ 15 | --b3-theme-on-primary: #fff; 16 | --b3-theme-on-secondary: #fff; 17 | --b3-theme-on-background: #f5e7e9; 18 | --b3-theme-on-surface: #7a7272; 19 | --b3-theme-on-error: #fff; 20 | 21 | /* 字体 */ 22 | --b3-font-family: "Pingfang SC", "quote", "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; 23 | --b3-font-family-code: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; 24 | --b3-font-family-graph: mononoki; 25 | 26 | /* 线条 */ 27 | --b3-border-color: rgba(230, 230, 230, .08); 28 | 29 | /* 滚动条 */ 30 | --b3-scroll-color: rgba(230, 230, 230, .2); 31 | 32 | /* 列表 */ 33 | --b3-list-hover: rgba(230, 230, 230, .05); 34 | 35 | /* 页签 */ 36 | --b3-tab-background: var(--b3-theme-background); 37 | --b3-tab-background-hover: var(--b3-theme-primary-lightest); 38 | 39 | /* 菜单 */ 40 | --b3-menu-background: var(--b3-theme-background); 41 | 42 | /* 提示 */ 43 | --b3-tooltips-color: rgba(70, 72, 76, .86); 44 | 45 | /* 卡片背景 */ 46 | --b3-card-error-color: #6D2833; 47 | --b3-card-error-background: #d8b0ae; 48 | --b3-card-warning-color: #6D360B; 49 | --b3-card-warning-background: #dac28b; 50 | --b3-card-info-color: #084970; 51 | --b3-card-info-background: #85BBDC; 52 | --b3-card-success-color: #073E26; 53 | --b3-card-success-background: #A2D1BC; 54 | 55 | /* 自定义文字 */ 56 | --b3-font-color1: var(--b3-card-error-color); 57 | --b3-font-color2: var(--b3-card-warning-color); 58 | --b3-font-color3: var(--b3-card-info-color); 59 | --b3-font-color4: var(--b3-card-success-color); 60 | --b3-font-color5: var(--b3-theme-on-surface); 61 | --b3-font-color6: var(--b3-theme-primary); 62 | --b3-font-color7: var(--b3-theme-secondary); 63 | --b3-font-color8: var(--b3-theme-error); 64 | --b3-font-color9: #f5539e; 65 | --b3-font-color10: #944194; 66 | --b3-font-color11: #65b84d; 67 | --b3-font-color12: #f5822e; 68 | --b3-font-color13: var(--b3-theme-background); 69 | --b3-font-background1: var(--b3-card-error-background); 70 | --b3-font-background2: var(--b3-card-warning-background); 71 | --b3-font-background3: var(--b3-card-info-background); 72 | --b3-font-background4: var(--b3-card-success-background); 73 | --b3-font-background5: var(--b3-theme-surface); 74 | --b3-font-background6: var(--b3-theme-primary-light); 75 | --b3-font-background7: rgba(217, 211, 215, 0.5); 76 | --b3-font-background8: rgba(255, 193, 153, 0.5); 77 | --b3-font-background9: rgba(189, 201, 255, 0.5); 78 | --b3-font-background10: rgba(239, 218, 251, 0.5); 79 | --b3-font-background11: rgba(234, 202, 220, 0.5); 80 | --b3-font-background12: rgba(253, 198, 200, 0.5); 81 | --b3-font-background13: var(--b3-theme-on-background); 82 | 83 | /* 动画效果 */ 84 | --b3-transition: all .15s cubic-bezier(0, 0, .2, 1) 0ms; 85 | --b3-width-transition: width .15s cubic-bezier(0, 0, .2, 1) 0ms; 86 | 87 | /* 阴影 */ 88 | --b3-point-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); 89 | --b3-dialog-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 90 | 91 | 92 | /* diff */ 93 | --b3-diff-add: #133a1c; 94 | --b3-diff-add-surface: #28853e; 95 | --b3-diff-del: #440c10; 96 | --b3-diff-del-surface: #b1202d; 97 | 98 | /* 图表颜色 */ 99 | --b3-graph-p-point: #076f7e; 100 | --b3-graph-heading-point: #9876aa; 101 | --b3-graph-math-point: #80FFA5; 102 | --b3-graph-code-point: #00DDFF; 103 | --b3-graph-table-point: #37A2FF; 104 | --b3-graph-list-point: #FF0087; 105 | --b3-graph-todo-point: #FFBF00; 106 | --b3-graph-olist-point: #b3005f; 107 | --b3-graph-listitem-point: #f65b00; 108 | --b3-graph-bq-point: #8d48e3; 109 | --b3-graph-super-point: #dd79ff; 110 | --b3-graph-doc-point: #e8eaed; 111 | --b3-graph-tag-point: #dbf32f; 112 | --b3-graph-asset-point: #05c091; 113 | --b3-graph-line: #9aa0a6; 114 | --b3-graph-ref-line: #d23f31; 115 | --b3-graph-tag-line: #5f6b06; 116 | --b3-graph-tag-tag-line: #dbf32f; 117 | --b3-graph-asset-line: #037457; 118 | --b3-graph-hl-point: #f3a92f; 119 | --b3-graph-hl-line: #4285f4; 120 | 121 | /* 编辑器搜索颜色 */ 122 | --b3-protyle-search-background: #32593c; 123 | --b3-protyle-search-border-color: #486a51; 124 | --b3-protyle-search-current-background: #204282; 125 | 126 | /* 代码片段背景 */ 127 | --b3-protyle-code-background: rgba(240, 246, 252, .15); 128 | 129 | /* 所见即所得行内元素颜色 */ 130 | --b3-protyle-inline-strong-color: inherit; 131 | --b3-protyle-inline-em-color: inherit; 132 | --b3-protyle-inline-s-color: inherit; 133 | --b3-protyle-inline-link-color: #2aa198; 134 | --b3-protyle-inline-mark-background: #32593c; 135 | --b3-protyle-inline-mark-color: #e8eaed; 136 | --b3-protyle-inline-tag-color: #9aa0a6; 137 | --b3-protyle-inline-blockref-color: var(--b3-theme-primary); 138 | 139 | /************** Theme *********************/ 140 | /**** 配色 ****/ 141 | --dock-background: #003847; /* 顶栏、dock 栏背景色 */ 142 | --left-sidebar-background: var(--b3-theme-surface); /* 左边栏背景色 */ 143 | --left-sidebar-color: var(--b3-theme-on-surface); /* 左边栏文字颜色 */ 144 | --caret-color: var(--b3-theme-primary); /* 光标颜色 */ 145 | --text-selection-background: var(--b3-theme-primary-lighter); /* 文本选中背景色 */ 146 | --text-selection-color: inherit; /* 文本选中颜色 */ 147 | --inline-code-color: var(--b3-theme-primary); /* 行内代码文字颜色 */ 148 | --quote-border-width: 2px; /* 引述左边框宽度 */ 149 | --quote-border-color: #7bd88f; /* 引述左边框颜色 */ 150 | --quote-color: inherit; /* 引述文字颜色 */ 151 | 152 | --gutters-hover-background: var(--b3-theme-surface); /* 块图标悬浮时背景色（不要使用透明色） */ 153 | --switch-uncheck-color: #FFF; /* switch 开关未开启时颜色 */ 154 | 155 | --scrollbar-hover-background: #999; /* 滚动条悬浮时背景色 */ 156 | --column-scrollbar-background: var(--b3-scroll-color); /* 边栏内滚动条通用背景色 */ 157 | --column-scrollbar-hover-background: #999; /* 边栏内滚动条悬浮时背景色 */ 158 | 159 | /* 标题颜色 */ 160 | --h1-color: inherit; 161 | --h2-color: inherit; 162 | --h3-color: inherit; 163 | --h4-color: inherit; 164 | --h5-color: inherit; 165 | --h6-color: inherit; 166 | 167 | /**** 设置 ****/ 168 | --dock-border: 0px solid var(--b3-border-color); /* 顶栏、dock、页签栏边框 */ 169 | --column-border: transparent; /* 分栏分割线 */ 170 | --line-height: 1.75em; /* 行高 */ 171 | --margin-top-bottom: 2px; /* 上下 margin */ 172 | --margin-left-right: 0px; /* 左右 margin */ 173 | --padding-top-bottom: 2px; /* 上下 padding */ 174 | --padding-left-right: 4px; /* 左右 padding */ 175 | --block-margin: var(--margin-top-bottom) var(--margin-left-right) !important; /* 块间距 */ 176 | --block-padding: var(--padding-top-bottom) var(--padding-left-right) !important; /* 块内边距 */ 177 | --background-image: url("src/bg.jpg"); /* 背景图 */ 178 | --blur-value: 40px; /* 背景图片模糊程度 */ 179 | --glass-editor-background: rgba(255,255,255,0.1); /* 毛玻璃效果：背景色 */ 180 | --glass-box-shadow: 0 4px 12px rgba(120,120,120,0.35); /* 毛玻璃效果：阴影 */ 181 | 182 | /**** 动画 ****/ 183 | --page-scrollbar-transition: opacity 800ms ease 0s; /* 分页加载条动画 */ 184 | --flex-column-transition: width 200ms cubic-bezier(0, 0.7, 0.4, 1); /* 侧边栏动画 */ 185 | --common-transition: all 1s cubic-bezier(0, 0.7, .2, 1) 0ms; /* 通用动画 */ 186 | } 187 | -------------------------------------------------------------------------------- /palette/dark.css: -------------------------------------------------------------------------------- 1 | /******* 深色主题配色模板 **********/ 2 | :root { 3 | /* 主色 */ 4 | --b3-theme-primary: #fce566; 5 | --b3-theme-primary-light: #fce5668c; 6 | --b3-theme-primary-lighter: #fce56660; 7 | --b3-theme-primary-lightest:#fce56620; 8 | --b3-theme-secondary: #f3a92f; 9 | --b3-theme-background: #222222; 10 | --b3-theme-surface: #191919; 11 | --b3-theme-surface-light: rgba(41, 42, 45, .86); 12 | --b3-theme-error: #d23f31; 13 | 14 | /* 文字颜色 */ 15 | --b3-theme-on-primary: #fff; 16 | --b3-theme-on-secondary: #fff; 17 | --b3-theme-on-background:#c9d1d9; 18 | --b3-theme-on-surface: #8a878e; 19 | --b3-theme-on-error: #fff; 20 | 21 | /* 字体 */ 22 | --b3-font-family: "Pingfang SC", "quote", "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; 23 | --b3-font-family-code: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; 24 | --b3-font-family-graph: mononoki; 25 | 26 | /* 线条 */ 27 | --b3-border-color: rgba(230, 230, 230, .08); 28 | 29 | /* 滚动条 */ 30 | --b3-scroll-color: rgba(230, 230, 230, .2); 31 | 32 | /* 列表 */ 33 | --b3-list-hover: rgba(230, 230, 230, .05); 34 | 35 | /* 页签 */ 36 | --b3-tab-background: var(--b3-theme-background); 37 | --b3-tab-background-hover: var(--b3-theme-primary-lightest); 38 | 39 | /* 菜单 */ 40 | --b3-menu-background: var(--b3-theme-background); 41 | 42 | /* 提示 */ 43 | --b3-tooltips-color: rgba(70, 72, 76, .86); 44 | 45 | /* 卡片背景 */ 46 | --b3-card-error-color: #6D2833; 47 | --b3-card-error-background: #d8b0ae; 48 | --b3-card-warning-color: #6D360B; 49 | --b3-card-warning-background: #dac28b; 50 | --b3-card-info-color: #084970; 51 | --b3-card-info-background: #85BBDC; 52 | --b3-card-success-color: #073E26; 53 | --b3-card-success-background: #A2D1BC; 54 | 55 | /* 自定义文字 */ 56 | --b3-font-color1: var(--b3-card-error-color); 57 | --b3-font-color2: var(--b3-card-warning-color); 58 | --b3-font-color3: var(--b3-card-info-color); 59 | --b3-font-color4: var(--b3-card-success-color); 60 | --b3-font-color5: var(--b3-theme-on-surface); 61 | --b3-font-color6: var(--b3-theme-primary); 62 | --b3-font-color7: var(--b3-theme-secondary); 63 | --b3-font-color8: var(--b3-theme-error); 64 | --b3-font-color9: #f5539e; 65 | --b3-font-color10: #944194; 66 | --b3-font-color11: #65b84d; 67 | --b3-font-color12: #f5822e; 68 | --b3-font-color13: var(--b3-theme-background); 69 | --b3-font-background1: var(--b3-card-error-background); 70 | --b3-font-background2: var(--b3-card-warning-background); 71 | --b3-font-background3: var(--b3-card-info-background); 72 | --b3-font-background4: var(--b3-card-success-background); 73 | --b3-font-background5: var(--b3-theme-surface); 74 | --b3-font-background6: var(--b3-theme-primary-light); 75 | --b3-font-background7: rgba(217, 211, 215, 0.5); 76 | --b3-font-background8: rgba(255, 193, 153, 0.5); 77 | --b3-font-background9: rgba(189, 201, 255, 0.5); 78 | --b3-font-background10: rgba(239, 218, 251, 0.5); 79 | --b3-font-background11: rgba(234, 202, 220, 0.5); 80 | --b3-font-background12: rgba(253, 198, 200, 0.5); 81 | --b3-font-background13: var(--b3-theme-on-background); 82 | 83 | /* 动画效果 */ 84 | --b3-transition: all .15s cubic-bezier(0, 0, .2, 1) 0ms; 85 | --b3-width-transition: width .15s cubic-bezier(0, 0, .2, 1) 0ms; 86 | 87 | /* 阴影 */ 88 | --b3-point-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); 89 | --b3-dialog-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 90 | 91 | 92 | /* diff */ 93 | --b3-diff-add: #133a1c; 94 | --b3-diff-add-surface: #28853e; 95 | --b3-diff-del: #440c10; 96 | --b3-diff-del-surface: #b1202d; 97 | 98 | /* 图表颜色 */ 99 | --b3-graph-p-point: #076f7e; 100 | --b3-graph-heading-point: #9876aa; 101 | --b3-graph-math-point: #80FFA5; 102 | --b3-graph-code-point: #00DDFF; 103 | --b3-graph-table-point: #37A2FF; 104 | --b3-graph-list-point: #FF0087; 105 | --b3-graph-todo-point: #FFBF00; 106 | --b3-graph-olist-point: #b3005f; 107 | --b3-graph-listitem-point: #f65b00; 108 | --b3-graph-bq-point: #8d48e3; 109 | --b3-graph-super-point: #dd79ff; 110 | --b3-graph-doc-point: #e8eaed; 111 | --b3-graph-tag-point: #dbf32f; 112 | --b3-graph-asset-point: #05c091; 113 | --b3-graph-line: #9aa0a6; 114 | --b3-graph-ref-line: #d23f31; 115 | --b3-graph-tag-line: #5f6b06; 116 | --b3-graph-tag-tag-line: #dbf32f; 117 | --b3-graph-asset-line: #037457; 118 | --b3-graph-hl-point: #f3a92f; 119 | --b3-graph-hl-line: #4285f4; 120 | 121 | /* 编辑器搜索颜色 */ 122 | --b3-protyle-search-background: #32593c; 123 | --b3-protyle-search-border-color: #486a51; 124 | --b3-protyle-search-current-background: #204282; 125 | 126 | /* 代码片段背景 */ 127 | --b3-protyle-code-background: rgba(240, 246, 252, .15); 128 | 129 | /* 所见即所得行内元素颜色 */ 130 | --b3-protyle-inline-strong-color: inherit; 131 | --b3-protyle-inline-em-color: inherit; 132 | --b3-protyle-inline-s-color: inherit; 133 | --b3-protyle-inline-link-color: var(--b3-theme-primary); 134 | --b3-protyle-inline-mark-background: #ffe68d; 135 | --b3-protyle-inline-mark-color: #444; 136 | --b3-protyle-inline-tag-color: #9aa0a6; 137 | --b3-protyle-inline-blockref-color: var(--b3-theme-primary); 138 | 139 | /************** Theme *********************/ 140 | /**** 配色 ****/ 141 | --dock-background: var(--b3-theme-surface); /* 顶栏、dock 栏背景色 */ 142 | --left-sidebar-background: var(--b3-theme-surface); /* 左边栏背景色 */ 143 | --left-sidebar-color: var(--b3-theme-on-surface); /* 左边栏文字颜色 */ 144 | --caret-color: var(--b3-theme-primary); /* 光标颜色 */ 145 | --text-selection-background: var(--b3-theme-primary-lighter); /* 文本选中背景色 */ 146 | --text-selection-color: inherit; /* 文本选中颜色 */ 147 | --inline-code-color: inherit; /* 行内代码文字颜色 */ 148 | --quote-border-width: 2px; /* 引述左边框宽度 */ 149 | --quote-border-color: var(--b3-theme-primary); /* 引述左边框颜色 */ 150 | --quote-color: inherit; /* 引述文字颜色 */ 151 | --quote-background: transparent; /* 引述背景色 */ 152 | 153 | --gutters-hover-background: var(--b3-theme-surface); /* 块图标悬浮时背景色（不要使用透明色） */ 154 | --switch-uncheck-color: #FFF; /* switch 开关未开启时颜色 */ 155 | 156 | --scrollbar-hover-background: #999; /* 滚动条悬浮时背景色 */ 157 | --column-scrollbar-background: var(--b3-scroll-color); /* 边栏内滚动条通用背景色 */ 158 | --column-scrollbar-hover-background: #999; /* 边栏内滚动条悬浮时背景色 */ 159 | 160 | /* 标题颜色 */ 161 | --h1-color: inherit; 162 | --h2-color: inherit; 163 | --h3-color: inherit; 164 | --h4-color: inherit; 165 | --h5-color: inherit; 166 | --h6-color: inherit; 167 | 168 | /**** 设置 ****/ 169 | --dock-border: 0px solid var(--b3-border-color); /* 顶栏、dock、页签栏边框 */ 170 | --column-border: transparent; /* 分栏分割线 */ 171 | --line-height: 1.75em; /* 行高 */ 172 | --margin-top-bottom: 2px; /* 上下 margin */ 173 | --margin-left-right: 0px; /* 左右 margin */ 174 | --padding-top-bottom: 2px; /* 上下 padding */ 175 | --padding-left-right: 4px; /* 左右 padding */ 176 | --block-margin: var(--margin-top-bottom) var(--margin-left-right) !important; /* 块间距 */ 177 | --block-padding: var(--padding-top-bottom) var(--padding-left-right) !important; /* 块内边距 */ 178 | --background-image: url("src/bg.jpg"); /* 背景图 */ 179 | --blur-value: 40px; /* 背景图片模糊程度 */ 180 | --glass-editor-background: rgba(255,255,255,0.1); /* 毛玻璃效果：背景色 */ 181 | --glass-box-shadow: 0 4px 12px rgba(120,120,120,0.35); /* 毛玻璃效果：阴影 */ 182 | 183 | /**** 动画 ****/ 184 | --page-scrollbar-transition: opacity 800ms ease 0s; /* 分页加载条动画 */ 185 | --flex-column-transition: width 200ms cubic-bezier(0, 0.7, 0.4, 1); /* 侧边栏动画 */ 186 | --common-transition: all 1s cubic-bezier(0, 0.7, .2, 1) 0ms; /* 通用动画 */ 187 | } 188 | 189 | /* 调整背景色设置时的字体颜色 */ 190 | strong[style*="background-color: var(--b3-font-background1)"], 191 | strong[style*="background-color: var(--b3-font-background2)"], 192 | strong[style*="background-color: var(--b3-font-background3)"], 193 | strong[style*="background-color: var(--b3-font-background4)"], 194 | strong[style*="background-color: var(--b3-font-background13)"]{ 195 | color:#333 !important; 196 | } -------------------------------------------------------------------------------- /palette/green.css: -------------------------------------------------------------------------------- 1 | /******* Autumn 主题 **********/ 2 | :root { 3 | /* 主色 */ 4 | --b3-theme-primary: #1b9061; /* 主色调，一般用在按钮等其他需要醒目的地方 */ 5 | --b3-theme-primary-light: #1b90618c; /* 主色调的透明色，用于文本选中背景等 */ 6 | --b3-theme-primary-lighter: #1b906160; 7 | --b3-theme-primary-lightest:#1b906120; 8 | --b3-theme-secondary: #f3a92f; 9 | --b3-theme-background: #bee4c1; /* 背景色，主要用于编辑器背景 */ 10 | --b3-theme-surface: #aadcb3; /* 主要用于分栏背景 */ 11 | --b3-theme-surface-light: #f7f6f38c; 12 | --b3-theme-error: #d23f31; 13 | 14 | /* 文字颜色 */ 15 | --b3-theme-on-primary: #fff; /* 主色调上的文字颜色 */ 16 | --b3-theme-on-secondary: #fff; 17 | --b3-theme-on-background:#3c3f47; /* 编辑器上的文字颜色 */ 18 | --b3-theme-on-surface: #3b4147; /* 分栏、面板上的文字颜色 */ 19 | --b3-theme-on-error: #fff; 20 | 21 | 22 | /* 字体 */ 23 | --b3-font-family: "Pingfang SC", "quote", "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; 24 | --b3-font-family-code: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; 25 | --b3-font-family-graph: mononoki; 26 | 27 | /* 线条 */ 28 | --b3-border-color: rgba(0, 0, 0, .05); 29 | 30 | /* 滚动条 */ 31 | --b3-scroll-color: rgba(0, 0, 0, .2); 32 | 33 | /* 列表 */ 34 | --b3-list-hover: rgba(0, 0, 0, .05); 35 | 36 | /* 页签 */ 37 | --b3-tab-background: var(--b3-theme-background); 38 | --b3-tab-background-hover: var(--b3-theme-primary-lightest); 39 | 40 | /* 菜单 */ 41 | --b3-menu-background: var(--b3-theme-background); 42 | 43 | /* 提示 */ 44 | --b3-tooltips-color: rgba(0, 0, 0, 0.7); 45 | 46 | /* 卡片背景 */ 47 | --b3-card-error-color: rgb(97, 26, 21); 48 | --b3-card-error-background: rgb(253, 236, 234); 49 | --b3-card-warning-color: rgb(102, 60, 0); 50 | --b3-card-warning-background:rgb(255, 244, 229); 51 | --b3-card-info-color: rgb(13, 60, 97); 52 | --b3-card-info-background: rgb(232, 244, 253); 53 | --b3-card-success-color: rgb(30, 70, 32); 54 | --b3-card-success-background:rgb(237, 247, 237); 55 | 56 | /* 自定义文字 */ 57 | --b3-font-color1: var(--b3-card-error-color); 58 | --b3-font-color2: var(--b3-card-warning-color); 59 | --b3-font-color3: var(--b3-card-info-color); 60 | --b3-font-color4: var(--b3-card-success-color); 61 | --b3-font-color5: var(--b3-theme-on-surface); 62 | --b3-font-color6: var(--b3-theme-primary); 63 | --b3-font-color7: var(--b3-theme-secondary); 64 | --b3-font-color8: var(--b3-theme-error); 65 | --b3-font-color9: #f5539e; 66 | --b3-font-color10: #944194; 67 | --b3-font-color11: #65b84d; 68 | --b3-font-color12: #f5822e; 69 | --b3-font-color13: var(--b3-theme-background); 70 | --b3-font-background1: var(--b3-card-error-background); 71 | --b3-font-background2: var(--b3-card-warning-background); 72 | --b3-font-background3: var(--b3-card-info-background); 73 | --b3-font-background4: var(--b3-card-success-background); 74 | --b3-font-background5: var(--b3-theme-surface); 75 | --b3-font-background6: var(--b3-theme-primary-light); 76 | --b3-font-background7: rgba(217, 211, 215, 0.5); 77 | --b3-font-background8: rgba(255, 193, 153, 0.5); 78 | --b3-font-background9: rgba(189, 201, 255, 0.5); 79 | --b3-font-background10: rgba(239, 218, 251, 0.5); 80 | --b3-font-background11: rgba(234, 202, 220, 0.5); 81 | --b3-font-background12: rgba(253, 198, 200, 0.5); 82 | --b3-font-background13: var(--b3-theme-on-background); 83 | 84 | /* 动画效果 */ 85 | --b3-transition: all .15s cubic-bezier(0, 0, .2, 1) 0ms; 86 | --b3-width-transition: width .15s cubic-bezier(0, 0, .2, 1) 0ms; 87 | 88 | /* 阴影 */ 89 | --b3-point-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); 90 | --b3-dialog-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 91 | 92 | /* diff */ 93 | --b3-diff-add: #dfd; 94 | --b3-diff-add-surface: #97f295; 95 | --b3-diff-del: #fee8e9; 96 | --b3-diff-del-surface: #ffb6ba; 97 | 98 | /* 图表颜色 */ 99 | --b3-graph-p-point: #076f7e; 100 | --b3-graph-heading-point: #660e7a; 101 | --b3-graph-math-point: #80FFA5; 102 | --b3-graph-code-point: #00DDFF; 103 | --b3-graph-table-point: #37A2FF; 104 | --b3-graph-list-point: #FF0087; 105 | --b3-graph-todo-point: #FFBF00; 106 | --b3-graph-olist-point: #b3005f; 107 | --b3-graph-listitem-point: #f65b00; 108 | --b3-graph-bq-point: #8d48e3; 109 | --b3-graph-super-point: #dd79ff; 110 | --b3-graph-doc-point: #202124; 111 | --b3-graph-tag-point: #dbf32f; 112 | --b3-graph-asset-point: #05c091; 113 | --b3-graph-line: #5f6368; 114 | --b3-graph-ref-line: #d23f31; 115 | --b3-graph-tag-line: #5f6b06; 116 | --b3-graph-tag-tag-line: #dbf32f; 117 | --b3-graph-asset-line: #037457; 118 | --b3-graph-hl-point: #f3a92f; 119 | --b3-graph-hl-line: #4285f4; 120 | 121 | /* 编辑器搜索颜色 */ 122 | --b3-protyle-search-background: #ffe955; 123 | --b3-protyle-search-border-color: #f2e680; 124 | --b3-protyle-search-current-background: #a5d3fe; 125 | 126 | /* 代码片段背景 */ 127 | --b3-protyle-code-background: rgba(27, 31, 35, .05); 128 | 129 | /* 所见即所得行内元素颜色 */ 130 | --b3-protyle-inline-strong-color: inherit; /* 粗体 */ 131 | --b3-protyle-inline-em-color: inherit; /* 斜体 */ 132 | --b3-protyle-inline-s-color: inherit; /* 删除线 */ 133 | --b3-protyle-inline-link-color: var(--b3-theme-primary); /* 超级链接 */ 134 | --b3-protyle-inline-mark-background: #ffe68d; /* 高亮背景 */ 135 | --b3-protyle-inline-mark-color: inherit; /* 高亮文字 */ 136 | --b3-protyle-inline-tag-color: #5f6368; /* 标签 */ 137 | --b3-protyle-inline-blockref-color: var(--b3-theme-primary); /* 双向链接 */ 138 | 139 | /************** Theme *********************/ 140 | /**** 配色 ****/ 141 | --dock-background: var(--b3-theme-surface); /* 顶栏、dock 栏背景色 */ 142 | --left-sidebar-background: var(--b3-theme-surface); /* 左边栏背景色 */ 143 | --left-sidebar-color: var(--b3-theme-on-surface); /* 左边栏文字颜色 */ 144 | --caret-color: var(--b3-theme-primary); /* 光标颜色 */ 145 | --text-selection-background: rgba(45, 170, 219, 0.3); /* 文本选中背景色 */ 146 | --text-selection-color: inherit; /* 文本选中颜色 */ 147 | --inline-code-color: var(--b3-theme-primary); /* 行内代码文字颜色 */ 148 | --quote-border-width: 3px; /* 引述左边框宽度 */ 149 | --quote-border-color: var(--b3-theme-primary); /* 引述左边框颜色 */ 150 | --quote-color: var(--b3-theme-on-surface); /* 引述文字颜色 */ 151 | --quote-background: transparent; /* 引述背景色 */ 152 | 153 | --gutters-hover-background: var(--b3-theme-surface); /* 块图标悬浮时背景色（不要使用透明色） */ 154 | --switch-uncheck-color: #FFF; /* switch 开关未开启时颜色 */ 155 | 156 | --scrollbar-hover-background: #ccc; /* 滚动条悬浮时背景色 */ 157 | --column-scrollbar-background: var(--b3-theme-background); /* 边栏内滚动条通用背景色 */ 158 | --column-scrollbar-hover-background: #ccc; /* 边栏内滚动条悬浮时背景色 */ 159 | 160 | /* 标题颜色 */ 161 | --h1-color: inherit; 162 | --h2-color: inherit; 163 | --h3-color: inherit; 164 | --h4-color: inherit; 165 | --h5-color: inherit; 166 | --h6-color: inherit; 167 | 168 | /**** 设置 ****/ 169 | --dock-border: 1px solid var(--b3-border-color); /* 顶栏、dock、页签栏边框 */ 170 | --column-border: var(--b3-border-color); /* 分栏分割线 */ 171 | --line-height: 1.75em; /* 行高 */ 172 | --margin-top-bottom: 2px; /* 上下 margin */ 173 | --margin-left-right: 0px; /* 左右 margin */ 174 | --padding-top-bottom: 2px; /* 上下 padding */ 175 | --padding-left-right: 4px; /* 左右 padding */ 176 | --block-margin: var(--margin-top-bottom) var(--margin-left-right) !important; /* 块间距 */ 177 | --block-padding: var(--padding-top-bottom) var(--padding-left-right) !important; /* 块内边距 */ 178 | --background-image: url("src/bg.jpg"); /* 背景图 */ 179 | --blur-value: 40px; /* 背景图片模糊程度 */ 180 | --glass-editor-background: rgba(255,255,255,0.1); /* 毛玻璃效果：背景色 */ 181 | --glass-box-shadow: 0 4px 12px rgba(120,120,120,0.35); /* 毛玻璃效果：阴影 */ 182 | 183 | /**** 动画 ****/ 184 | --page-scrollbar-transition: opacity 800ms ease 0s; /* 分页加载条动画 */ 185 | --flex-column-transition: width 200ms cubic-bezier(0, 0.7, 0.4, 1); /* 侧边栏动画 */ 186 | --common-transition: all 1s cubic-bezier(0, 0.7, .2, 1) 0ms; /* 通用动画 */ 187 | 188 | } 189 | 190 | /**** 特殊样式 ****/ 191 | /* 工具栏选中状态 */ 192 | .protyle-toolbar__item--current{ 193 | color: rgba(45, 170, 219, 1); 194 | } 195 | /**/ -------------------------------------------------------------------------------- /palette/light.css: -------------------------------------------------------------------------------- 1 | /******* 亮色主题配色模板 **********/ 2 | :root { 3 | /* 主色 */ 4 | --b3-theme-primary: #444444; /* 主色调，一般用在按钮等其他需要醒目的地方 */ 5 | --b3-theme-primary-light: #4444448c; /* 主色调的透明色，用于文本选中背景等 */ 6 | --b3-theme-primary-lighter: #44444460; 7 | --b3-theme-primary-lightest:#44444420; 8 | --b3-theme-secondary: #f3a92f; 9 | --b3-theme-background: #FFFFFF; /* 背景色，主要用于编辑器背景 */ 10 | --b3-theme-surface: #f7f6f3; /* 主要用于分栏背景 */ 11 | --b3-theme-surface-light: rgba(243, 243, 243, .86); 12 | --b3-theme-error: #d23f31; 13 | 14 | /* 文字颜色 */ 15 | --b3-theme-on-primary: #fff; /* 主色调上的文字颜色 */ 16 | --b3-theme-on-secondary: #fff; 17 | --b3-theme-on-background:#444444; /* 编辑器上的文字颜色 */ 18 | --b3-theme-on-surface: #666666; /* 分栏、面板上的文字颜色 */ 19 | --b3-theme-on-error: #fff; 20 | 21 | 22 | /* 字体 */ 23 | --b3-font-family: "Pingfang SC", "quote", "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; 24 | --b3-font-family-code: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; 25 | --b3-font-family-graph: mononoki; 26 | 27 | /* 线条 */ 28 | --b3-border-color: rgba(0, 0, 0, .05); 29 | 30 | /* 滚动条 */ 31 | --b3-scroll-color: rgba(0, 0, 0, .2); 32 | 33 | /* 列表 */ 34 | --b3-list-hover: rgba(0, 0, 0, .05); 35 | 36 | /* 页签 */ 37 | --b3-tab-background: var(--b3-theme-background); 38 | --b3-tab-background-hover: var(--b3-theme-primary-lightest); 39 | 40 | /* 菜单 */ 41 | --b3-menu-background: var(--b3-theme-background); 42 | 43 | /* 提示 */ 44 | --b3-tooltips-color: rgba(0, 0, 0, 0.7); 45 | 46 | /* 卡片背景 */ 47 | --b3-card-error-color: rgb(97, 26, 21); 48 | --b3-card-error-background: rgb(253, 236, 234); 49 | --b3-card-warning-color: rgb(102, 60, 0); 50 | --b3-card-warning-background:rgb(255, 244, 229); 51 | --b3-card-info-color: rgb(13, 60, 97); 52 | --b3-card-info-background: rgb(232, 244, 253); 53 | --b3-card-success-color: rgb(30, 70, 32); 54 | --b3-card-success-background:rgb(237, 247, 237); 55 | 56 | /* 自定义文字 */ 57 | --b3-font-color1: var(--b3-card-error-color); 58 | --b3-font-color2: var(--b3-card-warning-color); 59 | --b3-font-color3: var(--b3-card-info-color); 60 | --b3-font-color4: var(--b3-card-success-color); 61 | --b3-font-color5: var(--b3-theme-on-surface); 62 | --b3-font-color6: var(--b3-theme-primary); 63 | --b3-font-color7: var(--b3-theme-secondary); 64 | --b3-font-color8: var(--b3-theme-error); 65 | --b3-font-color9: #f5539e; 66 | --b3-font-color10: #944194; 67 | --b3-font-color11: #65b84d; 68 | --b3-font-color12: #f5822e; 69 | --b3-font-color13: var(--b3-theme-background); 70 | --b3-font-background1: var(--b3-card-error-background); 71 | --b3-font-background2: var(--b3-card-warning-background); 72 | --b3-font-background3: var(--b3-card-info-background); 73 | --b3-font-background4: var(--b3-card-success-background); 74 | --b3-font-background5: var(--b3-theme-surface); 75 | --b3-font-background6: var(--b3-theme-primary-light); 76 | --b3-font-background7: rgba(217, 211, 215, 0.5); 77 | --b3-font-background8: rgba(255, 193, 153, 0.5); 78 | --b3-font-background9: rgba(189, 201, 255, 0.5); 79 | --b3-font-background10: rgba(239, 218, 251, 0.5); 80 | --b3-font-background11: rgba(234, 202, 220, 0.5); 81 | --b3-font-background12: rgba(253, 198, 200, 0.5); 82 | --b3-font-background13: var(--b3-theme-on-background); 83 | 84 | /* 动画效果 */ 85 | --b3-transition: all .15s cubic-bezier(0, 0, .2, 1) 0ms; 86 | --b3-width-transition: width .15s cubic-bezier(0, 0, .2, 1) 0ms; 87 | 88 | /* 阴影 */ 89 | --b3-point-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); 90 | --b3-dialog-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 91 | 92 | /* diff */ 93 | --b3-diff-add: #dfd; 94 | --b3-diff-add-surface: #97f295; 95 | --b3-diff-del: #fee8e9; 96 | --b3-diff-del-surface: #ffb6ba; 97 | 98 | /* 图表颜色 */ 99 | --b3-graph-p-point: #076f7e; 100 | --b3-graph-heading-point: #660e7a; 101 | --b3-graph-math-point: #80FFA5; 102 | --b3-graph-code-point: #00DDFF; 103 | --b3-graph-table-point: #37A2FF; 104 | --b3-graph-list-point: #FF0087; 105 | --b3-graph-todo-point: #FFBF00; 106 | --b3-graph-olist-point: #b3005f; 107 | --b3-graph-listitem-point: #f65b00; 108 | --b3-graph-bq-point: #8d48e3; 109 | --b3-graph-super-point: #dd79ff; 110 | --b3-graph-doc-point: #202124; 111 | --b3-graph-tag-point: #dbf32f; 112 | --b3-graph-asset-point: #05c091; 113 | --b3-graph-line: #5f6368; 114 | --b3-graph-ref-line: #d23f31; 115 | --b3-graph-tag-line: #5f6b06; 116 | --b3-graph-tag-tag-line: #dbf32f; 117 | --b3-graph-asset-line: #037457; 118 | --b3-graph-hl-point: #f3a92f; 119 | --b3-graph-hl-line: #4285f4; 120 | 121 | /* 编辑器搜索颜色 */ 122 | --b3-protyle-search-background: #ffe955; 123 | --b3-protyle-search-border-color: #f2e680; 124 | --b3-protyle-search-current-background: #a5d3fe; 125 | 126 | /* 代码片段背景 */ 127 | --b3-protyle-code-background: rgba(27, 31, 35, .05); 128 | 129 | /* 所见即所得行内元素颜色 */ 130 | --b3-protyle-inline-strong-color: inherit; /* 粗体 */ 131 | --b3-protyle-inline-em-color: inherit; /* 斜体 */ 132 | --b3-protyle-inline-s-color: inherit; /* 删除线 */ 133 | --b3-protyle-inline-link-color: var(--b3-theme-primary); /* 超级链接 */ 134 | --b3-protyle-inline-mark-background: #ffe68d; /* 高亮背景 */ 135 | --b3-protyle-inline-mark-color: inherit; /* 高亮文字 */ 136 | --b3-protyle-inline-tag-color: #5f6368; /* 标签 */ 137 | --b3-protyle-inline-blockref-color: var(--b3-theme-primary); /* 双向链接 */ 138 | 139 | /************** Theme *********************/ 140 | /**** 配色 ****/ 141 | --dock-background: var(--b3-theme-surface); /* 顶栏、dock 栏背景色 */ 142 | --left-sidebar-background: var(--b3-theme-surface); /* 左边栏背景色 */ 143 | --left-sidebar-color: var(--b3-theme-on-surface); /* 左边栏文字颜色 */ 144 | --caret-color: var(--b3-theme-primary); /* 光标颜色 */ 145 | --text-selection-background: var(--b3-theme-primary-lightest); /* 文本选中背景色 */ 146 | --text-selection-color: inherit; /* 文本选中颜色 */ 147 | --inline-code-color: inherit; /* 行内代码文字颜色 */ 148 | --quote-border-width: 3px; /* 引述左边框宽度 */ 149 | --quote-border-color: var(--b3-theme-primary); /* 引述左边框颜色 */ 150 | --quote-color: var(--b3-theme-on-surface); /* 引述文字颜色 */ 151 | --quote-background: transparent; /* 引述背景色 */ 152 | 153 | --gutters-hover-background: var(--b3-theme-surface); /* 块图标悬浮时背景色（不要使用透明色） */ 154 | --switch-uncheck-color: #FFF; /* switch 开关未开启时颜色 */ 155 | 156 | --scrollbar-hover-background: #ccc; /* 滚动条悬浮时背景色 */ 157 | --column-scrollbar-background: var(--b3-theme-background); /* 边栏内滚动条通用背景色 */ 158 | --column-scrollbar-hover-background: #ccc; /* 边栏内滚动条悬浮时背景色 */ 159 | 160 | /* 标题颜色 */ 161 | --h1-color: inherit; 162 | --h2-color: inherit; 163 | --h3-color: inherit; 164 | --h4-color: inherit; 165 | --h5-color: inherit; 166 | --h6-color: inherit; 167 | 168 | /**** 设置 ****/ 169 | --dock-border: 1px solid var(--b3-border-color); /* 顶栏、dock、页签栏边框 */ 170 | --column-border: var(--b3-border-color); /* 分栏分割线 */ 171 | --line-height: 1.75em; /* 行高 */ 172 | --margin-top-bottom: 2px; /* 上下 margin */ 173 | --margin-left-right: 0px; /* 左右 margin */ 174 | --padding-top-bottom: 2px; /* 上下 padding */ 175 | --padding-left-right: 4px; /* 左右 padding */ 176 | --block-margin: var(--margin-top-bottom) var(--margin-left-right) !important; /* 块间距 */ 177 | --block-padding: var(--padding-top-bottom) var(--padding-left-right) !important; /* 块内边距 */ 178 | --background-image: url("src/bg.jpg"); /* 背景图 */ 179 | --blur-value: 40px; /* 背景图片模糊程度 */ 180 | --glass-editor-background: rgba(255,255,255,0.1); /* 毛玻璃效果：背景色 */ 181 | --glass-box-shadow: 0 4px 12px rgba(120,120,120,0.35); /* 毛玻璃效果：阴影 */ 182 | 183 | /**** 动画 ****/ 184 | --page-scrollbar-transition: opacity 800ms ease 0s; /* 分页加载条动画 */ 185 | --flex-column-transition: width 200ms cubic-bezier(0, 0.7, 0.4, 1); /* 侧边栏动画 */ 186 | --common-transition: all 1s cubic-bezier(0, 0.7, .2, 1) 0ms; /* 通用动画 */ 187 | 188 | } 189 | 190 | /**** 特殊样式 ****/ 191 | /* 工具栏选中状态 * 192 | .protyle-toolbar__item--current{ 193 | color: rgba(45, 170, 219, 1); 194 | } 195 | **/ -------------------------------------------------------------------------------- /palette/spring.css: -------------------------------------------------------------------------------- 1 | /******* Spring ********** 2 | 需要在 theme.css 开启左边栏背景图功能 3 | ************/ 4 | :root { 5 | /* 主色 */ 6 | --b3-theme-primary: #25A56A; /* 主色调，一般用在按钮等其他需要醒目的地方 */ 7 | --b3-theme-primary-light: rgba(66, 186, 130, 0.54); /* 主色调的透明色，用于文本选中背景等 */ 8 | --b3-theme-primary-lighter: rgba(66, 186, 130, 0.3); 9 | --b3-theme-primary-lightest:rgba(66, 186, 130, 0.1); 10 | --b3-theme-secondary: #f3a92f; 11 | --b3-theme-background: #FFFFFF; /* 背景色，主要用于编辑器背景 */ 12 | --b3-theme-surface: #f9f9f9; /* 主要用于分栏背景 */ 13 | --b3-theme-surface-light: #f9f9f98c; 14 | --b3-theme-error: #d23f31; 15 | 16 | /* 文字颜色 */ 17 | --b3-theme-on-primary: #fff; /* 主色调上的文字颜色 */ 18 | --b3-theme-on-secondary: #fff; 19 | --b3-theme-on-background:#404040; /* 编辑器上的文字颜色 */ 20 | --b3-theme-on-surface: #666666; /* 分栏、面板上的文字颜色 */ 21 | --b3-theme-on-error: #fff; 22 | 23 | 24 | /* 字体 */ 25 | --b3-font-family: "Pingfang SC", "quote", "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; 26 | --b3-font-family-code: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; 27 | --b3-font-family-graph: mononoki; 28 | 29 | /* 线条 */ 30 | --b3-border-color: rgba(0, 0, 0, .05); 31 | 32 | /* 滚动条 */ 33 | --b3-scroll-color: rgba(0, 0, 0, .2); 34 | 35 | /* 列表 */ 36 | --b3-list-hover: rgba(0, 0, 0, .05); 37 | 38 | /* 页签 */ 39 | --b3-tab-background: var(--b3-theme-background); 40 | --b3-tab-background-hover: var(--b3-theme-primary-lightest); 41 | 42 | /* 菜单 */ 43 | --b3-menu-background: var(--b3-theme-background); 44 | 45 | /* 提示 */ 46 | --b3-tooltips-color: rgba(0, 0, 0, 0.7); 47 | 48 | /* 卡片背景 */ 49 | --b3-card-error-color: rgb(97, 26, 21); 50 | --b3-card-error-background: rgb(253, 236, 234); 51 | --b3-card-warning-color: rgb(102, 60, 0); 52 | --b3-card-warning-background:rgb(255, 244, 229); 53 | --b3-card-info-color: rgb(13, 60, 97); 54 | --b3-card-info-background: rgb(232, 244, 253); 55 | --b3-card-success-color: rgb(30, 70, 32); 56 | --b3-card-success-background:rgb(237, 247, 237); 57 | 58 | /* 自定义文字 */ 59 | --b3-font-color1: var(--b3-card-error-color); 60 | --b3-font-color2: var(--b3-card-warning-color); 61 | --b3-font-color3: var(--b3-card-info-color); 62 | --b3-font-color4: var(--b3-card-success-color); 63 | --b3-font-color5: var(--b3-theme-on-surface); 64 | --b3-font-color6: var(--b3-theme-primary); 65 | --b3-font-color7: var(--b3-theme-secondary); 66 | --b3-font-color8: var(--b3-theme-error); 67 | --b3-font-color9: #f5539e; 68 | --b3-font-color10: #944194; 69 | --b3-font-color11: #65b84d; 70 | --b3-font-color12: #f5822e; 71 | --b3-font-color13: var(--b3-theme-background); 72 | --b3-font-background1: var(--b3-card-error-background); 73 | --b3-font-background2: var(--b3-card-warning-background); 74 | --b3-font-background3: var(--b3-card-info-background); 75 | --b3-font-background4: var(--b3-card-success-background); 76 | --b3-font-background5: var(--b3-theme-surface); 77 | --b3-font-background6: var(--b3-theme-primary-light); 78 | --b3-font-background7: rgba(217, 211, 215, 0.5); 79 | --b3-font-background8: rgba(255, 193, 153, 0.5); 80 | --b3-font-background9: rgba(189, 201, 255, 0.5); 81 | --b3-font-background10: rgba(239, 218, 251, 0.5); 82 | --b3-font-background11: rgba(234, 202, 220, 0.5); 83 | --b3-font-background12: rgba(253, 198, 200, 0.5); 84 | --b3-font-background13: var(--b3-theme-on-background); 85 | 86 | /* 动画效果 */ 87 | --b3-transition: all .15s cubic-bezier(0, 0, .2, 1) 0ms; 88 | --b3-width-transition: width .15s cubic-bezier(0, 0, .2, 1) 0ms; 89 | 90 | /* 阴影 */ 91 | --b3-point-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); 92 | --b3-dialog-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 93 | 94 | /* diff */ 95 | --b3-diff-add: #dfd; 96 | --b3-diff-add-surface: #97f295; 97 | --b3-diff-del: #fee8e9; 98 | --b3-diff-del-surface: #ffb6ba; 99 | 100 | /* 图表颜色 */ 101 | --b3-graph-p-point: #076f7e; 102 | --b3-graph-heading-point: #660e7a; 103 | --b3-graph-math-point: #80FFA5; 104 | --b3-graph-code-point: #00DDFF; 105 | --b3-graph-table-point: #37A2FF; 106 | --b3-graph-list-point: #FF0087; 107 | --b3-graph-todo-point: #FFBF00; 108 | --b3-graph-olist-point: #b3005f; 109 | --b3-graph-listitem-point: #f65b00; 110 | --b3-graph-bq-point: #8d48e3; 111 | --b3-graph-super-point: #dd79ff; 112 | --b3-graph-doc-point: #202124; 113 | --b3-graph-tag-point: #dbf32f; 114 | --b3-graph-asset-point: #05c091; 115 | --b3-graph-line: #5f6368; 116 | --b3-graph-ref-line: #d23f31; 117 | --b3-graph-tag-line: #5f6b06; 118 | --b3-graph-tag-tag-line: #dbf32f; 119 | --b3-graph-asset-line: #037457; 120 | --b3-graph-hl-point: #f3a92f; 121 | --b3-graph-hl-line: #4285f4; 122 | 123 | /* 编辑器搜索颜色 */ 124 | --b3-protyle-search-background: #ffe955; 125 | --b3-protyle-search-border-color: #f2e680; 126 | --b3-protyle-search-current-background: #a5d3fe; 127 | 128 | /* 代码片段背景 */ 129 | --b3-protyle-code-background: rgba(27, 31, 35, .05); 130 | 131 | /* 所见即所得行内元素颜色 */ 132 | --b3-protyle-inline-strong-color: inherit; /* 粗体 */ 133 | --b3-protyle-inline-em-color: inherit; /* 斜体 */ 134 | --b3-protyle-inline-s-color: inherit; /* 删除线 */ 135 | --b3-protyle-inline-link-color: var(--b3-theme-primary); /* 超级链接 */ 136 | --b3-protyle-inline-mark-background: #ffe68d; /* 高亮背景 */ 137 | --b3-protyle-inline-mark-color: inherit; /* 高亮文字 */ 138 | --b3-protyle-inline-tag-color: #5f6368; /* 标签 */ 139 | --b3-protyle-inline-blockref-color: var(--b3-theme-primary); /* 双向链接 */ 140 | 141 | /************** Theme *********************/ 142 | /**** 配色 ****/ 143 | --dock-background: var(--b3-theme-surface); /* 顶栏、dock 栏背景色 */ 144 | --left-sidebar-background: var(--b3-theme-surface); /* 左边栏背景色 */ 145 | --left-sidebar-color: var(--b3-theme-on-surface); /* 左边栏文字颜色 */ 146 | --caret-color: var(--b3-theme-primary); /* 光标颜色 */ 147 | --text-selection-background: var(--b3-theme-primary-lightest); /* 文本选中背景色 */ 148 | --text-selection-color: inherit; /* 文本选中颜色 */ 149 | --inline-code-color: var(--b3-theme-primary); /* 行内代码文字颜色 */ 150 | --quote-border-width: 2px; /* 引述左边框宽度 */ 151 | --quote-border-color: var(--b3-theme-primary); /* 引述左边框颜色 */ 152 | --quote-color: var(--b3-theme-on-surface); /* 引述文字颜色 */ 153 | --quote-background: transparent; /* 引述背景色 */ 154 | 155 | --gutters-hover-background: var(--b3-theme-surface); /* 块图标悬浮时背景色（不要使用透明色） */ 156 | --switch-uncheck-color: #FFF; /* switch 开关未开启时颜色 */ 157 | 158 | --scrollbar-hover-background: #ccc; /* 滚动条悬浮时背景色 */ 159 | --column-scrollbar-background: rgba(23, 155, 147, 0.13); /* 边栏内滚动条通用背景色 */ 160 | --column-scrollbar-hover-background: rgba(20, 20, 20, 0.13); /* 边栏内滚动条悬浮时背景色 */ 161 | 162 | /* 标题颜色 */ 163 | --h1-color: inherit; 164 | --h2-color: inherit; 165 | --h3-color: inherit; 166 | --h4-color: inherit; 167 | --h5-color: inherit; 168 | --h6-color: inherit; 169 | 170 | /**** 设置 ****/ 171 | --dock-border: 1px solid var(--b3-border-color); /* 顶栏、dock、页签栏边框 */ 172 | --column-border: var(--b3-border-color); /* 分栏分割线 */ 173 | --line-height: 1.75em; /* 行高 */ 174 | --margin-top-bottom: 2px; /* 上下 margin */ 175 | --margin-left-right: 0px; /* 左右 margin */ 176 | --padding-top-bottom: 2px; /* 上下 padding */ 177 | --padding-left-right: 4px; /* 左右 padding */ 178 | --block-margin: var(--margin-top-bottom) var(--margin-left-right) !important; /* 块间距 */ 179 | --block-padding: var(--padding-top-bottom) var(--padding-left-right) !important; /* 块内边距 */ 180 | --background-image: url("src/bg.jpg"); /* 背景图 */ 181 | --blur-value: 20px; /* 背景图片模糊程度 */ 182 | --glass-editor-background: rgba(255,255,255,0.1); /* 毛玻璃效果：背景色 */ 183 | --glass-box-shadow: 0 4px 12px rgba(120,120,120,0.35); /* 毛玻璃效果：阴影 */ 184 | 185 | /**** 动画 ****/ 186 | --page-scrollbar-transition: opacity 800ms ease 0s; /* 分页加载条动画 */ 187 | --flex-column-transition: width 200ms cubic-bezier(0, 0.7, 0.4, 1); /* 侧边栏动画 */ 188 | --common-transition: all 1s cubic-bezier(0, 0.7, .2, 1) 0ms; /* 通用动画 */ 189 | 190 | } 191 | 192 | /**** 特殊样式 ****/ 193 | /* 工具栏选中状态 * 194 | .protyle-toolbar__item--current{ 195 | color: rgba(45, 170, 219, 1); 196 | } 197 | **/ -------------------------------------------------------------------------------- /palette/tonight.css: -------------------------------------------------------------------------------- 1 | /******* Tonight 主题 **********/ 2 | :root { 3 | /* 主色 */ 4 | --b3-theme-primary: #FFED72; 5 | --b3-theme-primary-light: rgba(255, 237, 114, 0.54); 6 | --b3-theme-primary-lighter: rgba(255, 237, 114, 0.38); 7 | --b3-theme-primary-lightest:rgba(255, 237, 114, 0.12); 8 | --b3-theme-secondary: #f3a92f; 9 | --b3-theme-background: #273136; 10 | --b3-theme-surface: #1D2528; 11 | --b3-theme-surface-light: #1D25288C; 12 | --b3-theme-error: #E26473; 13 | 14 | /* 文字颜色 */ 15 | --b3-theme-on-primary: #161B1E; 16 | --b3-theme-on-secondary: #fff; 17 | --b3-theme-on-background:#dfdfdf; 18 | --b3-theme-on-surface: #6B7678; 19 | --b3-theme-on-error: #fff; 20 | 21 | /* 字体 */ 22 | --b3-font-family: "Pingfang SC", "quote", "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; 23 | --b3-font-family-code: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; 24 | --b3-font-family-graph: mononoki; 25 | 26 | /* 线条 */ 27 | --b3-border-color: rgba(230, 230, 230, .1); 28 | 29 | /* 滚动条 */ 30 | --b3-scroll-color: rgba(230, 230, 230, .2); 31 | 32 | /* 列表 */ 33 | --b3-list-hover: rgba(230, 230, 230, .05); 34 | 35 | /* 页签 */ 36 | --b3-tab-background: var(--b3-theme-background); 37 | --b3-tab-background-hover: var(--b3-theme-primary-lightest); 38 | 39 | /* 菜单 */ 40 | --b3-menu-background: var(--b3-theme-background); 41 | 42 | /* 提示 */ 43 | --b3-tooltips-color: rgba(70, 72, 76, .86); 44 | 45 | /* 卡片背景 */ 46 | --b3-card-error-color: #6D2833; 47 | --b3-card-error-background: #d8b0ae; 48 | --b3-card-warning-color: #6D360B; 49 | --b3-card-warning-background: #dac28b; 50 | --b3-card-info-color: #084970; 51 | --b3-card-info-background: #85BBDC; 52 | --b3-card-success-color: #073E26; 53 | --b3-card-success-background: #A2D1BC; 54 | 55 | /* 自定义文字 */ 56 | --b3-font-color1: var(--b3-card-error-color); 57 | --b3-font-color2: var(--b3-card-warning-color); 58 | --b3-font-color3: var(--b3-card-info-color); 59 | --b3-font-color4: var(--b3-card-success-color); 60 | --b3-font-color5: var(--b3-theme-on-surface); 61 | --b3-font-color6: var(--b3-theme-primary); 62 | --b3-font-color7: var(--b3-theme-secondary); 63 | --b3-font-color8: var(--b3-theme-error); 64 | --b3-font-color9: #f5539e; 65 | --b3-font-color10: #944194; 66 | --b3-font-color11: #65b84d; 67 | --b3-font-color12: #f5822e; 68 | --b3-font-color13: var(--b3-theme-background); 69 | --b3-font-background1: var(--b3-card-error-background); 70 | --b3-font-background2: var(--b3-card-warning-background); 71 | --b3-font-background3: var(--b3-card-info-background); 72 | --b3-font-background4: var(--b3-card-success-background); 73 | --b3-font-background5: var(--b3-theme-surface); 74 | --b3-font-background6: var(--b3-theme-primary-light); 75 | --b3-font-background7: rgba(217, 211, 215, 0.5); 76 | --b3-font-background8: rgba(255, 193, 153, 0.5); 77 | --b3-font-background9: rgba(189, 201, 255, 0.5); 78 | --b3-font-background10: rgba(239, 218, 251, 0.5); 79 | --b3-font-background11: rgba(234, 202, 220, 0.5); 80 | --b3-font-background12: rgba(253, 198, 200, 0.5); 81 | --b3-font-background13: var(--b3-theme-on-background); 82 | 83 | /* 动画效果 */ 84 | --b3-transition: all .15s cubic-bezier(0, 0, .2, 1) 0ms; 85 | --b3-width-transition: width .15s cubic-bezier(0, 0, .2, 1) 0ms; 86 | 87 | /* 阴影 */ 88 | --b3-point-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); 89 | --b3-dialog-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 90 | 91 | 92 | /* diff */ 93 | --b3-diff-add: #133a1c; 94 | --b3-diff-add-surface: #28853e; 95 | --b3-diff-del: #440c10; 96 | --b3-diff-del-surface: #b1202d; 97 | 98 | /* 图表颜色 */ 99 | --b3-graph-p-point: #076f7e; 100 | --b3-graph-heading-point: #9876aa; 101 | --b3-graph-math-point: #80FFA5; 102 | --b3-graph-code-point: #00DDFF; 103 | --b3-graph-table-point: #37A2FF; 104 | --b3-graph-list-point: #FF0087; 105 | --b3-graph-todo-point: #FFBF00; 106 | --b3-graph-olist-point: #b3005f; 107 | --b3-graph-listitem-point: #f65b00; 108 | --b3-graph-bq-point: #8d48e3; 109 | --b3-graph-super-point: #dd79ff; 110 | --b3-graph-doc-point: #e8eaed; 111 | --b3-graph-tag-point: #dbf32f; 112 | --b3-graph-asset-point: #05c091; 113 | --b3-graph-line: #9aa0a6; 114 | --b3-graph-ref-line: #d23f31; 115 | --b3-graph-tag-line: #5f6b06; 116 | --b3-graph-tag-tag-line: #dbf32f; 117 | --b3-graph-asset-line: #037457; 118 | --b3-graph-hl-point: #f3a92f; 119 | --b3-graph-hl-line: #4285f4; 120 | 121 | /* 编辑器搜索颜色 */ 122 | --b3-protyle-search-background: #32593c; 123 | --b3-protyle-search-border-color: #486a51; 124 | --b3-protyle-search-current-background: #204282; 125 | 126 | /* 代码片段背景 */ 127 | --b3-protyle-code-background: #2f4945; 128 | 129 | /* 所见即所得行内元素颜色 */ 130 | --b3-protyle-inline-strong-color: inherit; 131 | --b3-protyle-inline-em-color: inherit; 132 | --b3-protyle-inline-s-color: inherit; 133 | --b3-protyle-inline-link-color: #96D274; 134 | --b3-protyle-inline-mark-background: #b77200; 135 | --b3-protyle-inline-mark-color: var(--b3-theme-on-background); 136 | --b3-protyle-inline-tag-color: #6A9FB5; 137 | --b3-protyle-inline-blockref-color: var(--b3-theme-primary); 138 | 139 | /************** Theme *********************/ 140 | /**** 配色 ****/ 141 | --dock-background: var(--b3-theme-on-primary); /* 顶栏、dock 栏背景色 */ 142 | --left-sidebar-background: var(--b3-theme-surface); /* 左边栏背景色 */ 143 | --left-sidebar-color: var(--b3-theme-on-surface); /* 左边栏文字颜色 */ 144 | --caret-color: var(--b3-theme-primary); /* 光标颜色 */ 145 | --text-selection-background: var(--b3-theme-primary-lighter); /* 文本选中背景色 */ 146 | --text-selection-color: inherit; /* 文本选中颜色 */ 147 | --inline-code-color: #75cff5; /* 行内代码文字颜色 */ 148 | --quote-border-width: 2px; /* 引述左边框宽度 */ 149 | --quote-border-color: var(--b3-protyle-inline-tag-color); /* 引述左边框颜色 */ 150 | --quote-color: inherit; /* 引述文字颜色 */ 151 | --quote-background: transparent; /* 引述背景色 */ 152 | 153 | --gutters-hover-background: var(--b3-theme-surface); /* 块图标悬浮时背景色（不要使用透明色） */ 154 | --switch-uncheck-color: #FFF; /* switch 开关未开启时颜色 */ 155 | 156 | --scrollbar-hover-background: #999; /* 滚动条悬浮时背景色 */ 157 | --column-scrollbar-background: var(--b3-scroll-color); /* 边栏内滚动条通用背景色 */ 158 | --column-scrollbar-hover-background: #999; /* 边栏内滚动条悬浮时背景色 */ 159 | 160 | /* 标题颜色 */ 161 | --h1-color: inherit; 162 | --h2-color: inherit; 163 | --h3-color: inherit; 164 | --h4-color: inherit; 165 | --h5-color: inherit; 166 | --h6-color: inherit; 167 | 168 | /**** 设置 ****/ 169 | --dock-border: 0px solid var(--b3-border-color); /* 顶栏、dock、页签栏边框 */ 170 | --column-border: transparent; /* 分栏分割线 */ 171 | --line-height: 1.75em; /* 行高 */ 172 | --margin-top-bottom: 2px; /* 上下 margin */ 173 | --margin-left-right: 0px; /* 左右 margin */ 174 | --padding-top-bottom: 2px; /* 上下 padding */ 175 | --padding-left-right: 4px; /* 左右 padding */ 176 | --block-margin: var(--margin-top-bottom) var(--margin-left-right) !important; /* 块间距 */ 177 | --block-padding: var(--padding-top-bottom) var(--padding-left-right) !important; /* 块内边距 */ 178 | --background-image: url("src/bg.jpg"); /* 背景图 */ 179 | --blur-value: 40px; /* 背景图片模糊程度 */ 180 | --glass-editor-background: rgba(255,255,255,0.1); /* 毛玻璃效果：背景色 */ 181 | --glass-box-shadow: 0 4px 12px rgba(120,120,120,0.35); /* 毛玻璃效果：阴影 */ 182 | 183 | /**** 动画 ****/ 184 | --page-scrollbar-transition: opacity 800ms ease 0s; /* 分页加载条动画 */ 185 | --flex-column-transition: width 200ms cubic-bezier(0, 0.7, 0.4, 1); /* 侧边栏动画 */ 186 | --common-transition: all 1s cubic-bezier(0, 0.7, .2, 1) 0ms; /* 通用动画 */ 187 | } 188 | 189 | /* 调整背景色设置时的字体颜色 */ 190 | strong[style*="background-color: var(--b3-font-background1)"], 191 | strong[style*="background-color: var(--b3-font-background2)"], 192 | strong[style*="background-color: var(--b3-font-background3)"], 193 | strong[style*="background-color: var(--b3-font-background4)"], 194 | strong[style*="background-color: var(--b3-font-background13)"]{ 195 | color:#333 !important; 196 | } -------------------------------------------------------------------------------- /palette/winter.css: -------------------------------------------------------------------------------- 1 | /******* Winter 主题 **********/ 2 | :root { 3 | /* 主色 */ 4 | --b3-theme-primary: #444444; /* 主色调，一般用在按钮等其他需要醒目的地方 */ 5 | --b3-theme-primary-light: #4444448c; /* 主色调的透明色，用于文本选中背景等 */ 6 | --b3-theme-primary-lighter: #44444460; 7 | --b3-theme-primary-lightest:#44444410; 8 | --b3-theme-secondary: #f3a92f; 9 | --b3-theme-background: #FFFFFF; /* 背景色，主要用于编辑器背景 */ 10 | --b3-theme-surface: #f7f6f3; /* 主要用于分栏背景 */ 11 | --b3-theme-surface-light: rgba(243, 243, 243, .86); 12 | --b3-theme-error: #d23f31; 13 | 14 | /* 文字颜色 */ 15 | --b3-theme-on-primary: #fff; /* 主色调上的文字颜色 */ 16 | --b3-theme-on-secondary: #fff; 17 | --b3-theme-on-background:#444444; /* 编辑器上的文字颜色 */ 18 | --b3-theme-on-surface: rgba(25, 23, 17, 0.6); /* 分栏、面板上的文字颜色 */ 19 | --b3-theme-on-error: #fff; 20 | 21 | 22 | /* 字体 */ 23 | --b3-font-family: "Pingfang SC", "quote", "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; 24 | --b3-font-family-code: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; 25 | --b3-font-family-graph: mononoki; 26 | 27 | /* 线条 */ 28 | --b3-border-color: rgba(0, 0, 0, .05); 29 | 30 | /* 滚动条 */ 31 | --b3-scroll-color: rgba(0, 0, 0, .2); 32 | 33 | /* 列表 */ 34 | --b3-list-hover: rgba(0, 0, 0, .05); 35 | 36 | /* 页签 */ 37 | --b3-tab-background: var(--b3-theme-background); 38 | --b3-tab-background-hover: var(--b3-theme-primary-lightest); 39 | 40 | /* 菜单 */ 41 | --b3-menu-background: var(--b3-theme-background); 42 | 43 | /* 提示 */ 44 | --b3-tooltips-color: rgba(0, 0, 0, 0.7); 45 | 46 | /* 卡片背景 */ 47 | --b3-card-error-color: rgb(97, 26, 21); 48 | --b3-card-error-background: rgb(253, 236, 234); 49 | --b3-card-warning-color: rgb(102, 60, 0); 50 | --b3-card-warning-background:rgb(255, 244, 229); 51 | --b3-card-info-color: rgb(13, 60, 97); 52 | --b3-card-info-background: rgb(232, 244, 253); 53 | --b3-card-success-color: rgb(30, 70, 32); 54 | --b3-card-success-background:rgb(237, 247, 237); 55 | 56 | /* 自定义文字 */ 57 | --b3-font-color1: var(--b3-card-error-color); 58 | --b3-font-color2: var(--b3-card-warning-color); 59 | --b3-font-color3: var(--b3-card-info-color); 60 | --b3-font-color4: var(--b3-card-success-color); 61 | --b3-font-color5: var(--b3-theme-on-surface); 62 | --b3-font-color6: var(--b3-theme-primary); 63 | --b3-font-color7: var(--b3-theme-secondary); 64 | --b3-font-color8: var(--b3-theme-error); 65 | --b3-font-color9: #f5539e; 66 | --b3-font-color10: #944194; 67 | --b3-font-color11: #65b84d; 68 | --b3-font-color12: #f5822e; 69 | --b3-font-color13: var(--b3-theme-background); 70 | --b3-font-background1: var(--b3-card-error-background); 71 | --b3-font-background2: var(--b3-card-warning-background); 72 | --b3-font-background3: var(--b3-card-info-background); 73 | --b3-font-background4: var(--b3-card-success-background); 74 | --b3-font-background5: var(--b3-theme-surface); 75 | --b3-font-background6: var(--b3-theme-primary-light); 76 | --b3-font-background7: rgba(217, 211, 215, 0.5); 77 | --b3-font-background8: rgba(255, 193, 153, 0.5); 78 | --b3-font-background9: rgba(189, 201, 255, 0.5); 79 | --b3-font-background10: rgba(239, 218, 251, 0.5); 80 | --b3-font-background11: rgba(234, 202, 220, 0.5); 81 | --b3-font-background12: rgba(253, 198, 200, 0.5); 82 | --b3-font-background13: var(--b3-theme-on-background); 83 | 84 | /* 动画效果 */ 85 | --b3-transition: all .15s cubic-bezier(0, 0, .2, 1) 0ms; 86 | --b3-width-transition: width .15s cubic-bezier(0, 0, .2, 1) 0ms; 87 | 88 | /* 阴影 */ 89 | --b3-point-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); 90 | --b3-dialog-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 91 | 92 | /* diff */ 93 | --b3-diff-add: #dfd; 94 | --b3-diff-add-surface: #97f295; 95 | --b3-diff-del: #fee8e9; 96 | --b3-diff-del-surface: #ffb6ba; 97 | 98 | /* 图表颜色 */ 99 | --b3-graph-p-point: #076f7e; 100 | --b3-graph-heading-point: #660e7a; 101 | --b3-graph-math-point: #80FFA5; 102 | --b3-graph-code-point: #00DDFF; 103 | --b3-graph-table-point: #37A2FF; 104 | --b3-graph-list-point: #FF0087; 105 | --b3-graph-todo-point: #FFBF00; 106 | --b3-graph-olist-point: #b3005f; 107 | --b3-graph-listitem-point: #f65b00; 108 | --b3-graph-bq-point: #8d48e3; 109 | --b3-graph-super-point: #dd79ff; 110 | --b3-graph-doc-point: #202124; 111 | --b3-graph-tag-point: #dbf32f; 112 | --b3-graph-asset-point: #05c091; 113 | --b3-graph-line: #5f6368; 114 | --b3-graph-ref-line: #d23f31; 115 | --b3-graph-tag-line: #5f6b06; 116 | --b3-graph-tag-tag-line: #dbf32f; 117 | --b3-graph-asset-line: #037457; 118 | --b3-graph-hl-point: #f3a92f; 119 | --b3-graph-hl-line: #4285f4; 120 | 121 | /* 编辑器搜索颜色 */ 122 | --b3-protyle-search-background: #ffe955; 123 | --b3-protyle-search-border-color: #f2e680; 124 | --b3-protyle-search-current-background: #a5d3fe; 125 | 126 | /* 代码片段背景 */ 127 | --b3-protyle-code-background: rgba(27, 31, 35, .05); 128 | 129 | /* 所见即所得行内元素颜色 */ 130 | --b3-protyle-inline-strong-color: inherit; /* 粗体 */ 131 | --b3-protyle-inline-em-color: inherit; /* 斜体 */ 132 | --b3-protyle-inline-s-color: inherit; /* 删除线 */ 133 | --b3-protyle-inline-link-color: #25789e; /* 超级链接 */ 134 | --b3-protyle-inline-mark-background: #ffe68d; /* 高亮背景 */ 135 | --b3-protyle-inline-mark-color: inherit; /* 高亮文字 */ 136 | --b3-protyle-inline-tag-color: #5f6368; /* 标签 */ 137 | --b3-protyle-inline-blockref-color: var(--b3-theme-primary); /* 双向链接 */ 138 | 139 | /************** Theme *********************/ 140 | /**** 配色 ****/ 141 | --dock-background: var(--b3-theme-surface); /* 顶栏、dock 栏背景色 */ 142 | --left-sidebar-background: var(--b3-theme-surface); /* 左边栏背景色 */ 143 | --left-sidebar-color: var(--b3-theme-on-surface); /* 左边栏文字颜色 */ 144 | --caret-color: var(--b3-theme-primary); /* 光标颜色 */ 145 | --text-selection-background: var(--b3-theme-primary-lightest); /* 文本选中背景色 */ 146 | --text-selection-color: inherit; /* 文本选中颜色 */ 147 | --inline-code-color: inherit; /* 行内代码文字颜色 */ 148 | --quote-border-width: 3px; /* 引述左边框宽度 */ 149 | --quote-border-color: var(--b3-theme-primary); /* 引述左边框颜色 */ 150 | --quote-color: var(--b3-theme-on-surface); /* 引述文字颜色 */ 151 | --quote-background: transparent; /* 引述背景色 */ 152 | 153 | --gutters-hover-background: var(--b3-theme-surface); /* 块图标悬浮时背景色（不要使用透明色） */ 154 | --switch-uncheck-color: #FFF; /* switch 开关未开启时颜色 */ 155 | 156 | --scrollbar-hover-background: #ccc; /* 滚动条悬浮时背景色 */ 157 | --column-scrollbar-background: #f0efef; /* 边栏内滚动条通用背景色 */ 158 | --column-scrollbar-hover-background: #ccc; /* 边栏内滚动条悬浮时背景色 */ 159 | 160 | /* 标题颜色 */ 161 | --h1-color: inherit; 162 | --h2-color: inherit; 163 | --h3-color: inherit; 164 | --h4-color: inherit; 165 | --h5-color: inherit; 166 | --h6-color: inherit; 167 | 168 | /**** 设置 ****/ 169 | --dock-border: 1px solid var(--b3-border-color); /* 顶栏、dock、页签栏边框 */ 170 | --column-border: var(--b3-border-color); /* 分栏分割线 */ 171 | --line-height: 1.75em; /* 行高 */ 172 | --margin-top-bottom: 2px; /* 上下 margin */ 173 | --margin-left-right: 0px; /* 左右 margin */ 174 | --padding-top-bottom: 2px; /* 上下 padding */ 175 | --padding-left-right: 4px; /* 左右 padding */ 176 | --block-margin: var(--margin-top-bottom) var(--margin-left-right) !important; /* 块间距 */ 177 | --block-padding: var(--padding-top-bottom) var(--padding-left-right) !important; /* 块内边距 */ 178 | --background-image: url("src/bg.jpg"); /* 背景图 */ 179 | --blur-value: 40px; /* 背景图片模糊程度 */ 180 | --glass-editor-background: rgba(255,255,255,0.1); /* 毛玻璃效果：背景色 */ 181 | --glass-box-shadow: 0 4px 12px rgba(120,120,120,0.35); /* 毛玻璃效果：阴影 */ 182 | 183 | /**** 动画 ****/ 184 | --page-scrollbar-transition: opacity 800ms ease 0s; /* 分页加载条动画 */ 185 | --flex-column-transition: width 200ms cubic-bezier(0, 0.7, 0.4, 1); /* 侧边栏动画 */ 186 | --common-transition: all 1s cubic-bezier(0, 0.7, .2, 1) 0ms; /* 通用动画 */ 187 | 188 | } 189 | 190 | /**** 特殊样式 ****/ 191 | /* 工具栏选中状态 */ 192 | .protyle-toolbar__item--current{ 193 | color: rgba(45, 170, 219, 1); 194 | } 195 | -------------------------------------------------------------------------------- /palette/yinxiang.css: -------------------------------------------------------------------------------- 1 | /******* 仿印象笔记配色 **********/ 2 | :root { 3 | /* 主色 */ 4 | --b3-theme-primary: #39a33d; 5 | --b3-theme-primary-light: #39a33d8c; 6 | --b3-theme-primary-lighter: #39a33d60; 7 | --b3-theme-primary-lightest:#39a33d20; 8 | --b3-theme-secondary: #f3a92f; 9 | --b3-theme-background: #FFFFFF; 10 | --b3-theme-surface: #f4f5f5; 11 | --b3-theme-surface-light: rgba(243, 243, 243, .86); 12 | --b3-theme-error: #d23f31; 13 | 14 | /* 文字颜色 */ 15 | --b3-theme-on-primary: #fff; 16 | --b3-theme-on-secondary: #fff; 17 | --b3-theme-on-background:#3e454c; 18 | --b3-theme-on-surface: #777777; 19 | --b3-theme-on-error: #fff; 20 | 21 | 22 | /* 字体 */ 23 | --b3-font-family: "Pingfang SC", "quote", "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; 24 | --b3-font-family-code: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; 25 | --b3-font-family-graph: mononoki; 26 | 27 | /* 线条 */ 28 | --b3-border-color: rgba(0, 0, 0, .05); 29 | 30 | /* 滚动条 */ 31 | --b3-scroll-color: rgba(0, 0, 0, .2); 32 | 33 | /* 列表 */ 34 | --b3-list-hover: rgba(0, 0, 0, .05); 35 | 36 | /* 页签 */ 37 | --b3-tab-background: var(--b3-theme-background); 38 | --b3-tab-background-hover: var(--b3-theme-primary-lightest); 39 | 40 | /* 菜单 */ 41 | --b3-menu-background: var(--b3-theme-background); 42 | 43 | /* 提示 */ 44 | --b3-tooltips-color: rgba(0, 0, 0, 0.7); 45 | 46 | /* 卡片背景 */ 47 | --b3-card-error-color: rgb(97, 26, 21); 48 | --b3-card-error-background: rgb(253, 236, 234); 49 | --b3-card-warning-color: rgb(102, 60, 0); 50 | --b3-card-warning-background:rgb(255, 244, 229); 51 | --b3-card-info-color: rgb(13, 60, 97); 52 | --b3-card-info-background: rgb(232, 244, 253); 53 | --b3-card-success-color: rgb(30, 70, 32); 54 | --b3-card-success-background:rgb(237, 247, 237); 55 | 56 | /* 自定义文字 */ 57 | --b3-font-color1: var(--b3-card-error-color); 58 | --b3-font-color2: var(--b3-card-warning-color); 59 | --b3-font-color3: var(--b3-card-info-color); 60 | --b3-font-color4: var(--b3-card-success-color); 61 | --b3-font-color5: var(--b3-theme-on-surface); 62 | --b3-font-color6: var(--b3-theme-primary); 63 | --b3-font-color7: var(--b3-theme-secondary); 64 | --b3-font-color8: var(--b3-theme-error); 65 | --b3-font-color9: #f5539e; 66 | --b3-font-color10: #944194; 67 | --b3-font-color11: #65b84d; 68 | --b3-font-color12: #f5822e; 69 | --b3-font-color13: var(--b3-theme-background); 70 | --b3-font-background1: var(--b3-card-error-background); 71 | --b3-font-background2: var(--b3-card-warning-background); 72 | --b3-font-background3: var(--b3-card-info-background); 73 | --b3-font-background4: var(--b3-card-success-background); 74 | --b3-font-background5: var(--b3-theme-surface); 75 | --b3-font-background6: var(--b3-theme-primary-light); 76 | --b3-font-background7: rgba(217, 211, 215, 0.5); 77 | --b3-font-background8: rgba(255, 193, 153, 0.5); 78 | --b3-font-background9: rgba(189, 201, 255, 0.5); 79 | --b3-font-background10: rgba(239, 218, 251, 0.5); 80 | --b3-font-background11: rgba(234, 202, 220, 0.5); 81 | --b3-font-background12: rgba(253, 198, 200, 0.5); 82 | --b3-font-background13: var(--b3-theme-on-background); 83 | 84 | /* 动画效果 */ 85 | --b3-transition: all .15s cubic-bezier(0, 0, .2, 1) 0ms; 86 | --b3-width-transition: width .15s cubic-bezier(0, 0, .2, 1) 0ms; 87 | 88 | /* 阴影 */ 89 | --b3-point-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); 90 | --b3-dialog-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); 91 | 92 | /* diff */ 93 | --b3-diff-add: #dfd; 94 | --b3-diff-add-surface: #97f295; 95 | --b3-diff-del: #fee8e9; 96 | --b3-diff-del-surface: #ffb6ba; 97 | 98 | /* 图表颜色 */ 99 | --b3-graph-p-point: #076f7e; 100 | --b3-graph-heading-point: #660e7a; 101 | --b3-graph-math-point: #80FFA5; 102 | --b3-graph-code-point: #00DDFF; 103 | --b3-graph-table-point: #37A2FF; 104 | --b3-graph-list-point: #FF0087; 105 | --b3-graph-todo-point: #FFBF00; 106 | --b3-graph-olist-point: #b3005f; 107 | --b3-graph-listitem-point: #f65b00; 108 | --b3-graph-bq-point: #8d48e3; 109 | --b3-graph-super-point: #dd79ff; 110 | --b3-graph-doc-point: #202124; 111 | --b3-graph-tag-point: #dbf32f; 112 | --b3-graph-asset-point: #05c091; 113 | --b3-graph-line: #5f6368; 114 | --b3-graph-ref-line: #d23f31; 115 | --b3-graph-tag-line: #5f6b06; 116 | --b3-graph-tag-tag-line: #dbf32f; 117 | --b3-graph-asset-line: #037457; 118 | --b3-graph-hl-point: #f3a92f; 119 | --b3-graph-hl-line: #4285f4; 120 | 121 | /* 编辑器搜索颜色 */ 122 | --b3-protyle-search-background: #ffe955; 123 | --b3-protyle-search-border-color: #f2e680; 124 | --b3-protyle-search-current-background: #a5d3fe; 125 | 126 | /* 代码片段背景 */ 127 | --b3-protyle-code-background: rgba(27, 31, 35, .05); 128 | 129 | /* 所见即所得行内元素颜色 */ 130 | --b3-protyle-inline-strong-color: inherit; /* 粗体 */ 131 | --b3-protyle-inline-em-color: inherit; /* 斜体 */ 132 | --b3-protyle-inline-s-color: inherit; /* 删除线 */ 133 | --b3-protyle-inline-link-color: var(--b3-theme-primary); /* 超级链接 */ 134 | --b3-protyle-inline-mark-background: #ffe68d; /* 高亮背景 */ 135 | --b3-protyle-inline-mark-color: inherit; /* 高亮文字 */ 136 | --b3-protyle-inline-tag-color: #5f6368; /* 标签 */ 137 | --b3-protyle-inline-blockref-color: var(--b3-theme-primary); /* 双向链接 */ 138 | 139 | /************** Theme *********************/ 140 | /**** 配色 ****/ 141 | --dock-background: #eeeff0; /* 顶栏、dock 栏背景色 */ 142 | --left-sidebar-background: #293536; /* 左边栏背景色 */ 143 | --left-sidebar-color: #888888; /* 左边栏文字颜色 */ 144 | --caret-color: var(--b3-theme-primary); /* 光标颜色 */ 145 | --text-selection-background: var(--b3-theme-primary-lightest); /* 文本选中背景色 */ 146 | --text-selection-color: inherit; /* 文本选中颜色 */ 147 | --inline-code-color: var(--b3-theme-primary); /* 行内代码文字颜色 */ 148 | --quote-border-width: 3px; /* 引述左边框宽度 */ 149 | --quote-border-color: #adbbc9; /* 引述左边框颜色 */ 150 | --quote-color: #7b8490; /* 引述文字颜色 */ 151 | 152 | --gutters-hover-background: #F2F2F2; /* 块图标悬浮时背景色（不要使用透明色） */ 153 | --switch-uncheck-color: #FFF; /* switch 开关未开启时颜色 */ 154 | 155 | --scrollbar-hover-background: #CCCCCC; /* 滚动条悬浮时背景色 */ 156 | --column-scrollbar-background: #4a6a6e; /* 边栏内滚动条通用背景色 */ 157 | --column-scrollbar-hover-background: #cccccc; /* 边栏内滚动条悬浮时背景色 */ 158 | 159 | /* 标题颜色 */ 160 | --h1-color: inherit; 161 | --h2-color: inherit; 162 | --h3-color: inherit; 163 | --h4-color: inherit; 164 | --h5-color: inherit; 165 | --h6-color: inherit; 166 | 167 | /**** 设置 ****/ 168 | --dock-border: none; /* 顶栏、dock、页签栏边框 */ 169 | --column-border: var(--b3-border-color); /* 分栏分割线 */ 170 | --line-height: 1.75em; /* 行高 */ 171 | --margin-top-bottom: 2px; /* 上下 margin */ 172 | --margin-left-right: 0px; /* 左右 margin */ 173 | --padding-top-bottom: 2px; /* 上下 padding */ 174 | --padding-left-right: 4px; /* 左右 padding */ 175 | --block-margin: var(--margin-top-bottom) var(--margin-left-right) !important; /* 块间距 */ 176 | --block-padding: var(--padding-top-bottom) var(--padding-left-right) !important; /* 块内边距 */ 177 | --background-image: url("src/bg.jpg"); /* 背景图 */ 178 | --blur-value: 40px; /* 背景图片模糊程度 */ 179 | --glass-editor-background: rgba(255,255,255,0.1); /* 毛玻璃效果：背景色 */ 180 | --glass-box-shadow: 0 4px 12px rgba(120,120,120,0.35); /* 毛玻璃效果：阴影 */ 181 | 182 | /**** 动画 ****/ 183 | --page-scrollbar-transition: opacity 800ms ease 0s; /* 分页加载条动画 */ 184 | --flex-column-transition: width 200ms cubic-bezier(0, 0.7, 0.4, 1); /* 侧边栏动画 */ 185 | --common-transition: all 1s cubic-bezier(0, 0.7, .2, 1) 0ms; /* 通用动画 */ 186 | 187 | } 188 | 189 | /**** 特殊样式 ****/ 190 | /**** 全屏下自动隐藏顶部工具栏 **** 191 | 1）需要将 min-height 和 min-width 设置成自己电脑全屏时的分辨率 192 | 2）如果需要鼠标悬浮时显示，请将.toolbar{height:0px;}设置为一个较小的高度值，如 8px 193 | ****/ 194 | /* @media only screen and (min-height: 900px) and (min-width: 1440px) 195 | { 196 | .toolbar{ height: 0px; transition: height 400ms ease 0s; } 197 | .toolbar > div{ visibility: hidden; } 198 | .toolbar:hover{ height: 30px; transition: height 400ms ease 0s; } 199 | .toolbar:hover >div{ visibility: visible; } 200 | } 201 | */ -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/langzhou/toy-theme-for-siyuan/1fcfe04b2de7edc4b3fbe1de36e45b9a6bc87768/preview.png -------------------------------------------------------------------------------- /src/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/langzhou/toy-theme-for-siyuan/1fcfe04b2de7edc4b3fbe1de36e45b9a6bc87768/src/bg.jpg -------------------------------------------------------------------------------- /src/iconTriangle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /theme.css: -------------------------------------------------------------------------------- 1 | /******* Theme for SiYuan Note ************ 2 | 1. 本样式仅在16px字号设置下进行有限场景的测试，不能保证所有页面均完美呈现。如果遇到相关功能或样式问题，请重置为官方主题后再确认问题是否重现。 3 | 2. 标注为「实验功能」的部分请谨慎开启使用。 4 | /****************************************/ 5 | 6 | /* 引入配色方案 */ 7 | @import url("palette/yinxiang.css"); 8 | 9 | 10 | /* 引入基本框架 */ 11 | @import url("base.css"); -------------------------------------------------------------------------------- /theme.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "toy", 3 | "author": "allen", 4 | "url": "https://github.com/langzhou", 5 | "version": "1.1.7", 6 | "modes": [ 7 | "light" 8 | ] 9 | } 10 | --------------------------------------------------------------------------------