Customize Header and Sidebar Color and Text to be different from elsewhere

I’ve run into a problem trying to customize the color of the header and sidebar.

Now I’ll be the first to admit that I may be overthinking it.

I want to have a dark color for the header and sidebar with white text. However, doing this, makes text everywhere else white as well.

So I thought I’d create some css code to make the header and sidebard a dark background with white text.

It worked. For about 5 minutes. Then, everything reverted back.

I don’t know if the code is right.
Has anyone else faced this.

Here is the code I injected into the header.

/* Target the sidebar by its background and text color styles */ div[style*="background-color: rgb(220, 228, 232); color: rgb(0, 0, 0);"] { background-color: #1B3A5D !important; /* Replace with desired background color */ color: #ffffff !important; /* Replace with desired text color */ } /* Ensure all child text elements inside the sidebar also have the correct color */ div[style*="background-color: rgb(220, 228, 232); color: rgb(0, 0, 0);"] p, div[style*="background-color: rgb(220, 228, 232); color: rgb(0, 0, 0);"] span, div[style*="background-color: rgb(220, 228, 232); color: rgb(0, 0, 0);"] a, div[style*="background-color: rgb(220, 228, 232); color: rgb(0, 0, 0);"] li { color: #ffffff !important; /* Replace with desired text color */ } /* Add hover effect for links in the sidebar */ div[style*="background-color: rgb(220, 228, 232); color: rgb(0, 0, 0);"] a:hover { color: #FF5722 !important; /* Replace with desired hover color */ }