Header too dark in Dark Mode

BedsideNinja

Is there a way to keep header text color unchanged in dark mode?

For my color scheme the dark version makes it too dark to read and the light mode color would look just fine. I tried adding CSS code in the admin but it didn't seem to affect header text.

Imgur

Other elements such as notifications or setting menus look great in dark mode so I'd like to keep their current behaviour.

Thanks

Header_Footer

Hello, I am new here but I know some basic css you can try adding this in Custom CSS box but please replace with your color in given text

.affix .App-header
background: your_red_theme_color_here_please;
background-color: your_red_theme_color_here_please;

Note : When you will shift to dark mode due to css changes it will show you dark color but once user refreshes the page it will show the color you want, If you are unable to understand what I am saying ignore this note nothing will happen.

BedsideNinja it didn't seem to affect header text.
Try !important

.affix .App-header
background: your_red_theme_color_here_please !important;
background-color: your_red_theme_color_here_please !important;

BedsideNinja

Header_Footer It's difficult to say which class set the text color

BedsideNinja

Thanks! Are you sure about the .affix class, though? Searching the source code hasn't highlighted it once.

This didn't seem to change anything:

.affix .App-header {
background: #d09fa0 !important;
background-color: #890e11 !important;
}

#d09fa0 is the color I'd want to use for text color.

BedsideNinja

Any ideas?

[deleted]

BedsideNinja Can you provide a link for me to check ?

BedsideNinja

[deleted] Link of the forum? https://chiliconfilm.com/lokace

Dark mode option shows only when logging in though.

OmDada

BedsideNinja Try this
and please also delete testDarkMode account

.Button {
    color: white !important;
}

BedsideNinja

OmDada Thanks a lot! Will do.

I updated the code to include Search bar as well:

.Button {
    color: white !important;
}

.Search-input {
    color: white !important;
}

.FormControl {
    color: white !important;
}

::placeholder {
  opacity: 1; /* Firefox compatibility */
  color: white !important;
}

[deleted]

Do you have any css trick for hamburger, composer, return/back and three dots icons/options in mobile mode?

BedsideNinja

[deleted] After a few more tweaks the whole code should look like this:

.Button, .Search-input, .FormControl, i .Button-icon, .item-title h3 {
    color: white !important;
}

::placeholder {
  opacity: 1; /* Firefox */
  color: white !important;
}