mfrankiewicz

Hello @jslittlefield, thank you and sorry for delayed response.

Please try to insert these styles in your theme template (or add it as custom css file and include it in template using wp_enqueue_style function):

#consent-banner-modal {
  background: #222;
  box-shadow: rgba(0, 0, 0, 0.7) 0 0 20px;
}

#consent-banner-settings {
  background: #222;
  box-shadow: rgba(0, 0, 0, 0.7) 0 0 20px;
}

#consent-banner-main h2 {
  color: #e6e6e6;
}

#consent-banner-modal .consent-banner-modal-wrapper p,
#consent-banner-settings p {
  color: #ccc;
}

#consent-banner-settings h2 {
  color: #e6e6e6;
  border-bottom: 1px solid #444;
}

#consent-banner-settings ul li {
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

#consent-banner-settings ul label {
  color: #e6e6e6;
}

.consent-banner-button {
  color: rgb(231, 78, 30);
  border-color: rgb(231, 78, 30);
  background-color: transparent;
}

.consent-banner-button:hover {
  color: rgba(231, 78, 30, .85);
  border-color: rgba(231, 78, 30, .85);
}

.consent-banner-button[href="#accept"] {
  color: #ffffff;
  border-color: rgb(231, 78, 30);
  background-color: rgb(231, 78, 30);
}

.consent-banner-button[href="#accept"]:hover {
  background-color: rgb(220, 114, 80);
  border-color: rgb(220, 114, 80);
}

@media (max-width:576px) {
  #consent-banner-settings .consent-banner-settings-buttons {
    background-color: #222;
  }
}

Banner will look like this with styles above:

Hello @jslittlefield ,

Regarding the dark mode issue, it can be fixed using the custom CSS styles setting. Please try enabling the plugin again, and I’ll help you create the necessary CSS rules that you can simply paste into the settings to ensure the Consent Mode Banner text is visible in your template.

Apologies for the delayed response, and let me know how you’d like to proceed!

Best,
Michał