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:

https://github.com/fastn-stack/fastn/blob/bf7b519afaa802a1a20ee6f3bf370c85ebebc085/ftd/theme_css/fastn-theme.light.css#L52-L55

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: https://github.com/fastn-stack/fastn/blob/2e77e6d89b7439759b049034427586ec6e39f275/ftd/src/executor/code.rs#L61-L65

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