Logseq 2.0 UI elements not styled (shadcn/ui components)

[edwinhu]

Is there an existing issue outlining your problem?

• I have searched the existing issues and they do not solve my problem.

Describe your problem.

Many Logseq 2.0 UI elements are not styled by the Catppuccin theme, particularly components that appear to be from shadcn/ui. These elements retain the default Logseq green accent colors instead of using the Catppuccin palette.

Affected elements include:

• Toolbar buttons with ui__button class (blue backgrounds, invisible SVG icons)
• Dialog overlay backgrounds (green tint)
• Toggle switches (green when enabled)
• Active tab buttons in plugin settings
• Primary buttons with bg-primary class (default green instead of lavender)
• Select/combobox borders (green focus rings)
• Dialog links and buttons
• Input fields in dialogs
• Radio buttons and checkboxes

The issue seems to be that Logseq 2.0 introduced new CSS custom properties (--background, --foreground, --card, --popover, --primary, etc.) that are not being overridden by the Catppuccin theme, causing many UI elements to fall back to Logseq's default styling.

Workaround

I've created a custom.css that fixes many of these issues, but it's quite hacky with heavy use of !important and may not be the best long-term solution. The maintainers might want to investigate a more systematic approach to styling these shadcn/ui components.

Temporary custom.css workaround (click to expand)

@import url('https://logseq.catppuccin.com/ctp-mocha.css');

:root {
  --ls-font-family: "Maple Mono NF", monospace;
  --ls-page-title-font-family: "Maple Mono NF", monospace;

  /* Fix Logseq 2.0 UI backgrounds for Catppuccin Mocha dark theme */
  --background: 240 21% 15%;  /* Catppuccin Mocha base: rgb(30, 30, 46) */
  --foreground: 226 64% 88%;  /* Catppuccin Mocha text */

  --card: 240 21% 15%;  /* Catppuccin Mocha base */
  --card-foreground: 226 64% 88%;

  --popover: 240 21% 15%;  /* Catppuccin Mocha base */
  --popover-foreground: 226 64% 88%;

  --muted: 240 21% 12%;  /* Catppuccin Mocha mantle: rgb(24, 24, 37) */
  --muted-foreground: 226 64% 88%;

  --secondary: 240 21% 12%;  /* Catppuccin Mocha mantle */
  --secondary-foreground: 226 64% 88%;

  --primary: 227 70% 76%;  /* Catppuccin Mocha lavender: rgb(137, 180, 250) */
  --primary-foreground: 240 21% 15%;  /* Dark text on lavender */

  --input: 240 23% 27%;  /* Catppuccin Mocha surface0: rgb(69, 71, 90) - subtle border */
  --ring: 227 70% 76%;  /* Catppuccin Mocha lavender for focus ring */
}

.graph-view-nav {display: none;}

/* Fix for Logseq 2.0 ui__button styling */
/* Override the Catppuccin theme's blue background on TOOLBAR buttons only */
/* Scope to #head to avoid affecting dropdowns/modals */
#head button.ui__button,
#head a.ui__button,
html:not(html[data-color]) #head button.ui__button,
html:not(html[data-color]) #head a.ui__button,
html[data-theme="light"][data-color="logseq"] #head button.ui__button,
html[data-theme="light"][data-color="logseq"] #head a.ui__button,
html[data-theme="dark"][data-color="logseq"] #head button.ui__button,
html[data-theme="dark"][data-color="logseq"] #head a.ui__button,
html[data-color="none"] #head button.ui__button,
html[data-color="none"] #head a.ui__button {
  background-color: transparent !important;
  color: rgb(205, 214, 244) !important;
}

/* Make SVG icons inside header buttons visible */
#head button.ui__button svg,
#head a.ui__button svg,
html:not(html[data-color]) #head button.ui__button svg {
  stroke: rgb(205, 214, 244) !important;
  color: rgb(205, 214, 244) !important;
}

/* Header button hover state */
#head button.ui__button:hover,
#head a.ui__button:hover,
html:not(html[data-color]) #head button.ui__button:hover {
  background-color: rgba(205, 214, 244, 0.1) !important;
  color: rgb(205, 214, 244) !important;
}

/* SVG icons on hover */
#head button.ui__button:hover svg,
html:not(html[data-color]) #head button.ui__button:hover svg {
  stroke: rgb(205, 214, 244) !important;
}

/* Fix active state buttons (tabs, etc.) */
button.ui__button.active,
html:not(html[data-color]) button.ui__button.active,
html[data-theme="light"][data-color="logseq"] button.ui__button.active,
html[data-theme="dark"][data-color="logseq"] button.ui__button.active {
  background-color: rgb(137, 180, 250) !important;  /* Catppuccin Mocha blue/lavender */
  color: rgb(30, 30, 46) !important;  /* Dark text on blue background */
}

/* SVG icons in active buttons */
button.ui__button.active svg {
  stroke: rgb(30, 30, 46) !important;  /* Dark stroke on blue background */
}

/* Fix plugins page active tabs specifically */
.cp__plugins-page .secondary-tabs .ui__button.active,
.cp__plugins-page .tabs-inner .ui__button.active {
  background-color: rgb(137, 180, 250) !important;
  color: rgb(30, 30, 46) !important;
}

/* Additional targeting for header/toolbar buttons */
.toolbar button,
.toolbar .button,
button[class*="toolbar"],
.top-bar button,
header button,
.ls-toolbar button,
#head button,
.cp__header button,
.cp__header-logo-wrap + * button,
nav button,
[class*="header"] button,
[class*="Header"] button,
.ui__modal-panel header button {
  background-color: transparent !important;
  color: var(--ls-primary-text-color) !important;
  border: none !important;
}

.toolbar button:hover,
.toolbar .button:hover,
button[class*="toolbar"]:hover,
.top-bar button:hover,
header button:hover,
.ls-toolbar button:hover,
#head button:hover,
.cp__header button:hover,
nav button:hover,
[class*="header"] button:hover,
[class*="Header"] button:hover {
  background-color: rgba(180, 190, 254, 0.1) !important;
  color: var(--ls-link-text-color) !important;
}

/* Fix settings dialogs and modals */
.ui__dialog-content,
[role="dialog"],
.ui__modal-panel {
  background-color: rgb(30, 30, 46) !important;  /* Catppuccin Mocha base */
  color: rgb(205, 214, 244) !important;  /* Catppuccin Mocha text */
}

/* Fix toggle switches - remove green, use Catppuccin colors */
.ui__toggle[data-state="checked"],
button[role="switch"][data-state="checked"] {
  background-color: rgb(137, 180, 250) !important;  /* Catppuccin Mocha lavender */
}

.ui__toggle[data-state="unchecked"],
button[role="switch"][data-state="unchecked"] {
  background-color: rgb(69, 71, 90) !important;  /* Catppuccin Mocha surface0 */
}

/* Fix dialog buttons */
.ui__dialog-content button,
[role="dialog"] button {
  background-color: transparent !important;
  color: rgb(205, 214, 244) !important;
}

.ui__dialog-content button:hover,
[role="dialog"] button:hover {
  background-color: rgba(137, 180, 250, 0.2) !important;
}

/* Fix dialog links - remove green accent */
.ui__dialog-content a,
[role="dialog"] a {
  color: rgb(137, 180, 250) !important;  /* Catppuccin Mocha lavender instead of green */
}

.ui__dialog-content a:hover,
[role="dialog"] a:hover {
  color: rgb(180, 190, 254) !important;  /* Catppuccin Mocha mauve on hover */
}

/* Fix tab buttons in dialogs */
[role="tablist"] button,
[role="tab"] {
  background-color: transparent !important;
  color: rgb(205, 214, 244) !important;
  border-bottom: 2px solid transparent !important;
}

[role="tab"][data-state="active"],
[role="tablist"] button[data-state="active"] {
  border-bottom-color: rgb(137, 180, 250) !important;  /* Catppuccin Mocha lavender */
  color: rgb(137, 180, 250) !important;
}

/* Fix input fields in dialogs */
.ui__dialog-content input,
.ui__dialog-content textarea,
[role="dialog"] input,
[role="dialog"] textarea {
  background-color: rgb(49, 50, 68) !important;  /* Catppuccin Mocha surface1 */
  color: rgb(205, 214, 244) !important;
  border-color: rgb(69, 71, 90) !important;  /* Catppuccin Mocha surface0 */
}

.ui__dialog-content input:focus,
.ui__dialog-content textarea:focus,
[role="dialog"] input:focus,
[role="dialog"] textarea:focus {
  border-color: rgb(137, 180, 250) !important;  /* Catppuccin Mocha lavender */
  outline: none !important;
}

/* Fix plugin settings specific elements */
.cp__plugins-settings .settings-plugin-list li.active {
  background-color: rgb(49, 50, 68) !important;  /* Catppuccin Mocha surface1 */
}

.cp__plugins-settings .settings-plugin-list li.active a {
  color: rgb(137, 180, 250) !important;  /* Catppuccin Mocha lavender instead of green */
}

.cp__plugins-settings .settings-plugin-list li a:hover {
  background-color: rgb(49, 50, 68) !important;
}

/* Fix "Edit settings.json" link */
.edit-file a,
.cp__plugins-settings .edit-file a {
  color: rgb(137, 180, 250) !important;  /* Catppuccin Mocha lavender */
}

.edit-file a:hover,
.cp__plugins-settings .edit-file a:hover {
  color: rgb(180, 190, 254) !important;  /* Catppuccin Mocha mauve */
}

/* Fix code elements in settings */
.desc-item code,
.cp__plugins-settings code {
  color: rgb(180, 190, 254) !important;  /* Catppuccin Mocha mauve */
  background-color: rgb(49, 50, 68) !important;  /* Catppuccin Mocha surface1 */
}

/* Fix radio buttons */
.form-radio,
input[type="radio"] {
  accent-color: rgb(137, 180, 250) !important;  /* Catppuccin Mocha lavender */
}

/* Fix checkboxes */
.ui__checkbox[data-state="checked"],
input[type="checkbox"]:checked {
  background-color: rgb(137, 180, 250) !important;  /* Catppuccin Mocha lavender */
  border-color: rgb(137, 180, 250) !important;
}

.ui__checkbox,
input[type="checkbox"] {
  border-color: rgb(69, 71, 90) !important;  /* Catppuccin Mocha surface0 */
}

/* Fix settings headings */
.cp__plugins-settings h2,
.desc-item h2 {
  color: rgb(205, 214, 244) !important;  /* Catppuccin Mocha text */
}

/* Fix caret icons in settings */
.desc-item .ui__icon svg {
  stroke: rgb(137, 180, 250) !important;
}

/* Fix toggle background classes specifically */
.ui__toggle-background-on {
  background-color: rgb(137, 180, 250) !important;  /* Catppuccin Mocha lavender */
}

.ui__toggle-background-off {
  background-color: rgb(69, 71, 90) !important;  /* Catppuccin Mocha surface0 */
}

/* Fix dialog overlay background */
.ui__dialog-overlay {
  background-color: rgba(30, 30, 46, 0.9) !important;  /* Catppuccin Mocha base with transparency */
}

/* Fix any remaining green accents - override with lavender */
.cp__plugins-page a:not([href^="http"]):not([target="_blank"]),
.cp__plugins-page .link-block {
  color: inherit !important;
}

.cp__plugins-page a[href^="http"],
.cp__plugins-page a[target="_blank"] {
  color: rgb(137, 180, 250) !important;  /* Catppuccin Mocha lavender for external links */
}

/* Fix button hover states in plugin list */
.cp__plugins-item-card .btn:hover {
  background-color: rgba(137, 180, 250, 0.2) !important;
  color: rgb(205, 214, 244) !important;
}

/* Fix warning/admonition blocks */
.admonitionblock {
  background-color: rgb(49, 50, 68) !important;  /* Catppuccin Mocha surface1 */
  border-color: rgb(250, 179, 135) !important;  /* Catppuccin Mocha peach for warning */
}

/* Fix primary buttons - lavender background with dark text */
.bg-primary,
[class*="bg-primary"],
button[class*="bg-primary"],
a[class*="bg-primary"] {
  background-color: rgb(137, 180, 250) !important;  /* Catppuccin Mocha lavender background */
  color: rgb(30, 30, 46) !important;  /* Catppuccin Mocha base - dark text */
}

.bg-primary:hover,
[class*="bg-primary"]:hover,
button[class*="bg-primary"]:hover,
a[class*="bg-primary"]:hover {
  background-color: rgb(137, 180, 250) !important;  /* Keep lavender background on hover */
  color: rgb(30, 30, 46) !important;  /* Keep dark text on hover */
}

/* Fix text color for text-primary-foreground class */
.text-primary-foreground {
  color: rgb(30, 30, 46) !important;
}

.text-primary-foreground:hover {
  color: rgb(30, 30, 46) !important;
}

/* Fix buttons with both bg-primary and text-primary-foreground */
a.ui__button.text-primary-foreground,
button.ui__button.text-primary-foreground,
.ui__dialog-content .text-primary-foreground,
[role="dialog"] .text-primary-foreground,
.cp__plugins-page .text-primary-foreground {
  color: rgb(30, 30, 46) !important;
}

/* Fix select box border - remove green */
.ui__select-trigger,
button[role="combobox"] {
  border-color: rgb(69, 71, 90) !important;  /* Catppuccin Mocha surface0 */
}

.ui__select-trigger:focus,
button[role="combobox"]:focus {
  border-color: rgb(137, 180, 250) !important;  /* Catppuccin Mocha lavender on focus */
  outline: none !important;
}

Note: This workaround is quite hacky and uses !important extensively to override specificity issues. The maintainers might want to consider:

1. Adding proper support for Logseq 2.0's shadcn/ui CSS custom properties
2. Targeting the new component classes more systematically
3. Ensuring the theme loads with sufficient specificity to override default styles

Attach screenshots.

See affected elements list above

What Logseq version do you see the issue on?

2.0.0

What theme version do you see the issue on?

0.6.3 (latest)

Any additional comments?

The issue appears to stem from Logseq 2.0 adopting shadcn/ui components which rely heavily on CSS custom properties. The current Catppuccin theme doesn't override these properties, causing fallback to Logseq's default green accent colors.