How do I change the color of a hovered item?

Question

I'm currently trying to implement kind of a dark mode and I'm struggling with this:

Navbar when dark mode is disabled

Navbar when dark mode is enabled

As you can see, when dark mode is disabled.nav-item is hovered and text can be seen, but when dark mode is enabled, it's almost impossible to see due to the color.

This is how I'm toggling class to enable and disable dark mode

Thing is I can't put this:

.nav-item:not(.is-active):hover

as a className in order to toggle between .nav-item:not(.is-active):hover with a specific color for light mode and .nav-item:not(.is-active):hover with a different color (let's say white) for dark mode.

I hope you can help me. Thanks in advance: :)

Answer 1

When you toggle the dark-mode class on for nav-item , you can use the .dark-mode.nav-item:not(.is-active):hover CSS selector.Creating a style using this selector will allow you to target nav-item s with the dark-mode class. In that style you can define a different color for hover while in dark mode.

For more info about what kind of CSS selectors are available, check this page from W3 schools .