Code block has light mode color for custom themes

samifinge commented 3 months ago

Requirements

[X] This is a bug report, and if not, please post to https://lemmy.ml/c/lemmy_support instead.
[X] Please check to see if this issue already exists.
[X] It's a single bug. Do not report multiple bugs in one issue.
[X] It's a frontend issue, not a backend issue; Otherwise please create an issue on the backend repo instead.

Summary

Text formatted as a code block has the white color scheme when using custom themes added into /lemmy-ui/extra_themes/

This occurs even if that custom themes just contains the same content as the default dark theme of darkly.css with no additional changes. Occurs in sidebar, posts and comments. Occurs regardless of browser/system's dark mode setting (separate issue mentioned here https://github.com/LemmyNet/lemmy-ui/issues/2405).

darkcode

Steps to Reproduce

Make a copy of darkly.css and rename it to something else
Place it in the /lemmy-ui/extra_themes/ folder where custom themes go
Navigate to account settings (ctrl+F5 for newly added file to appear)
Select the new theme
Make a comment containing code block formatting
Observe background color of code block

Technical Details

Firefox on Linux and Android

Lemmy Instance Version

0.19.4

Lemmy Instance URL

https://lemmy.zip/c/news@hexbear.net

dessalines commented 3 months ago

The code-theming doesn't seem to work for custom themes. We'd need to add something to it that possibly checks the name of the theme, and makes sure it includes text like dark, to be able to set it correctly.

SleeplessOne1917 commented 2 months ago

@dessalines Want me to move forward with the name checking approach? I can't see much of a way to handle this other than adding another option for themes to be light and dark, but that sounds like a lost more work.

dessalines commented 2 months ago

Yeah, and feel free to rename any of the ones that currently aren't clearly marked as dark.

LemmyNet / lemmy-ui