0

I recently found out about the CSS: @media (prefers-color-scheme: dark) {

Now that I have it actually working, I had a brain fart: How do I give users an option to turn it OFF? So switch to 'regular/light' mode with the click of a button (preferably CSS as I'm using a wordpress theme).

I'm a bit confused if this is even possible and if I should continue along this path. Any ideas?

Code I have now:

@media (prefers-color-scheme: dark) {

.fusion-header{
    background-color: #1F1F1F !important;
}

#terugbel-card .fusion-column-wrapper, #slot-openen-card .fusion-column-wrapper, #slot-vervangen-card .fusion-column-wrapper,#slot-kopieren-card.fusion-column-wrapper, #slot-inbraakbeveiliging-card.fusion-column-wrapper, #about-card .fusion-column-wrapper, #about-aad-card .fusion-column-wrapper, blockquote .fusion-clearfix, #terugbelverzoek-card .fusion-column-wrapper, #mail-ons-card .fusion-column-wrapper {
    background-color: #1E1E1E !important;
}
#slot-openen-card .fusion-column-wrapper, #slot-vervangen-card .fusion-column-wrapper, #slot-kopieren-card .fusion-column-wrapper, #slot-inbraakbeveiliging-card .fusion-column-wrapper {
    background-image: linear-gradient(180deg, #1E1E1E 67%,#353535 100%) !important;
}}

I would like to DISABLE this code block so it reverts back to the theme's colors.

Gandoe Dyck
  • 87
  • 1
  • 9
  • https://stackoverflow.com/questions/56300132/how-to-override-css-prefers-color-scheme-setting This might fix your issue – Viira Sep 21 '21 at 11:12

0 Answers0