Dark Theme Background Colors

:root[data-theme-mode=dark] {
  --b3-theme-background: #111;
  --b3-theme-surface: #222;
  --b3-scroll-color: rgba(169, 62, 218, 0.2);
}

.protyle-wysiwyg .code-block > .hljs {
  font-size: 1em;
}

Horizontal Command Palette Styling

.hint--menu {
  animation: menu 0.2s ease-in-out;
  box-shadow: var(--b3-menu-shadow);
  background-color: var(--b3-theme-background);
  padding: 5px;
  border: none;
  min-width: 50vw;
  border-radius: 6px;
}

.hint--menu > div {
  columns: 50px 4;
  column-rule: 1px outset var(--b3-border-color);
}

.hint--menu .b3-list-item {
  margin: 0 !important;
  width: 100% !important;
}

.hint--menu .b3-list-item__text {
  margin: 0 0 0 8px;
  color: var(--b3-theme-on-background);
}

.hint--menu .b3-list-item__graphic,
.hint--menu .color__square {
  margin: 0;
  width: 10px;
  height: 12px;
  border: 1px solid var(--b3-border-color);
  padding: 2px 3px;
  border-radius: 3px;
  box-shadow: none;
}

@media screen and (min-width: 1280px) {
  .hint--menu .b3-list-item--two {
    width: calc(25% - 5px);
  }
  .hint--menu {
    max-height: 412px !important;
  }
}

@media screen and (max-width: 1280px) {
  .hint--menu > div {
    columns: unset;
  }
  .hint--menu {
    columns: unset;
    min-width: unset !important;
  }
}

.protyle-hint.hint--menu:has(>.emojis) {
  min-width: 372px;
  width: 372px !important;
}

.protyle-hint.hint--menu > .emojis {
  column-span: all;
  width: 360px !important;
}

Scrollbar Customization

::-webkit-scrollbar {
  width: var(--webkit-scrollbar);
  height: var(--webkit-scrollbar);
  background-color: var(--b3-scroll-bgcolor);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--b3-scroll-color-hover);
}

::-webkit-scrollbar-thumb {
  border-radius: var(--webkit-scrollbar-thumb);
  background-color: var(--b3-scroll-color);
}

.b3-slider::-webkit-slider-runnable-track {
  height: 3px;
}

.b3-slider::-webkit-slider-thumb {
  transform: unset !important;
  width: 7px;
  height: 7px;
  margin-top: -2px;
  background-color: var(--b3-theme-background);
  box-shadow: 0 0 0 3px var(--b3-theme-primary);
}

.b3-slider::-webkit-slider-thumb:hover {
  box-shadow:
    0 0 0 3px var(--b3-theme-primary),
    0 0 0 5px var(--b3-theme-primary-lighter);
  transition: all 500ms;
}

Active Tab Highlighting

.layout-tab-bar .item.item--focus {
  background-color: rgb(36, 100, 174);
  border-color: black;
  border-bottom-color: var(--custom-striking-color);
}

Custom Block Reference Styling

:root {
  --custom-quote-l: "⸢";
  --custom-quote-r: "⸥";
  --custom-ref-mark-color: orange;
  --custom-ref-mark-width: 0.5em;
  --custom-span-block-ref-color: orange;
}

/* Apply reference styling across various UI contexts */
#sidebar [data-type="sidebar-outline"] [data-node-id] span[data-type~=block-ref],
.sy__outline [data-node-id] span[data-type~=block-ref],
.protyle-wysiwyg [data-node-id] span[data-type~=block-ref] {
  color: var(--custom-span-block-ref-color);
}

/* Add quotation marks around references */
#sidebar [data-type="sidebar-outline"] [data-node-id] span[data-type~=block-ref]::before,
.sy__outline [data-node-id] span[data-type~=block-ref]::before,
.protyle-wysiwyg [data-node-id] span[data-type~=block-ref]::before {
  content: var(--custom-quote-l);
  color: var(--custom-ref-mark-color);
  width: var(--custom-ref-mark-width);
  font-weight: bold;
  display: inline-block;
  text-align: center;
}

#sidebar [data-type="sidebar-outline"] [data-node-id] span[data-type~=block-ref]::after,
.sy__outline [data-node-id] span[data-type~=block-ref]::after,
.protyle-wysiwyg [data-node-id] span[data-type~=block-ref]::after {
  content: var(--custom-quote-r);
  color: var(--custom-ref-mark-color);
  width: var(--custom-ref-mark-width);
  font-weight: bold;
  display: inline-block;
  text-align: center;
}

UI Border Customization

:root {
  --b3-theme-primary: #5b68ff;
  --border-is: 1px solid rgb(66, 66, 66);
}

.fn__flex.layout-tab-bar [data-type="tab-header"],
#status,
.b3-menu,
.b3-menu__submenu,
.layout-tab-container.fn__flex-1,
.b3-dialog__body {
  border: var(--border-is);
}

#status {
  border-bottom: none;
}

.b3-menu .b3-menu__item:first-child {
  border-top-left-radius: var(--b3-border-radius-b);
  border-top-right-radius: var(--b3-border-radius-b);
}

.b3-menu .b3-menu__item:last-child {
  border-bottom-left-radius: var(--b3-border-radius-b);
  border-bottom-right-radius: var(--b3-border-radius-b);
}

Paragraph Block Separators

:root {
  --custom-border-line-color: #666;
}

.protyle-wysiwyg [data-node-id].p,
.b3-typography p {
  padding-bottom: 0;
  border-bottom: 1px dashed var(--custom-border-line-color);
}

Code Block Language Tag Posiitoning

.b3-typography .code-block .protyle-action .protyle-action__language,
.protyle-wysiwyg .code-block .protyle-action .protyle-action__language {
  margin-top: 0;
  position: absolute;
  left: 3.5em;
  border-radius: 1px;
  opacity: 1 !important;
}

.b3-typography .code-block .protyle-action .protyle-action__language::after,
.protyle-wysiwyg .code-block .protyle-action .protyle-action__language::after {
  content: "›";
  color: rgba(128, 128, 128, 0.5);
  opacity: 1;
}

Automatic Heading Nubmering

:root {
  --custom-h-num-font-size: 60%;
  --custom-h-font-weight: bold;
}

.protyle-wysiwyg,
.b3-typography {
  counter-reset: h1-counter h2-counter h3-counter h4-counter h5-counter h6-counter;
}

/* H1 */
.protyle-wysiwyg > [data-node-id].h1,
.protyle-wysiwyg > [data-node-id][fold="1"].h1,
.b3-typography > h1 {
  counter-increment: h1-counter;
  counter-reset: h2-counter;
}
.protyle-wysiwyg > [data-node-id].h1::before,
.b3-typography > h1::before {
  display: block !important;
  float: left;
  font-size: var(--custom-h-num-font-size);
  content: counter(h1-counter) "\00A0";
}

/* H2 */
.protyle-wysiwyg > [data-node-id].h2,
.protyle-wysiwyg > [data-node-id][fold="1"].h2,
.b3-typography > h2 {
  counter-increment: h2-counter;
  counter-reset: h3-counter;
}
.protyle-wysiwyg > [data-node-id].h2::before,
.b3-typography > h2::before {
  display: block !important;
  float: left;
  font-size: var(--custom-h-num-font-size);
  content: counter(h1-counter) "." counter(h2-counter) "\00A0";
}

/* H3–H6 follow the same pattern with deeper nesting */
.protyle-wysiwyg > [data-node-id].h3,
.b3-typography > h3 {
  counter-increment: h3-counter;
  counter-reset: h4-counter;
}
.protyle-wysiwyg > [data-node-id].h3::before,
.b3-typography > h3::before {
  content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) "\00A0";
}

.protyle-wysiwyg > [data-node-id].h4,
.b3-typography > h4 {
  counter-increment: h4-counter;
  counter-reset: h5-counter;
}
.protyle-wysiwyg > [data-node-id].h4::before,
.b3-typography > h4::before {
  content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) "." counter(h4-counter) "\00A0";
}

.protyle-wysiwyg > [data-node-id].h5,
.b3-typography > h5 {
  counter-increment: h5-counter;
  counter-reset: h6-counter;
}
.protyle-wysiwyg > [data-node-id].h5::before,
.b3-typography > h5::before {
  content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) "." counter(h4-counter) "." counter(h5-counter) "\00A0";
}

.protyle-wysiwyg > [data-node-id].h6,
.b3-typography > h6 {
  counter-increment: h6-counter;
}
.protyle-wysiwyg > [data-node-id].h6::before,
.b3-typography > h6::before {
  content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) "." counter(h4-counter) "." counter(h5-counter) "." counter(h6-counter) "\00A0";
}

/* Common heading styles */
.protyle-wysiwyg [data-node-id].h1, .b3-typography h1 { border-left: 3px solid var(--custom-h1-color); padding-left: 9px; color: var(--custom-h1-color); font-weight: var(--custom-h-font-weight); }
.protyle-wysiwyg [data-node-id].h2, .b3-typography h2 { border-left: 3px solid var(--custom-h2-color); padding-left: 9px; color: var(--custom-h2-color); font-weight: var(--custom-h-font-weight); }
.protyle-wysiwyg [data-node-id].h3, .b3-typography h3 { border-left: 3px solid var(--custom-h3-color); padding-left: 9px; color: var(--custom-h3-color); font-weight: var(--custom-h-font-weight); }
.protyle-wysiwyg [data-node-id].h4, .b3-typography h4 { border-left: 3px solid var(--custom-h4-color); padding-left: 9px; color: var(--custom-h4-color); font-weight: var(--custom-h-font-weight); }
.protyle-wysiwyg [data-node-id].h5, .b3-typography h5 { border-left: 3px solid var(--custom-h5-color); padding-left: 9px; color: var(--custom-h5-color); font-weight: var(--custom-h-font-weight); }
.protyle-wysiwyg [data-node-id].h6, .b3-typography h6 { border-left: 3px solid var(--custom-h6-color); padding-left: 9px; color: var(--custom-h6-color); font-weight: var(--custom-h-font-weight); }

Custom Font Definitions

@font-face {
  font-family: "Twemoji Mozilla";
  src: url("plugins/custom-fonts/static/fonts/Twemoji.Mozilla/Twemoji.Mozilla-0.7.0.ttf");
}

:root {
  --b3-font-family: "LXGW WenKai", "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";
  --b3-font-family-protyle: "LXGW WenKai";
  --b3-font-family-code: "SauceCodePro Nerd Font Propo", "JetBrainsMono-Regular", "mononoki", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
  --b3-font-family-graph: "mononoki";
  --b3-font-family-math: "KaTeX_Math", "KaTeX_Main";
  --b3-font-family-emoji: "Twemoji Mozilla", "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Noto Color Emoji", "Android Emoji";
}