Inline code style isn't affected by dark theme

Site Help & Feedback
1

The style for inline code (``) seems to be the same in the light and dark theme (background #dedede). Could that be changed?

IMHO, the background is maybe a bit too dark in light mode, and way too bright in dark mode. Admittedly I probably overuse this feature, but it can be kind of blinding.

Looking at other Discourse instances, I guess it was changed to the current style because the default one doesn’t stand out enough in the light theme? If so, I’d agree with that to an extent; I do appreciate not having to worry about punctuation being interpreted as part of a command.

1 Like
2

The styling of code of discuss.python.org I find nice in dark mode.

Example Always on top Python script in MacOS - Python Help - Discussions on Python.org

3

Yes, it can. Here’s the CSS, and this is currently applied to both Dark and Light themes:

p>code, li>code {
   color: #db3279;
   background: #dedede;
   padding: 2px 4px;
   border-radius: 2px;
}

We can change this for the different themes. I’m not a dark-mode user (or a designer!), so I’m open to suggestions!

4

Try this as a first draft; I took the values from the discuss.python.org CSS.

p>code, li>code {
   color: #d6d6d6;
   background: #333;
   padding: 2px 4px;
   border-radius: 2px;
}

FYI Python folks have written the CSS using css vaiables that makes this easier to do.

They define variables for the colours and load either the light or dark variables.
Then all the rest of the CSS uses the variables.

:root {
--foreground: #d6d6d6;
--background: #333;
}

p>code, li>code {
   color: var(--foreground);
   background: var(--background);
}
5

Discourse themes in general use centrally-defined color schemes, but there isn’t a separate one for inline code.

Could you post some screenshots of what your suggested dark-mode colors look like in practice?

6

This is an example topic with a variaty of code comments: Script to get top-level packages from source tree - Packaging - Discussions on Python.org
It should come up in dark mode if you DE setting is a dark theme I think.

Here is a screen shot of a piece of that thread incase its not working from your browser:

Example dark mode
Example dark mode902×520 53.4 KB

7

I have to agree their dark mode inline code highlighting is nicer on the eyes.

8

I made a possible change — try setting your site theme to Testing Dark (use at your own risk in preferences: interface (make sure to hit the Save button). What do you think?

9

Well, they’ve been more clever/lazy than that.

They’ve used colors that are already defined for the code-highlighting embedding, and borrowed those for inline code. The code-highlighting CSS already has dark-mode switching, so inline code gets it for free.

IOW, code_highlighting.scss (on the Python or Fedora instances) ends with:



p > code,
li > code,
pre > code {
  color: var(--primary-very-high);
  background: var(--hljs-bg);
}

By simply not overriding that at all, inline code matches the highlighted code blocks, in either palette.

(Oops, sorry. This got posted as a reply to Matt but became a reply to Barry.)

10

I think we still want to override it for a more distinct look than is default but I’ll look for something that works on both light and dark without being Too Much.

11

Aha! That is where the weird named variables come from.

12

I mean, i don’t know if inline red fixed-width text is the hill I’d want to die on, personally, from a branding perspective… but it’s not my call, obviously.

FTR, in terms of fixed-width text rendering, here’s the site’s current theme in dark mode…

image

Here’s the same thing with the theme overrides disabled so that it falls back to the default styles from code_highlighting.scss…

image

(I can’t tell if the background to the inline text really is darker than the background to the highlighted block, or if that’s just an optical illusion. It shouldn’t be darker, unless there’s some non-opaque color rule I failed to spot.)

13

I’m not married to it being red. I just want it to stand out. When I get a chance I’ll play with some options.

14

I’ve been using this theme, and I like it a lot better, but I’m not sure there’s enough contrast.

I noticed that Pagure uses a slightly paler pink (#e83e8c) with no background. My Dark Reader extension lightens that a bit further to #e94a93 for dark mode. I think it works pretty well.