CSS is breaking ability to add dark theme

Development

AI-generated summary

The user sunjam is experiencing an issue where the dark theme is not functioning correctly on their production Discourse forum, with certain elements remaining white. They have shared custom CSS that appears to be causing the problem, including rules for header icons and category links. pfaffman asks about other themes or components in use and requests the URL, but sunjam explains they cannot share it. After further investigation, sunjam discovers that additional custom CSS was applied through a custom component, which they initially thought was default. Removing this component resolves the issue, allowing the dark theme to work properly. pfaffman guesses it might have been a “Make banner white” setting, but sunjam clarifies it was a “Font” setting.

1

I’m struggling to add a dark theme on a production forum. I’m not sure why, but the site keeps certain elements white. I spun up a test Discourse and cannot recreate, but it looks like this on the production forum after enabling the dark theme:

image
image1360×305 19.4 KB

CSS. Click to see

.page-not-found-search { display: none; }
.hamburger-panel ul.category-links li.subcategory {
display: none;
}
img[src*=‘#left’] {
float: left;
}
img[src*=‘#right’] {
float: right;
}
img[src*=‘#center’] {
display: block;
margin: auto;
}
.d-header-icons .icon:hover, .d-header-icons .icon:focus {
background-color: white;
}

.d-header-icons .d-icon {
color: white;
}

.d-header-icons .icon:hover .d-icon, .d-header-icons .icon:focus .d-icon {
color: #0082c9;
}

.drop-down-mode .d-header-icons .active .icon .d-icon {
color: #0082c9;
}

/* Don’t show subcategories in category list */
.category-list .subcategories {
display: none;
}

Afaik the issue is with the CSS, so I’m wondering about how I can change it. Thanks for any guidance.

2

Are any other themes or components at play?

Are you changing just the color scheme or are you trying to make changes via css?

Can you share the url?

3

image
image518×100 3.64 KB

I have been messing with the color scheme so far. I exported the existing css (linked above) and theme settings to to test on my own home discourse, but ran into no such troubles.

afaik I signed away that privilege in order to get this level of access. :heart:

4

I figured it out. There were additonal custom css values written into a custom component, which I thought was a default. Removing that component resolved everything and dark theme works perfectly.

Thanks for guidance @pfaffman as I know everyone has busy lives. :heart:

5

I’m guessing it was “Make banner white” !!!

6

It was “Font” :wink: