From 1cbfd2a582000de82c23d509655ba07198d7d8c9 Mon Sep 17 00:00:00 2001 From: Martin Widmann Date: Wed, 24 Jan 2024 14:00:06 +0100 Subject: [PATCH] feat: fix highlighted text foreground color (#21) 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 --- scss/_custom.scss | 2 +- scss/_ls-vars.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/scss/_custom.scss b/scss/_custom.scss index e0cd318..c2c6201 100644 --- a/scss/_custom.scss +++ b/scss/_custom.scss @@ -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 { diff --git a/scss/_ls-vars.scss b/scss/_ls-vars.scss index ff6e791..dfe9baa 100644 --- a/scss/_ls-vars.scss +++ b/scss/_ls-vars.scss @@ -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));