Explicit CSS selectors with more specificity override code block color in light mode

[xypnox]

What Are You Doing?

Apply a custom color scheme and use a code-block element in light mode.

Eg: https://www.xypnox.com/spellcraft/docs/components/code/

Expected Behaviour:

The color should be set as defined in the colors.

Current Behavior

The background is overridden and the light theme colors are being applied:

Possible Solution

Perhaps these lines may be the culprit:

fastn/ftd/theme_css/fastn-theme.light.css

Lines 52 to 55 in bf7b519

	:not(pre)>code[class*=language-].fastn-theme-light,
	pre[class*=language-].fastn-theme-light {
	background: #f5f2f0
	}

Your Environment

• fastn Version (I.e, output of fastn -v): 0.4.57
• Operating System: Linux
• Web Browser: Firefox

[amitu]

@xypnox can you propose some change that will fix it? A PR would be good.

[xypnox]

@amitu

I can understand how the css has more specificity but I am unsure about how this theme css file is used within fastn. The search gave me commented lines which probably won't be the issue:

fastn/ftd/src/executor/code.rs

Lines 61 to 65 in 2e77e6d

	let mut light_theme = include_str!("../../theme/fastn-theme.light.tmTheme").as_bytes();
	theme_set.themes.insert(
	"fastn-theme.light".to_owned(),
	syntect::highlighting::ThemeSet::load_from_reader(&mut light_theme).unwrap(),
	);

Moreover I don't understand why fastn-theme is being used in the build when I have not specified any dependency on it. Has it been misnamed? (eg: fastn-reset / fastn-default-styles)

Also why are there so many css files in the same directory.

cc. @Heulitig @Arpita-Jaiswal