Applying dark mode dependent CSS

How would you change the queue container background with custom CSS? In dark mode it’s this horrible light gray so I’m trying to change it to always be a dark colour in both light and dark mode.

Have tried the following but it’s not working:

.queue-container {
    @apply bg-gray-900;
}

Normal CSS behaves the way you’d expect with the colour filter on.

.queue-container {
    background: #000; /* white background in dark mode */
}

The current hacky dark mode just inverts all colors. Therefore you need to specify a light color such that it inverse is dark in dark mode, like white or #eee:

.queue-container { background: #eee; }
1 Like

Yep this is what I’m doing now. So definitely no way to make it toggle depending on whether dark mode is activated?

Oh, sorry, I must have skipped that part :sweat_smile:

The current dark mode adds a .dark-mode class to the #main.

So you can have CSS that is only applied in dark mode like this:

.dark-mode .queue-container { background: #eee; }
2 Likes