Header Hero's/Events

These view poorly in the light version of the theme, they do look good on the dark version though.


something like this for the light version may look better if that’s what people are using for their system/prefer light themes.

It seems to do that to people who have dark mode on their phone even when the light mode is switched on as it looks like that on my phone but on my laptop it has a lighter tone on the light mode.

Try this:

Remove:

/* Dark theme refinements */

@media (prefers-color-scheme: dark) {
    .sp-november-card {
        background:
            radial-gradient(
                circle at 100% 100%,
                color-mix(in srgb, var(--card-accent) 19%, transparent),
                transparent 55%
            ),
            color-mix(in srgb, var(--card-accent) 10%, #17131d 90%);

        box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
    }

    .sp-november-tag {
        background: color-mix(
            in srgb,
            var(--card-accent) 17%,
            transparent
        );
    }
}

Replace with:

/* Dark theme refinements */

body.dark .sp-november-card {
    background:
        radial-gradient(
            circle at 100% 100%,
            color-mix(in srgb, var(--card-accent) 19%, transparent),
            transparent 55%
        ),
        color-mix(in srgb, var(--card-accent) 10%, #17131d 90%);

    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}

body.dark .sp-november-tag {
    background: color-mix(
        in srgb,
        var(--card-accent) 17%,
        transparent
    );
}

There’s a few places on the light theme that do it to my knowledge, but this may help with that.

It should be fixed. Thanks 🙂