Change Whiteboard theme only

[rpoovey]

I'm struggling here to find all the areas specific to the whiteboard. What I would like to accomplish is Frappé all the journal pages, and Latte for the whiteboard. Basically so that I can have a "white" background in the whiteboard section.

Possible you can point me to the right areas? My current custom.css. I'm sure that I am missing a ton of areas though as my css knowledge is novice at best.

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');

.cp__sidebar-main-content .logseq-tools-multiple-calendars {
    display: flex;
    flex-wrap: wrap;
    padding: 0 15px;
}

.cp__sidebar-main-content .logseq-tools-multiple-calendars .logseq-tools-calendar {
    flex: 0 50%;
    box-sizing: border-box;
    padding: 0 15px;
}

.logseq-tools-calendar tr {
    background: none !important;
}

.logseq-tools-calendar th,
.logseq-tools-calendar td,
.logseq-tools-calendar tr {
    border: none;
}

.logseq-tools-calendar th,
.logseq-tools-calendar td {
    text-align: center;
}

/* Calendar - pages from other months */

.logseq-tools-calendar .outofmonth {
    opacity: .3;
}

:root {
  --color-base-00: rgb(var(--ctp-crust));
  --color-base-10: rgb(var(--ctp-mantle));
  --color-base-20: rgb(var(--ctp-base));
  --color-base-30: rgb(var(--ctp-surface0));
  --color-base-40: rgb(var(--ctp-surface1));
  --color-base-50: rgb(var(--ctp-surface2));
  --color-base-60: rgb(var(--ctp-overlay0));
  --color-base-70: rgb(var(--ctp-overlay1));
  --color-base-80: rgb(var(--ctp-overlay2));
  --color-base-90: rgb(var(--ctp-subtext0));
  --color-base-100: rgb(var(--ctp-text));
  /*whiteboard*/
  --wb-color-base-00: rgb(var(--wb-ctp-crust));
  --wb-color-base-10: rgb(var(--wb-ctp-mantle));
  --wb-color-base-20: rgb(var(--wb-ctp-base));
  --wb-color-base-30: rgb(var(--wb-ctp-surface0));
  --wb-color-base-40: rgb(var(--wb-ctp-surface1));
  --wb-color-base-50: rgb(var(--wb-ctp-surface2));
  --wb-color-base-60: rgb(var(--wb-ctp-overlay0));
  --wb-color-base-70: rgb(var(--wb-ctp-overlay1));
  --wb-color-base-80: rgb(var(--wb-ctp-overlay2));
  --wb-color-base-90: rgb(var(--wb-ctp-subtext0));
  --wb-color-base-100: rgb(var(--wb-ctp-text));
}

:root {
  --ctp-primary-background-color: rgb(var(--ctp-base));
  --ctp-secondary-background-color: rgb(var(--ctp-mantle));
  --ctp-tertiary-background-color: rgb(var(--ctp-crust));
  --ctp-quaternary-background-color: rgb(var(--ctp-surface0));
  --ctp-color-level-1: var(--color-base-10);
  --ctp-color-level-2: var(--color-base-20);
  --ctp-color-level-3: var(--color-base-30);
  --ctp-color-level-4: var(--color-base-40);
  --ctp-color-level-5: var(--color-base-50);
  --ctp-color-level-6: var(--color-base-60);
  --ctp-active-primary-color: rgb(var(--ctp-accent));
  --ctp-active-secondary-color: rgb(var(--ctp-accent), 0.9);
  --ctp-table-tr-even-background-color: var(--ctp-secondary-background-color);
  --ctp-block-properties-background-color: var(--ctp-secondary-background-color);
  --ctp-page-properties-background-color: var(--ctp-secondary-background-color);
  --ctp-block-ref-link-text-color: rgb(var(--ctp-subtext0));
  --ctp-search-background-color: var(--ctp-primary-background-color);
  --ctp-border-color: rgb(var(--ctp-surface0));
  --ctp-secondary-border-color: rgb(var(--ctp-surface0));
  --ctp-tertiary-border-color: rgba(var(--ctp-surface0), 0.10);
  --ctp-guideline-color: rgb(var(--ctp-surface1));
  --ctp-menu-hover-color: var(--ctp-color-level-3);
  --ctp-primary-text-color: rgb(var(--ctp-text));
  --ctp-secondary-text-color: rgb(var(--ctp-subtext0));
  --ctp-title-text-color: rgb(var(--ctp-subtext1));
  --ctp-link-text-color: rgb(var(--ctp-accent, var(--ctp-teal)));
  --ctp-link-text-hover-color: rgb(var(--ctp-accent, var(--ctp-mauve)));
  --ctp-link-ref-text-color: rgb(var(--ctp-accent, var(--ctp-blue)));
  --ctp-link-ref-text-hover-color: rgb(var(--ctp-accent, var(--ctp-blue)));
  --ctp-tag-text-color: rgb(var(--ctp-accent, var(--ctp-maroon)));
  --ctp-tag-text-hover-color: rgb(var(--ctp-accent, var(--ctp-maroon)));
  --ctp-slide-background-color: var(--ctp-primary-background-color);
  --ctp-block-bullet-border-color: rgba(var(--ctp-accent, var(--ctp-sky)), 0.4);
  --ctp-block-bullet-color: rgb(var(--ctp-accent, var(--ctp-sky)));
  --ctp-block-highlight-color: var(--color-base-30);
  --ctp-selection-background-color: rgba(var(--ctp-yellow, 0.9));
  --ctp-selection-text-color: rgb(var(--color-base-00));
  --ctp-page-checkbox-color: rgb(var(--ctp-accent, var(--ctp-blue)));
  --ctp-page-checkbox-border-color: var(--ctp-primary-background-color);
  --ctp-page-blockquote-color: var(--ctp-primary-text-color);
  --ctp-page-blockquote-bg-color: var(--ctp-secondary-background-color);
  --ctp-page-blockquote-border-color: var(--ctp-border-color);
  --ctp-page-inline-code-color: rgb(var(--ctp-green));
  --ctp-page-inline-code-bg-color: var(--color-base-10);
  --ctp-scrollbar-foreground-color: rgba(var(--ctp-text), 0.2);
  --ctp-scrollbar-background-color: rgba(var(--ctp-text), 0.05);
  --ctp-scrollbar-thumb-hover-color: rgba(var(--ctp-text), 0.2);
  --ctp-head-text-color: var(--ctp-link-text-color);
  --ctp-cloze-text-color: rgb(var(--ctp-accent));
  --ctp-icon-color: var(--ctp-link-text-color);
  --ctp-search-icon-color: var(--ctp-link-text-color);
  --ctp-a-chosen-bg: var(--ctp-quaternary-background-color);
  --ctp-right-sidebar-code-bg-color: var(--color-base-30);
  --ctp-pie-bg-color: var(--ctp-primary-background-color);
  --ctp-pie-fg-color: var(--ctp-secondary-background-color);
  --ctp-highlight-color-gray: rgb(var(--ctp-overlay2));
  --ctp-highlight-color-red: rgb(var(--ctp-red));
  --ctp-highlight-color-yellow: rgb(var(--ctp-yellow));
  --ctp-highlight-color-green: rgb(var(--ctp-green));
  --ctp-highlight-color-blue: rgb(var(--ctp-blue));
  --ctp-highlight-color-purple: rgb(var(--ctp-mauve));
  --ctp-highlight-color-pink: rgb(var(--ctp-pink));
  --ctp-error-text-color: var(--color-red-100);
  --ctp-error-background-color: var(--color-red-900);
  --ctp-warning-text-color: var(--color-yellow-100);
  --ctp-warning-background-color: var(--color-yellow-900);
  --ctp-success-text-color: var(--color-green-100);
  --ctp-success-background-color: var(--color-green-900);
  --ctp-focus-ring-color: rgb(var(--ctp-overlay2));
  --ctp-header-button-background: rgb(var(--ctp-text));
  --ctp-error-color: var(--ctp-red);
  --ctp-warning-color: var(--ctp-peach);
  --ctp-success-color: var(--ctp-green);
  --ctp-info-color: var(--ctp-yellow);
  /* Whiteboard */
  /* Whiteboard object colors */
  --ctp-wb-background-color-gray: color-mix(in srgb, rgb(var(--wb-ctp-gray)), rgb(var(--wb-ctp-base)) 60%);
  --ctp-wb-background-color-red: color-mix(in srgb, rgb(var(--wb-ctp-red)), rgb(var(--wb-ctp-base)) 60%);
  --ctp-wb-background-color-yellow: color-mix(in srgb, rgb(var(--wb-ctp-yellow)), rgb(var(--wb-ctp-base)) 60%);
  --ctp-wb-background-color-green: color-mix(in srgb, rgb(var(--wb-ctp-green)), rgb(var(--wb-ctp-base)) 60%);
  --ctp-wb-background-color-blue: color-mix(in srgb, rgb(var(--wb-ctp-blue)), rgb(var(--wb-ctp-base)) 60%);
  --ctp-wb-background-color-purple: color-mix(in srgb, rgb(var(--wb-ctp-mauve)), rgb(var(--wb-ctp-base)) 60%);
  --ctp-wb-background-color-pink: color-mix(in srgb, rgb(var(--wb-ctp-pink)), rgb(var(--wb-ctp-base)) 60%);
  --ctp-wb-stroke-color-gray: rgb(var(--wb-ctp-overlay2));
  --ctp-wb-stroke-color-red: rgb(var(--wb-ctp-red));
  --ctp-wb-stroke-color-yellow: rgb(var(--wb-ctp-yellow));
  --ctp-wb-stroke-color-green: rgb(var(--wb-ctp-green));
  --ctp-wb-stroke-color-blue: rgb(var(--wb-ctp-blue));
  --ctp-wb-stroke-color-purple: rgb(var(--wb-ctp-mauve));
  --ctp-wb-stroke-color-pink: rgb(var(--wb-ctp-pink));
  --ctp-wb-text-color-gray: rgb(var(--wb-ctp-overlay2));
  --ctp-wb-text-color-red: rgb(var(--wb-ctp-red));
  --ctp-wb-text-color-yellow: rgb(var(--wb-ctp-yellow));
  --ctp-wb-text-color-green: rgb(var(--wb-ctp-green));
  --ctp-wb-text-color-blue: rgb(var(--wb-ctp-blue));
  --ctp-wb-text-color-purple: rgb(var(--wb-ctp-mauve));
  --ctp-wb-text-color-pink: rgb(var(--wb-ctp-pink));
  --ctp-wb-shape-label-color-gray: rgb(var(--wb-ctp-gray));
  --ctp-wb-shape-label-color-red: rgb(var(--wb-ctp-red));
  --ctp-wb-shape-label-color-yellow: rgb(var(--wb-ctp-yellow));
  --ctp-wb-shape-label-color-green: rgb(var(--wb-ctp-green));
  --ctp-wb-shape-label-color-blue: var(--wb-ctp-blue);
  --ctp-wb-shape-label-color-purple: rgb(var(--wb-ctp-purple));
  --ctp-wb-shape-label-color-pink: rgb(var(--wb-ctp-pink));
  --ctp-switch-background: var(--wb-color-base-50);
  --ctp-switch-handle-color: var(--wb-ctp-accent, var(--wb-ctp-blue));
  --ctp-button-background: var(--wb-ctp-accent, var(--wb-ctp-blue));
  --ctp-button-text: var(--wb-color-base-10);
  --ctp-tooltip-background: var(--wb-ctp-tertiary-background-color);
  --ctp-tooltip-text: rgb(var(--wb-ctp-text));
  --ctp-search-input-placeholder: rgb(var(--wb-ctp-text));
  --ctp-header-icon: rgb(var(--wb-ctp-accent));
  --ctp-header-icon-background: var(--wb-ctp-menu-hover-color);
  --ctp-text-highlight: rgb(var(--wb-ctp-yellow));
  --ctp-bullet-thread-color: rgb(var(--wb-ctp-accent, var(--wb-ctp-teal)));
  --ctp-dropdown-border-color: var(--wb-color-base-50);
  --ctp-text-bold: var(var(--wb-ctp-primary-text-color));
  --ctp-text-heading: var(--wb-ctp-accent, var(--wb-ctp-lavender));
  --ctp-text-italics: var(--wb-ctp-accent, var(--wb-ctp-green));
  --ctp-text-underline: var(--wb-ctp-primary-text-color);
  --ctp-text-strikethrough: var(--wb-ctp-accent, var(--wb-ctp-maroon));
  --ctp-blockquote-line: var(--wb-ctp-accent);
  --ctp-active-setting: var(--wb-ctp-accent, var(--wb-ctp-blue));
  --ctp-wb-button-selected-foreground: var(--wb-ctp-accent, var(--wb-ctp-mauve));
  --ctp-wb-button-selected-background: var(--wb-ctp-surface0);
  --ctp-wb-button-foreground: var(--wb-ctp-text);
  --ctp-wb-button-menu-foreground: var(--wb-ctp-accent, var(--wb-ctp-teal));
  --ctp-wb-button-type-tag-background-active: var(--wb-ctp-accent, var(--wb-ctp-mauve));
  --ctp-wb-button-type-tag-background-inactive: var(--wb-ctp-surface0);
  --ctp-wb-button-type-tag-foreground: var(--wb-ctp-text);
  --ctp-wb-quick-links-button: var(--wb-ctp-accent, var(--wb-ctp-blue));
  --ctp-wb-quick-links-button-hover: var(--wb-ctp-sky);
  --ctp-wb-layout-button-foreground: var(--wb-ctp-accent, var(--wb-ctp-teal));
  --ctp-tl-select-input-select-item: var(--wb-ctp-surface2);
  --ctp-tl-selectFill: var(--wb-ctp-accent, var(--wb-ctp-blue));
  --ctp-tl-selectStroke: var(--wb-ctp-accent, var(--wb-ctp-blue));
  --ctp-priority-bg-color: var(--wb-ctp-crust);
  --ctp-priority-todo: var(--wb-ctp-teal);
  --ctp-priority-doing: var(--wb-ctp-blue);
  --ctp-priority-done: var(--wb-ctp-green);
  --ctp-priority-now: var(--wb-ctp-teal);
  --ctp-priority-later: var(--wb-ctp-yellow);
  --ctp-priority-waiting: var(--wb-ctp-maroon);
  --ctp-priority-a: var(--wb-ctp-red);
  --ctp-priority-b: var(--wb-ctp-yellow);
  --ctp-priority-c: var(--wb-ctp-green);
  --ctp-marker-border-radius: 4px;
  --ctp-checkbox-color: var(--wb-ctp-accent, var(--wb-ctp-teal));
  --ctp-marker-size: 16px;
}

:root {
  --ls-error-color: var(--ctp-error-color);
  --ls-warning-color: var(--ctp-warning-color);
  --ls-success-color: var(--ctp-success-color);
  --ls-text-on-accent: rgb(var(--ctp-base));
}
:root .logseq-tldraw {
  --tl-selectFill: rgba(var(--ctp-tl-selectFill), 0.05);
  --tl-selectStroke: rgb(var(--ctp-tl-selectStroke));
}
:root .tl-text-label-inner-wrapper {
  --ls-wb-text-color-gray: var(--ctp-wb-shape-label-color-gray);
  --ls-wb-text-color-red: var(--ctp-wb-shape-label-color-red);
  --ls-wb-text-color-yellow: var(--ctp-wb-shape-label-color-yellow);
  --ls-wb-text-color-green: var(--ctp-wb-shape-label-color-green);
  --ls-wb-text-color-blue: var(--ctp-wb-shape-label-color-blue);
  --ls-wb-text-color-purple: var(--ctp-wb-shape-label-color-purple);
  --ls-wb-text-color-pink: var(--ctp-wb-shape-label-color-pink);
}

@media (prefers-color-scheme: dark) {
  html {
    background-color: rgb(var(--ctp-primary-background-color));
  }
  html[data-theme=light] {
    background-color: transparent;
  }
}
.light-theme,
.dark-theme,
html[data-theme=light],
html[data-theme=dark] {
  --ls-primary-background-color: var(--ctp-primary-background-color);
  --ls-secondary-background-color: var(--ctp-secondary-background-color);
  --ls-tertiary-background-color: var(--ctp-tertiary-background-color);
  --ls-quaternary-background-color: var(--ctp-quaternary-background-color);
  --color-level-1: var(--ctp-color-level-1);
  --color-level-2: var(--ctp-color-level-2);
  --color-level-3: var(--ctp-color-level-3);
  --color-level-4: var(--ctp-color-level-4);
  --color-level-5: var(--ctp-color-level-5);
  --color-level-6: var(--ctp-color-level-6);
  --ls-active-primary-color: var(--ctp-active-primary-color);
  --ls-active-secondary-color: var(--ctp-active-secondary-color);
  --ls-table-tr-even-background-color: var(--ctp-table-tr-even-background-color);
  --ls-block-properties-background-color: var(--ctp-block-properties-background-color);
  --ls-page-properties-background-color: var(--ctp-page-properties-background-color);
  --ls-block-ref-link-text-color: var(--ctp-block-ref-link-text-color);
  --ls-search-background-color: var(--ctp-search-background-color);
  --ls-border-color: var(--ctp-border-color);
  --ls-secondary-border-color: var(--ctp-secondary-border-color);
  --ls-tertiary-border-color: var(--ctp-tertiary-border-color);
  --ls-guideline-color: var(--ctp-guideline-color);
  --ls-menu-hover-color: var(--ctp-menu-hover-color);
  --ls-primary-text-color: var(--ctp-primary-text-color);
  --ls-secondary-text-color: var(--ctp-secondary-text-color);
  --ls-title-text-color: var(--ctp-title-text-color);
  --ls-link-text-color: var(--ctp-link-text-color);
  --ls-link-text-hover-color: var(--ctp-link-text-hover-color);
  --ls-link-ref-text-color: var(--ctp-link-ref-text-color);
  --ls-link-ref-text-hover-color: var(--ctp-link-ref-text-hover-color);
  --ls-tag-text-color: var(--ctp-tag-text-color);
  --ls-tag-text-hover-color: var(--ctp-tag-text-hover-color);
  --ls-slide-background-color: var(--ctp-slide-background-color);
  --ls-block-bullet-border-color: var(--ctp-block-bullet-border-color);
  --ls-block-bullet-color: var(--ctp-block-bullet-color);
  --ls-block-highlight-color: var(--ctp-block-highlight-color);
  --ls-selection-background-color: var(--ctp-selection-background-color);
  --ls-selection-text-color: var(--ctp-selection-text-color);
  --ls-page-checkbox-color: var(--ctp-page-checkbox-color);
  --ls-page-checkbox-border-color: var(--ctp-page-checkbox-border-color);
  --ls-page-blockquote-color: var(--ctp-page-blockquote-color);
  --ls-page-blockquote-bg-color: var(--ctp-page-blockquote-bg-color);
  --ls-page-blockquote-border-color: var(--ctp-page-blockquote-border-color);
  --ls-page-inline-code-color: var(--ctp-page-inline-code-color);
  --ls-page-inline-code-bg-color: var(--ctp-page-inline-code-bg-color);
  --ls-scrollbar-foreground-color: var(--ctp-scrollbar-foreground-color);
  --ls-scrollbar-background-color: var(--ctp-scrollbar-background-color);
  --ls-scrollbar-thumb-hover-color: var(--ctp-scrollbar-thumb-hover-color);
  --ls-head-text-color: var(--ctp-head-text-color);
  --ls-cloze-text-color: var(--ctp-cloze-text-color);
  --ls-icon-color: var(--ctp-icon-color);
  --ls-search-icon-color: var(--ctp-search-icon-color);
  --ls-a-chosen-bg: var(--ctp-a-chosen-bg);
  --ls-right-sidebar-code-bg-color: var(--ctp-right-sidebar-code-bg-color);
  --ls-pie-bg-color: var(--ctp-pie-bg-color);
  --ls-pie-fg-color: var(--ctp-pie-fg-color);
  --ls-highlight-color-gray: var(--ctp-highlight-color-gray);
  --ls-highlight-color-red: var(--ctp-highlight-color-red);
  --ls-highlight-color-yellow: var(--ctp-highlight-color-yellow);
  --ls-highlight-color-green: var(--ctp-highlight-color-green);
  --ls-highlight-color-blue: var(--ctp-highlight-color-blue);
  --ls-highlight-color-purple: var(--ctp-highlight-color-purple);
  --ls-highlight-color-pink: var(--ctp-highlight-color-pink);
  --ls-error-text-color: var(--ctp-error-text-color);
  --ls-error-background-color: var(--ctp-error-background-color);
  --ls-warning-text-color: var(--ctp-warning-text-color);
  --ls-warning-background-color: var(--ctp-warning-background-color);
  --ls-success-text-color: var(--ctp-success-text-color);
  --ls-success-background-color: var(--ctp-success-background-color);
  --ls-focus-ring-color: var(--ctp-focus-ring-color);
  --ls-header-button-background: var(--ctp-header-button-background);
  /* Whiteboard */
  /* Whiteboard object colors */
  --ls-wb-background-color-gray: var(--ctp-wb-background-color-gray);
  --ls-wb-background-color-red: var(--ctp-wb-background-color-red);
  --ls-wb-background-color-yellow: var(--ctp-wb-background-color-yellow);
  --ls-wb-background-color-green: var(--ctp-wb-background-color-green);
  --ls-wb-background-color-blue: var(--ctp-wb-background-color-blue);
  --ls-wb-background-color-purple: var(--ctp-wb-background-color-purple);
  --ls-wb-background-color-pink: var(--ctp-wb-background-color-pink);
  --ls-wb-stroke-color-gray: var(--ctp-wb-stroke-color-gray);
  --ls-wb-stroke-color-red: var(--ctp-wb-stroke-color-red);
  --ls-wb-stroke-color-yellow: var(--ctp-wb-stroke-color-yellow);
  --ls-wb-stroke-color-green: var(--ctp-wb-stroke-color-green);
  --ls-wb-stroke-color-blue: var(--ctp-wb-stroke-color-blue);
  --ls-wb-stroke-color-purple: var(--ctp-wb-stroke-color-purple);
  --ls-wb-stroke-color-pink: var(--ctp-wb-stroke-color-pink);
  --ls-wb-text-color-gray: var(--ctp-wb-text-color-gray);
  --ls-wb-text-color-red: var(--ctp-wb-text-color-red);
  --ls-wb-text-color-yellow: var(--ctp-wb-text-color-yellow);
  --ls-wb-text-color-green: var(--ctp-wb-text-color-green);
  --ls-wb-text-color-blue: var(--ctp-wb-text-color-blue);
  --ls-wb-text-color-purple: var(--ctp-wb-text-color-purple);
  --ls-wb-text-color-pink: var(--ctp-wb-text-color-pink);
}

div.input-wrap > input::placeholder {
  color: var(--ctp-search-input-placeholder);
}

.recent-search a > div > div {
  border-color: rgb(var(--ctp-text));
}

a.ui__toggle .wrapper:focus {
  --tw-shadow: 0 0 0 3px rgba(var(--ctp-switch-handle-color), 0.5) ;
}
a.ui__toggle > span {
  background-color: var(--ctp-switch-background);
}
a.ui__toggle > span > span.switcher {
  background-color: rgb(var(--ctp-switch-handle-color));
}

button.ui__button {
  color: var(--ctp-button-text);
  background-color: rgb(var(--ctp-button-background));
}
button.ui__button[intent=logseq]:hover:not(.active) {
  color: var(--ctp-button-text);
  background-color: rgb(var(--ctp-button-background));
}
button.ui__button:hover {
  background-color: rgb(var(--ctp-button-background));
}

.tippy-tooltip {
  background: var(--ctp-tooltip-background);
  color: var(--ctp-tooltip-text);
}

.tippy-popper .arrow-regular {
  display: none;
  /* Hide the arrow */
}

.dark .ui__button[intent=logseq]:hover {
  color: var(--ls-link-text-color);
}

svg.warning {
  fill: rgb(var(--ctp-warning-color));
}

svg.important {
  fill: rgb(var(--ctp-error-color));
}

svg.note {
  fill: rgb(var(--ctp-info-color));
}

div.nav-content-item:not(.is-expand) .header {
  background-color: var(--ls-tertiary-background-color);
}
div.nav-content-item:not(.is-expand) .header a {
  color: var(--ctp-link-text-hover-color);
}

.left-sidebar-inner a.item.active,
.left-sidebar-inner a.item:active {
  color: var(--ctp-link-text-hover-color);
}

.left-sidebar-inner a.item:hover {
  background: var(--ctp-color-level-3);
}
.left-sidebar-inner a.item:hover span {
  color: var(--ctp-blue);
}

.cp__sidebar-left-layout .header:hover a {
  color: var(--ctp-link-text-hover-color);
}

.ui__modal-panel {
  border: 1px solid;
  border-color: var(--ctp-dropdown-border-color);
}

.dropdown-wrapper {
  border: 1px solid;
  border-color: var(--ctp-dropdown-border-color);
}

.block-children-left-border:hover {
  width: 2px;
  background-color: var(--ctp-bullet-thread-color);
}

mark {
  background: var(--ctp-text-highlight);
}

.form-input:focus {
  box-shadow: 0 0 0 2px rgba(var(--ctp-accent, var(--ctp-sapphire)), 0.5);
  border-color: rgba(var(--ctp-accent, var(--ctp-sapphire)), 0.5);
}

.bullet-container.bullet-closed {
  background-color: rgb(var(--ctp-accent, var(--ctp-blue)), 0.15);
}
.bullet-container.bullet-closed:hover {
  background-color: rgb(var(--ctp-accent, var(--ctp-blue)), 0.65);
}

.bullet-container:hover {
  background-color: rgb(var(--ctp-accent, var(--ctp-blue)), 0.15);
}

button.button.icon:hover {
  color: rgb(var(--ctp-accent, var(--ctp-pink)));
  background-color: var(--ctp-header-icon-background);
}
button.button.icon:hover > i {
  color: var(--ctp-header-icon);
}

.cp__sidebar-left-layout a {
  color: inherit;
}

.left-sidebar-inner .nav-content-item .header {
  background-color: var(--ls-tertiary-background-color);
}

html[data-theme=dark] .cp__header a,
html[data-theme=dark] .cp__header button,
html[data-theme=dark] .cp__right-sidebar-topbar button {
  opacity: 1;
}

::selection {
  color: var(--ls-text-on-accent);
}

.inline.with-bg-color {
  color: var(--ctp-primary-background-color);
}
.inline.with-bg-color b, .inline.with-bg-color .page-ref {
  color: var(--ctp-primary-background-color);
}
.inline.with-bg-color .page-reference:hover {
  color: var(--ctp-primary-text-color);
}
.inline.with-bg-color .page-reference:hover b, .inline.with-bg-color .page-reference:hover .page-ref, .inline.with-bg-color .page-reference:hover span {
  color: var(--ctp-primary-text-color);
}

.ls-block .with-bg-color:is(h1, h2, h3, h4, h5, h6) {
  color: var(--ctp-primary-background-color);
}

.menu-links-wrapper,
.menu-link {
  background-color: var(--ctp-secondary-background-color);
}

.menu-link,
.menu-link:hover {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: 5px;
}

.cp__settings-inner > aside ul > li > a > strong {
  color: rgb(var(--ctp-primary-text-color));
}

.cp__settings-inner > aside ul > li.active .ui__icon, .cp__settings-inner > aside ul > li.active strong {
  color: rgb(var(--ctp-active-setting));
}

.cp__all_pages_table td > span {
  color: rgb(var(--ctp-primary-text-color));
}

.editor-inner .multiline-block:is(.h1, .h2, .h3, .h4, .h5, .h6):first-line,
.editor-inner .uniline-block:is(.h1, .h2, .h3, .h4, .h5, .h6),
.ls-block :is(h1, h2, h3, h4, h5, h6) {
  color: rgb(var(--ctp-text-heading));
}

b, strong {
  color: rgb(var(--ctp-text-bold));
}

i {
  color: rgb(var(--ctp-text-italics));
}

del {
  color: rgb(var(--ctp-text-strikethrough));
}

blockquote {
  border-left: 2px solid;
  border-left-color: rgb(var(--ctp-blockquote-line));
}

a[title=Yellow].shadow-sm > .heading-bg {
  background-color: var(--ls-highlight-color-yellow) !important;
}

a[title=Red].shadow-sm > .heading-bg {
  background-color: var(--ls-highlight-color-red) !important;
}

a[title=Pink].shadow-sm > .heading-bg {
  background-color: var(--ls-highlight-color-pink) !important;
}

a[title=Green].shadow-sm > .heading-bg {
  background-color: var(--ls-highlight-color-green) !important;
}

a[title=Blue].shadow-sm > .heading-bg {
  background-color: var(--ls-highlight-color-blue) !important;
}

a[title=Purple].shadow-sm > .heading-bg {
  background-color: var(--ls-highlight-color-purple) !important;
}

a[title=Gray].shadow-sm > .heading-bg {
  background-color: var(--ls-highlight-color-gray) !important;
}

#ui__ac-inner {
  background: var(--ctp-secondary-background-color);
}

.ui__ac-group-name {
  background: var(--ctp-tertiary-background-color);
}

.tl-button[data-selected=true] {
  background: rgb(var(--ctp-wb-button-selected-background));
}
.tl-button[data-selected=true] i {
  color: rgb(var(--ctp-wb-button-selected-foreground));
}

.ti, .tie {
  color: rgb(var(--ctp-wb-button-foreground));
}

.tl-context-bar .ti, .tl-context-bar .tie {
  color: rgb(var(--ctp-wb-button-menu-foreground));
}

.tl-type-tag {
  background-color: rgb(var(--ctp-wb-button-type-tag-background-inactive));
  border-color: rgb(var(--ctp-wb-button-type-tag-background-inactive));
}
.tl-type-tag .tie {
  color: rgb(var(--ctp-wb-button-type-tag-foreground));
}

html[data-theme=dark] .tl-type-tag[data-active=true] {
  background-color: rgba(var(--ctp-wb-button-type-tag-background-active), 0.8);
  border-color: rgb(var(--ctp-wb-button-type-tag-background-active));
}
html[data-theme=dark] .tl-type-tag[data-active=true] .tie {
  color: rgb(var(--ctp-wb-button-type-tag-foreground));
}

.tl-menu-item i {
  color: rgb(var(--ctp-wb-button-menu-foreground));
}

.tl-quick-links-row:first-child {
  background-color: rgb(var(--ctp-wb-quick-links-button));
}
.tl-quick-links-row:first-child :hover {
  background-color: rgb(var(--ctp-wb-quick-links-button-hover));
}

.tl-select-input-select-item[data-state=checked] {
  background: rgb(var(--ctp-tl-select-input-select-item));
}

i[class*=ti-layout-] {
  color: rgb(var(--ctp-wb-layout-button-foreground));
}

.bg-gray-500 {
  background-color: rgb(var(--ctp-gray));
}

.bg-red-500 {
  background-color: rgb(var(--ctp-red));
}

.bg-yellow-500 {
  background-color: rgb(var(--ctp-yellow));
}

.bg-green-500 {
  background-color: rgb(var(--ctp-green));
}

.bg-blue-500 {
  background-color: rgb(var(--ctp-blue));
}

.bg-purple-500 {
  background-color: rgb(var(--ctp-mauve));
}

.bg-pink-500 {
  background-color: rgb(var(--ctp-pink));
}

.block-marker {
  background-color: rgb(var(--ctp-priority-bg-color));
  border-radius: var(--ctp-marker-border-radius);
  font-size: 75%;
}
.block-marker.TODO {
  color: rgb(var(--ctp-priority-todo));
}
.block-marker.DOING {
  color: rgb(var(--ctp-priority-doing));
}
.block-marker.NOW {
  color: rgb(var(--ctp-priority-now));
}
.block-marker.LATER {
  color: rgb(var(--ctp-priority-later));
}
.block-marker.waiting {
  color: rgb(var(--ctp-priority-waiting));
}

.form-checkbox, .form-checkbox:focus {
  border-radius: var(--ctp-marker-border-radius);
  border: 2px solid rgb(var(--ctp-checkbox-color)) !important;
  background-color: transparent !important;
  height: var(--ctp-marker-size);
  width: var(--ctp-marker-size);
}

.form-checkbox:checked {
  background-color: rgb(var(--ctp-checkbox-color)) !important;
}

.form-checkbox:hover {
  transform: scale(1.1);
}

a[priority], a.priority {
  font-size: 0px;
}

a.priority[href="#/page/A" i], [href="#/page/B" i], [href="#/page/C" i] {
  display: inline-flex;
  opacity: 1 !important;
}

a[priority]::before, a.priority::before {
  transform: translateY(-1px);
  border: 1px solid rgb(var(--ctp-priority-bg-color));
  border-radius: var(--ctp-marker-border-radius);
  font-size: 12px;
  font-weight: 600;
  height: calc(var(--ctp-marker-size) + 4px);
  width: calc(var(--ctp-marker-size) + 4px);
  line-height: 1.5;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

a[priority=A]::before, a.priority[href="#/page/A" i]:before {
  content: "A";
  background: rgb(var(--ctp-priority-a));
  color: var(--ctp-primary-background-color);
}

a[priority=B]::before, a.priority[href="#/page/B" i]:before {
  content: "B";
  background: rgb(var(--ctp-priority-b));
  color: var(--ctp-primary-background-color);
}

a[priority=C]::before, a.priority[href="#/page/C" i]:before {
  content: "C";
  background: rgb(var(--ctp-priority-c));
  color: var(--ctp-primary-background-color);
}

a.priority:hover {
  transform: scale(1.1);
}

div.cm-s-solarized.CodeMirror {
  --bg0: rgb(var(--ctp-base));
  --bg1: rgb(var(--ctp-overlay1));
  --bg4: rgb(var(--ctp-overlay0));
  --fg: rgb(var(--ctp-text));
  --fg3: rgb(var(--ctp-subtext0));
  --gray: rgb(var(--ctp-subtext1));
  --blue: rgb(var(--ctp-blue));
  --yellow: rgb(var(--ctp-yellow));
  --aqua: rgb(var(--ctp-blue));
  --orange: rgb(var(--ctp-peach));
  --primary-bg: rgb(var(--ctp-base));
  --current-line: rgb(var(--ctp-surface0));
  --selection: rgb(var(--ctp-surface2));
  --atom: rgb(var(--ctp-lavender));
  --cursor: rgb(var(--ctp-overlay1));
  --keyword: rgb(var(--ctp-red));
  --operator: rgb(var(--ctp-sky));
  --number: rgb(var(--ctp-peach));
  --definition: rgb(var(--ctp-blue));
  --string: rgb(var(--ctp-green));
}

.cm-s-solarized.cm-s-light, .cm-s-solarized.cm-s-dark {
  text-shadow: unset;
  box-shadow: inset 7px 0 12px -6px var(--ctp-secondary-background-color);
}
.cm-s-solarized.cm-s-light.CodeMirror,
.cm-s-solarized.cm-s-light .CodeMirror-gutters, .cm-s-solarized.cm-s-dark.CodeMirror,
.cm-s-solarized.cm-s-dark .CodeMirror-gutters {
  background-color: var(--primary-bg);
  color: var(--fg3);
}
.cm-s-solarized.cm-s-light .CodeMirror-gutters, .cm-s-solarized.cm-s-dark .CodeMirror-gutters {
  background: var(--primary-bg);
  border-right: 0px;
}
.cm-s-solarized.cm-s-light .CodeMirror-linenumber, .cm-s-solarized.cm-s-dark .CodeMirror-linenumber {
  color: var(--bg4);
}
.cm-s-solarized.cm-s-light .CodeMirror-cursor, .cm-s-solarized.cm-s-dark .CodeMirror-cursor {
  border-left: 1px solid var(--fg);
}
.cm-s-solarized.cm-s-light.cm-fat-cursor .CodeMirror-cursor, .cm-s-solarized.cm-s-dark.cm-fat-cursor .CodeMirror-cursor {
  background-color: var(--cursor) !important;
}
.cm-s-solarized.cm-s-light .cm-animate-fat-cursor, .cm-s-solarized.cm-s-dark .cm-animate-fat-cursor {
  background-color: var(--cursor) !important;
}
.cm-s-solarized.cm-s-light div.CodeMirror-selected, .cm-s-solarized.cm-s-dark div.CodeMirror-selected {
  background: var(--selection);
}
.cm-s-solarized.cm-s-light span.cm-meta, .cm-s-solarized.cm-s-dark span.cm-meta {
  color: var(--blue);
}
.cm-s-solarized.cm-s-light span.cm-comment, .cm-s-solarized.cm-s-dark span.cm-comment {
  color: var(--gray);
}
.cm-s-solarized.cm-s-light span.cm-number, .cm-s-solarized.cm-s-dark span.cm-number {
  color: var(--number);
}
.cm-s-solarized.cm-s-light span.cm-atom, .cm-s-solarized.cm-s-dark span.cm-atom {
  color: var(--atom);
}
.cm-s-solarized.cm-s-light span.cm-keyword, .cm-s-solarized.cm-s-dark span.cm-keyword {
  color: var(--keyword);
}
.cm-s-solarized.cm-s-light span.cm-variable, .cm-s-solarized.cm-s-dark span.cm-variable {
  color: var(--fg);
}
.cm-s-solarized.cm-s-light span.cm-variable-2, .cm-s-solarized.cm-s-dark span.cm-variable-2 {
  color: var(--fg);
}
.cm-s-solarized.cm-s-light span.cm-variable-3,
.cm-s-solarized.cm-s-light .cm-s-gruvbox-dark span.cm-type, .cm-s-solarized.cm-s-dark span.cm-variable-3,
.cm-s-solarized.cm-s-dark .cm-s-gruvbox-dark span.cm-type {
  color: var(--yellow);
}
.cm-s-solarized.cm-s-light span.cm-operator, .cm-s-solarized.cm-s-dark span.cm-operator {
  color: var(--operator);
}
.cm-s-solarized.cm-s-light span.cm-callee, .cm-s-solarized.cm-s-dark span.cm-callee {
  color: var(--fg);
}
.cm-s-solarized.cm-s-light span.cm-def, .cm-s-solarized.cm-s-dark span.cm-def {
  color: var(--definition);
}
.cm-s-solarized.cm-s-light span.cm-property, .cm-s-solarized.cm-s-dark span.cm-property {
  color: var(--fg);
}
.cm-s-solarized.cm-s-light span.cm-string, .cm-s-solarized.cm-s-dark span.cm-string {
  color: var(--string);
}
.cm-s-solarized.cm-s-light span.cm-string-2, .cm-s-solarized.cm-s-dark span.cm-string-2 {
  color: var(--aqua);
}
.cm-s-solarized.cm-s-light span.cm-qualifier, .cm-s-solarized.cm-s-dark span.cm-qualifier {
  color: var(--aqua);
}
.cm-s-solarized.cm-s-light span.cm-attribute, .cm-s-solarized.cm-s-dark span.cm-attribute {
  color: var(--aqua);
}
.cm-s-solarized.cm-s-light .CodeMirror-activeline-background, .cm-s-solarized.cm-s-dark .CodeMirror-activeline-background {
  background: var(--current-line);
}
.cm-s-solarized.cm-s-light .CodeMirror-matchingbracket, .cm-s-solarized.cm-s-dark .CodeMirror-matchingbracket {
  background: var(--gray);
  color: var(--bg0) !important;
}
.cm-s-solarized.cm-s-light span.cm-builtin, .cm-s-solarized.cm-s-dark span.cm-builtin {
  color: var(--orange);
}
.cm-s-solarized.cm-s-light span.cm-tag, .cm-s-solarized.cm-s-dark span.cm-tag {
  color: var(--orange);
}
.cm-s-solarized.cm-s-light.CodeMirror, .cm-s-solarized.cm-s-light .CodeMirror-gutters, .cm-s-solarized.cm-s-dark.CodeMirror, .cm-s-solarized.cm-s-dark .CodeMirror-gutters {
  background-color: var(--ctp-secondary-background-color);
}
.cm-s-solarized.cm-s-light .CodeMirror-linenumber, .cm-s-solarized.cm-s-dark .CodeMirror-linenumber {
  text-shadow: unset;
}

.embed.embed-page .cm-s-solarized.cm-s-dark.CodeMirror, .embed.embed-page .cm-s-solarized.cm-s-dark .CodeMirror-gutters, .embed.embed-page .cm-s-solarized.cm-s-light.CodeMirror, .embed.embed-page .cm-s-solarized.cm-s-light .CodeMirror-gutters {
  background-color: var(--ctp-tertiary-background-color);
}

:root {
  --ctp-cm-theme: "ctp-frappe";
}

:root,
.theme-dark,
.theme-dark.ctp-frappe {
  --ctp-rosewater: 242, 213, 207;
  --ctp-flamingo: 238, 190, 190;
  --ctp-pink: 244, 184, 228;
  --ctp-mauve: 202, 158, 230;
  --ctp-red: 231, 130, 132;
  --ctp-maroon: 234, 153, 156;
  --ctp-peach: 239, 159, 118;
  --ctp-yellow: 229, 200, 144;
  --ctp-green: 166, 209, 137;
  --ctp-teal: 129, 200, 190;
  --ctp-sky: 153, 209, 219;
  --ctp-sapphire: 133, 193, 220;
  --ctp-blue: 140, 170, 238;
  --ctp-lavender: 186, 187, 241;
  --ctp-text: 198, 206, 239;
  --ctp-subtext1: 181, 189, 220;
  --ctp-subtext0: 165, 172, 201;
  --ctp-overlay2: 148, 155, 183;
  --ctp-overlay1: 131, 138, 164;
  --ctp-overlay0: 115, 120, 145;
  --ctp-surface2: 98, 103, 126;
  --ctp-surface1: 81, 86, 108;
  --ctp-surface0: 65, 69, 89;
  --ctp-base: 48, 52, 70;
  --ctp-mantle: 41, 44, 60;
  --ctp-crust: 35, 38, 52;
  /*WHITBOARD COLORS*/
  --wb-ctp-rosewater: 222, 149, 132;
  --wb-ctp-flamingo: 221, 120, 120;
  --wb-ctp-pink: 236, 131, 208;
  --wb-ctp-mauve: 136, 57, 239;
  --wb-ctp-red: 210, 15, 57;
  --wb-ctp-maroon: 230, 69, 83;
  --wb-ctp-peach: 254, 100, 11;
  --wb-ctp-yellow: 228, 147, 32;
  --wb-ctp-green: 64, 160, 43;
  --wb-ctp-teal: 23, 146, 153;
  --wb-ctp-sky: 4, 165, 229;
  --wb-ctp-sapphire: 32, 159, 181;
  --wb-ctp-blue: 42, 110, 245;
  --wb-ctp-lavender: 114, 135, 253;
  --wb-ctp-text: 76, 79, 105;
  --wb-ctp-subtext1: 92, 95, 119;
  --wb-ctp-subtext0: 108, 111, 133;
  --wb-ctp-overlay2: 124, 127, 147;
  --wb-ctp-overlay1: 140, 143, 161;
  --wb-ctp-overlay0: 156, 160, 176;
  --wb-ctp-surface2: 172, 176, 190;
  --wb-ctp-surface1: 188, 192, 204;
  --wb-ctp-surface0: 204, 208, 218;
  --wb-ctp-base: 239, 241, 245;
  --wb-ctp-mantle: 230, 233, 239;
  --wb-ctp-crust: 220, 224, 232;
}

.form-checkbox:checked {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='rgb(48, 52, 70)' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E") !important;
}

[griimick]

@rpoovey Currently the way themes are defined right now, you can only access one flavor at a time as they are defined as separate themes (selected via Theme settings in Logseq).

Let me give it a shot and get back to you. Your approach is correct, we will have to style the whiteboard separately with frappe styles. But instead of defining the colors, we can use a more specific scope that targets the whiteboard and override the variables.

On a side note, I kind of like this requirement and can look into making this a separate setting of its own.

[griimick]

Assuming you want to achieve something like in screenshot. In the current state of the theme, this will require some major tweaks to how whiteboard is currently themed as it is based on global light/dark theme selection. Will spend some time and if I can up with something feasible.

[rpoovey]

Let me give it a shot and get back to you. Your approach is correct, we will have to style the whiteboard separately with frappe styles. But instead of defining the colors, we can use a more specific scope that targets the whiteboard and override the variables.

On a side note, I kind of like this requirement and can look into making this a separate setting of its own.

Thanks! I thought of this from not being able to use the --ctp-base color from Frappe on the whiteboard as a pencil/marker color because its the background...

Assuming you want to achieve something like in screenshot. In the current state of the theme, this will require some major tweaks to how whiteboard is currently themed as it is based on global light/dark theme selection. Will spend some time and if I can up with something feasible.

What you got in the screen shot is exactly what I was looking for! Well that and adjusting the color swatches, but thats another issue. hah. Well done on working that up so quickly. How could I assist in the rework of the css?

[griimick]

Thanks for confirming the requirement. I wouldn't recommend reworking on css for this theme right away because Logseq itself is rapidly tweaking styles in every release as they are implementing a proper design system. I would wait a few releases before we clean up the whiteboard styles.

I am sharing a custom css with you to get the screenshot styles which I jerry-rigged to meet the requirements. Just add the following line in your custom.css

@import url('https://gist.githubusercontent.com/griimick/7dc2dcdbffff4b14e38f2b61e2f5ada1/raw/336fb061d7f204060ad0890805d4ec3a5a0b1c6b/ctp-frappe.css')

[rpoovey]

@griimick Thank you so much! That all makes sense and this works for now.

Do you know off the top of your head the section that sets the colors in the color swatch picker?

I thought it was this section but thats not having any affect on the colors:

  --ctp-wb-background-color-gray: color-mix(in srgb, rgb(var(--ctp-gray)), rgb(var(--ctp-base)) 60%);
  --ctp-wb-background-color-red: color-mix(in srgb, rgb(var(--ctp-red)), rgb(var(--ctp-base)) 60%);
  --ctp-wb-background-color-yellow: color-mix(in srgb, rgb(var(--ctp-yellow)), rgb(var(--ctp-base)) 60%);
  --ctp-wb-background-color-green: color-mix(in srgb, rgb(var(--ctp-green)), rgb(var(--ctp-base)) 60%);
  --ctp-wb-background-color-blue: color-mix(in srgb, rgb(var(--ctp-blue)), rgb(var(--ctp-base)) 60%);
  --ctp-wb-background-color-purple: color-mix(in srgb, rgb(var(--ctp-mauve)), rgb(var(--ctp-base)) 60%);
  --ctp-wb-background-color-pink: color-mix(in srgb, rgb(var(--ctp-pink)), rgb(var(--ctp-base)) 60%);

If this is too much tweaking for you at this point I'll just deal. haha.

[griimick]

No worries, there are multiple definitions for different things in whiteboard which makes this confusing. An example why I say whiteboard styles need cleanup :)

/* Shape background color */
--ctp-wb-background-color-yellow: color-mix(in srgb, rgb(var(--ctp-yellow)), rgb(var(--ctp-base)) 60%);
/* Shape outline color */
--ctp-wb-stroke-color-yellow: rgb(var(--ctp-yellow));
/* Shape label color */
--ctp-wb-shape-label-color-yellow: rgb(var(--ctp-yellow));
/* Pen path color */
--ctp-wb-text-color-yellow: rgb(var(--ctp-yellow));
/* Color swatch color */
.bg-yellow-500 {
  background-color: rgb(var(--ctp-yellow));
}

Note changing the color for swatch will only change the color of the swatches themselves, you will have to tweak other related variables as well for swatch color changes to take affect for the required whiteboard tools.

In case you aren't aware of this, you can Toggle Developer Tools in your Logseq App and inspect the elements to see what styles or variables are used.

[rpoovey]

Oh man, that is a mess. Thanks for the description.

I did not know that about dev tools, that should make it easier to mess around.

Thanks again for your help here. I look forward to what can be done with styles once the Logseq team finishes implementing a proper design system. Until then, this will work just fine for my needs.

[griimick]

I just released a new version of the theme v0.6.0 which introduces setting light theme for whiteboard separately under theme settings. see #30 description. This means the jerry rigged external styles I shared above aren't required anymore.

You can now customize whiteboard color swatches just by overriding a few variables.

/* custom.css */
.whiteboard-page {
    --ctp-wb-color-gray: gray !important;
    --ctp-wb-color-red: red !important;
    --ctp-wb-color-yellow: yellow !important;
    --ctp-wb-color-green: green !important;
    --ctp-wb-color-blue: blue !important;
    --ctp-wb-color-purple: purple !important;
    --ctp-wb-color-pink: pink !important;
}

I am closing this issue now. Feel free to reopen this if you face any issues or create a new one. Thanks!