Template:If darkmode/styles.css

/* this should be the fallback */
.ifdarkmode > .isdarkmode {
    display: none;
}
.ifdarkmode > .nodarkmode {
    display: inherit; /* fallback */
    display: initial;
}

html.skin-theme-clientpref-night .ifdarkmode > .nodarkmode {
    display: none;
}
html.skin-theme-clientpref-night .ifdarkmode > .isdarkmode {
    display: inherit; /* fallback */
    display: initial;
}

/* dark mode gadget */
html.client-dark-mode .ifdarkmode > .nodarkmode {
	display: none;
}

html.client-dark-mode .ifdarkmode > .isdarkmode {
    display: inherit; /* fallback */
    display: initial;
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .ifdarkmode > .nodarkmode {
	    display: none;
	}
	html.skin-theme-clientpref-os .ifdarkmode > .isdarkmode {
	    display: inherit; /* fallback */
	    display: initial;
	}
}

@media screen and (prefers-color-scheme: light) {
	html.skin-theme-clientpref-os .ifdarkmode > .isdarkmode {
	    display: none;
	}
	html.skin-theme-clientpref-os .ifdarkmode > .nodarkmode {
	    display: inherit; /* fallback */
	    display: initial;
	}	

}