playerofgames / logseq-mia-theme

A Logseq theme inspired by macOS and iA Writer.
MIT License
84 stars 3 forks source link

Make flashcard breadcrumb visible in dark theme #18

Closed hedyhli closed 1 year ago

hedyhli commented 1 year ago

Problem

I'm using mia-sans. Screenshots and screen recordings for before/after are included.

Expected

image

Actual

image

Solution

Looking through the code, it seems that the variable that controls the element color in question is from this snippet:

https://github.com/playerofgames/logseq-mia-theme/blob/4ff045412669f8122ac90e5cd7d4741b594f1027/mia_base.css#L317-L332

Alternative colors for dark theme are set for sidebar, but not for ls-card, which is the class used in the flashcards. So I added a similar snippet to L326-L332, using ls-card and adjusting text color to have a hover effect (using #CCCCC will have no hover effect).

:is(.dark, .dark-theme) .sidebar-item,
:is(.dark, .dark-theme) #main-content-container {
    --ls-primary-text-color: #CCCCCC;
    --ls-title-text-color: #CCCCCC;
    --color-level-1: var(--ls-secondary-background-color);
    --color-level-2: var(--ls-tertiary-background-color);
}

+:is(.dark, .dark-theme) .ls-card {
+   --ls-primary-text-color: #EEEEEE;
+   --ls-title-text-color: #EEEEEE;
+   --color-level-1: var(--ls-secondary-background-color);
+   --color-level-2: var(--ls-tertiary-background-color);
+}
+

Choice of #EEEEEE may seem arbitrary but I've seen it used elsewhere so I decided to pick that.

After this fix

https://github.com/playerofgames/logseq-mia-theme/assets/50042066/f5cd40b0-7dae-4208-9f46-cd8c522cfb25

Before this fix

https://github.com/playerofgames/logseq-mia-theme/assets/50042066/a11a71c4-3fbc-4149-926d-b41a0675f665

hedyhli commented 1 year ago

BTW apologies for the dour tone in the PR but I really love the style of this family of themes. Tried almost every other one in the marketplace before settling on this one!

playerofgames commented 1 year ago

BTW apologies for the dour tone in the PR but I really love the style of this family of themes. Tried almost every other one in the marketplace before settling on this one!

Thanks for your PR—no need to apologise, I appreciate you making it clear what the problem was and finding a straightforward solution. I don't use dark mode, and missed this in my (admittedly cursory) testing of dark mode.