Skip to content

Commit

Permalink
feat: fix highlighted text foreground color (#21)
Browse files Browse the repository at this point in the history
Issue
---
When using the theme the foreground color of the selected text is too
similar to the background color set by logseq on selection. This is bad
from an accessabilty standpoint and makes using logseq with this theme
harder due to missing contrast.

Background
---
logseq-catppuccin sets the foreground color only while leaving it to the
logseq default theme to handle the background color.

Solution
---
I looked at how the obsidian catppuccin theme handled the color of the
selection. They introduced an new var `--text-on-accent` that handles
the foreground color. It is basically just a new name for the value in
`--ctp-base`. I added a new var `--ls-text-on-accent` recreating this
behavior and use this as the value for the selection's foreground color.

Co-authored-by: Martin Widmann <[email protected]>
  • Loading branch information
mwidmann and Martin Widmann authored Jan 24, 2024
1 parent 5854d8f commit 1cbfd2a
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 1 deletion.
2 changes: 1 addition & 1 deletion scss/_custom.scss
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ html[data-theme=dark] .cp__right-sidebar-topbar button {

// selection
::selection {
color: var(--ctp-color-level-1);
color: var(--ls-text-on-accent);
}

.inline.with-bg-color {
Expand Down
1 change: 1 addition & 0 deletions scss/_ls-vars.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
--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));
.logseq-tldraw {
--tl-selectFill: rgba(var(--ctp-tl-selectFill), 0.05);
--tl-selectStroke: rgb(var(--ctp-tl-selectStroke));
Expand Down

0 comments on commit 1cbfd2a

Please sign in to comment.