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.