[Resolved] Changing color of “post comment” button for dark theme

[Joey]

Some of my pages have a black background and white text, for a dark theme. The “post comment” button at the bottom of the page is invisible because it is normally just black letters. I’m trying to find where I can adjust the class of that button (i.e. white text color) to make it visible. See an example here: https://simipress.com/el-retorno/

Inspect element just tells me the class is “submit”. Not sure how I can fix it. Thank you.

[Leo]

Hi there,

Would the buttons options under Customizer > Colors work for you?

If not we can use this CSS:

.comments-area input[type="submit"] {
    background-color: #ffffff;
    color: #000000;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂

[Joey]

Thank you Leo. No, customizing colors for the whole site won’t work because the rest of the site has a white background. The CSS works, thank you. I had to adjust so it would only affect the “photos” category (my dark theme):

.single.category-photos .comments-area input[type="submit"] {
    background-color: inherit;
    color: #FFF;
}

How do I adjust the hover colors? I tried adding a:hover or button:hover to the above code but I’m doing something wrong.

[David]

Hi there,

try this CSS:

.category-photos .comments-area input[type="submit"]:hover {
    background-color: #fff;
    color: #000;
}

[Joey]

Thank you very much to both of you. That worked really well.

[Leo]

No problem 🙂

[Author]

Posts