Conversation
Logseq resolves themed colours through a three step chain, both in its
stylesheets and in the generated Tailwind utilities:
var(--lx-gray-03, var(--ls-tertiary-background-color, var(--rx-gray-03)))
The theme only defined the `--ls-*` layer and reset `--lx-*` to `initial`.
That was enough for 0.10, but 2.0 routes far more of its chrome through the
`--lx-*`, shadcn and Radix tokens, and several steps have no `--ls-*` fallback
at all: `--lx-gray-08`..`12`, every `-alpha` step, and `--lx-accent-01`/`-12`
(whose fallback `--rx-gray-01` is malformed CSS). Those rendered stock Radix
grey and blue on top of a Catppuccin background.
A single stylesheet still covers both versions.
* _lx-vars: define the real `--lx-gray-01..12` and `--lx-accent-01..10` ramps
plus alpha variants. Needs a doubled `:root` to out-specify Logseq's own
`html[data-color=logseq][data-theme=light]` rule, which would otherwise win
in light mode. `--lx-accent-11`/`-12` are explicitly reset to `initial` so
links, refs and tags keep their distinct palette colours -- not declaring
them is not enough, since colors.css assigns them.
* _shui-vars: new. Defines the shadcn HSL tokens and the `--rx-*` scales.
`shui.css` opens with `html * { border-color: hsl(var(--border)) }`, so an
unthemed `--border` tinted every border in the app.
* _utils: emit HSL triplets space separated. Logseq uses the slash alpha form
`hsl(var(--primary) / .4)`, which the comma form cannot parse.
* _custom: restrict the accent button fill to the `as-classic`/`as-solid`
variants. 2.0 renders the whole header toolbar as ghost buttons, so the
previous blanket `.ui__button` rule painted every toolbar icon a solid
accent block. Also latent on 0.10.
* _v2: new. Covers 2.0-only elements (quote nodes, Radix task checkboxes,
block tags, property keys, table and card views) and `.text-warning`, which
2.0 rewrote onto literal Tailwind swatches. Inert on 0.10.
* ctp-oled: black out the `-hsl` twins so the shadcn surfaces follow OLED.
* index.js: publish `--ctp-accent-hsl` alongside `--ctp-accent` so accent
switching reaches the HSL consumers.
* _ctp-vars: give `--ctp-blockquote-line` a fallback; without an accent
selected the declaration was invalid and quote bars fell back to
currentColor.
Verified by driving the Logseq 2.0.1 and 0.10.15 desktop apps over CDP:
sidebar, dropdowns, command palette, settings, rendered content, whiteboards
(0.10), light mode and OLED. Token resolution was diffed between both
versions and matches on every shared surface.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #75
Problem
Logseq resolves every themed colour through a three step chain, both in its stylesheets and in the Tailwind utilities it generates:
This theme only ever defined the
--ls-*layer and reset--lx-*toinitial. That was enough for 0.10, but 2.0 routes far more of its chrome through the--lx-*, shadcn and Radix tokens, and several steps have no--ls-*fallback at all:--lx-gray-08…--lx-gray-12fall straight through to--rx-gray-*-alphastep falls through to--rx-*-alpha--lx-accent-01/--lx-accent-12fall back to--rx-gray-01— a malformed token with novar()wrapper, so it is simply invalid--lx-accent-*-alphahas no fallback whatsoeverThose steps rendered stock Radix grey and blue on top of a Catppuccin background, which is what #75 describes.
Fix
A single stylesheet still covers both versions — no separate 2.0 build.
_shui-vars.scss(new)--background,--foreground,--primary,--card,--popover,--muted,--secondary,--accent,--destructive,--border,--input,--ring) and the--rx-*scales.shui.cssopens withhtml * { border-color: hsl(var(--border)) }, so an unthemed--bordertinted every border in the app._lx-vars.scss--lx-gray-01..12and--lx-accent-01..10ramps plus alpha variants, instead ofinitial._utils.scsshsl(var(--primary) / .4), which the comma form cannot parse._custom.scssas-classic/as-solidvariants._v2.scss(new).text-warning. Inert on 0.10.ctp-oled.scss-hsltwins so the shadcn surfaces follow OLED.index.js--ctp-accent-hslalongside--ctp-accentso accent switching reaches the HSL consumers.Two subtleties worth flagging for review:
html[data-color=logseq][data-theme=light](0,2,1). A plain:root[data-color=…]is only (0,2,0) and loses in light mode, so:rootis doubled to reach (0,3,0) rather than relying on stylesheet order.--lx-accent-11/-12are explicitly reset toinitial. Logseq reads them asvar(--lx-accent-11, var(--ls-link-text-color, …))for links butvar(--lx-accent-11, var(--ls-tag-text-color, …))for tags. Defining them collapses both roles onto one colour and loses the multi-colour "Full palette" look. Simply not declaring them is not enough, becausecolors.cssassigns--lx-accent-11: var(--rx-logseq-11).Issue checklist
Every item reported in #75:
ui__button(blue background, invisible SVG icons) — 2.0 renders the whole header toolbar as ghost buttons, and the old blanket.ui__buttonrule painted each one a solid accent block with a contrasting label colour that vanished once the fill was removed. Now scoped to the solid variants. This was latent on 0.10 too.bg-primaryThis replaces the
!importantworkaround in the issue, and applies across all five flavours rather than hardcoding Mocha values.Testing
Driven against the real 2.0.1 and 0.10.15 desktop apps over CDP, in throwaway profiles:
The remaining unthemed Radix hues belong to Logseq's named accent colours, which the README already documents as unsupported.
Notes
CtpWhiteboardsetting is now labelled 0.10 only._whiteboard.scssis kept for 0.10.--ctp-blockquote-linehad no fallback, so with no accent selected the declaration was invalid and quote bars fell back tocurrentColor.