Automatic Dark Mode switching

@AmberV I probably found a sweet spot that works decently in all scenarios:

p>code, li>code {
        color: var(--primary-very-high);
        background-color: var(--secondary-very-high);
        border: 1px solid color-mix(in srgb, var(--primary-very-high) 15%, transparent);
    }

What do you think?

EDIT: color: var(--primary); also works okay, it’s a little more saturated foreground color in line with the body text)

2 Likes

Thanks! I’ll give this a go for now. It definitely looks better than the grey. I’ve also added the code block section to the @media conditional, since that seems to work fine in both states, and I think what I have looks nicer than the default big grey box.

1 Like

Oh yeah, that’s better! :+1:

While we’re at it: The L&L site link in the footer, Dark Mode, pretty invisible compared to its light counterpart:

This change helped a bit (didn’t try all colors, but this one turned out pleasant enough, IMHO):

.footer a {
	color: var(--tertiary-high);
} 
1 Like

I don’t know why there was anything overriding the footer bar link colour to begin with. It uses the normal link colour in dark mode, so I just removed it from light mode.

1 Like

When something like that comes back to haunt me, it’s often “inexplicable” in the sense of “just tryin’ something real quick here, no need to comment, going to delete it anyways” and then the phone rings…

2 Likes

Slightly off-topic, but I often use inline code for keyboard shortcuts, e.g. Ü. Turns out <kbd>…</kbd> actually looks pretty nice here: Ü. Those things you discover on a dull Saturday.

1 Like

Yeah, I noticed that a while back as well. I’d use it more often but I think I’d want to automate the typing a bit with a text expansion tool or something, because that’s a lot of typing over what I currently do! Just haven’t gotten around to it yet. :slight_smile:

1 Like

That’s my Alfred !keys snippet (but of course works in any text expander), I delete the ones I don’t need afterwards:

<kbd>⇧</kbd><kbd>ʩ</kbd><kbd>⌃</kbd><kbd>⌥</kbd><kbd>⌘</kbd><kbd>…</kbd>

ʩ

EDIT: Hmmm, “ʩ” is pretty esoteric (font support), I guess “fn” or “ⓕ” is safer.

The URL is Scrivener - Literature & Latte Forums
Regardless of browser, the text colour is always yellow on a white background.
My OS is Windows 10.

1 Like

I should add that I find it unreadable.

The relevant section of that pages looks like this on my Mac.

Do you fiddle with browser settings for text, etc? Or do you have some aggressive ad-blocker running?

1 Like

That’s interesting. It must be my PC. I have 4 browsers and I don’t mess with the text settings. My ad blocker is Malwarebytes and that shouldn’t interfere with text colours. I need to look into this further.
Thanks for your help.

Thanks for the report, and welcome to the forum!

I’ve merged this with the main discussion on fixes to the automatic dark mode feature that was recently added. I have added an alternative “card” look to the theme when viewing it in dark mode, which should address what you were describing. Let me know if you spot anything else that this fix might have missed, and I can add some more scope to it.

1 Like

Thanks, that was very helpul.