Resolved

Update 1: Appears that I duplicated functionality in an existing template, so I did a quick and dirty merge. Awesome Aasim 21:47, 18 November 2024 (UTC)[reply]__DTELLIPSISBUTTON__{"threadItem":{"timestamp":"20241118214700","author":"Awesome Aasim","type":"comment","level":1,"id":"c-Awesome_Aasim-20241118214700-Edit_request_to_make_new_template_work_{{lightdark}}","replies":[],"displayName":"Awesome"}}-->

This edit request has been answered. Set the |answered= or |ans= parameter to no to reactivate your request.

I recently created a template that changes what content is displayed depending on whether dark or light mode is used. However, it requires a bit of CSS to make working. Please add the following tested CSS into the common.css to make the behavior work as intended.

.lightdark-islightmode {
	display: inline;
}

.lightdark-isdarkmode {
	display: none;
}

@media screen {
	html.skin-theme-clientpref-night .lightdark-islightmode {
		display: none;
	}

	html.skin-theme-clientpref-night .lightdark-isdarkmode {
		display: inline;
	}
}


@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .lightdark-islightmode {
		display: none;
	}

	html.skin-theme-clientpref-os .lightdark-isdarkmode {
		display: inline;
	}
}

The added lines will make the template work. Since as far as I am aware there isn't CSS that will change this theme, the only way to do this is to have some CSS to make this template work like a switch, similar to all the CSS hiding and showing elements for different user groups.

If it is technically feasible, you can condense the .lightdark-islightmode and .lightdark-isdarkmode down to .lightmode/.islightmode and .darkmode/.isdarkmode to make this CSS work outside of the template I created. Awesome Aasim 01:51, 17 November 2024 (UTC)[reply]__DTELLIPSISBUTTON__{"threadItem":{"timestamp":"20241117015100","author":"Awesome Aasim","type":"comment","level":1,"id":"c-Awesome_Aasim-20241117015100-Edit_request_to_make_new_template_work_{{lightdark}}","replies":["c-Xaosflux-20241117022400-Awesome_Aasim-20241117015100"],"displayName":"Awesome"}}-->

 Not done not going to add this to the site wide script for all readers just for this one template that doesn't have any current usability, and is unlikely to be used in places all readers would need it, such as in articles. — xaosflux ^Talk 02:24, 17 November 2024 (UTC)[reply]__DTELLIPSISBUTTON__{"threadItem":{"timestamp":"20241117022400","author":"Xaosflux","type":"comment","level":2,"id":"c-Xaosflux-20241117022400-Awesome_Aasim-20241117015100","replies":["c-Awesome_Aasim-20241117042100-Xaosflux-20241117022400"]}}-->

I see the primary use case being templates where icons may need to shift colors depending on background. For example changing a black icon to white where readability is concerned. But I am not going to further debate the merits of such a change yet as I do agree it may need more time to determine its prospective use on pages across Wikipedia. Awesome Aasim 04:21, 17 November 2024 (UTC)[reply]__DTELLIPSISBUTTON__{"threadItem":{"timestamp":"20241117042100","author":"Awesome Aasim","type":"comment","level":3,"id":"c-Awesome_Aasim-20241117042100-Xaosflux-20241117022400","replies":["c-Izno-20241117070600-Awesome_Aasim-20241117042100"],"displayName":"Awesome"}}-->

This doesn't need Common.css anyway. It can be done solely in TemplateStyles. Izno (talk) 07:06, 17 November 2024 (UTC)[reply]__DTELLIPSISBUTTON__{"threadItem":{"timestamp":"20241117070600","author":"Izno","type":"comment","level":4,"id":"c-Izno-20241117070600-Awesome_Aasim-20241117042100","replies":["c-Awesome_Aasim-20241117164200-Izno-20241117070600"]}}-->

You're right. I thought it would, apparently not! Awesome Aasim 16:42, 17 November 2024 (UTC)[reply]__DTELLIPSISBUTTON__{"threadItem":{"timestamp":"20241117164200","author":"Awesome Aasim","type":"comment","level":5,"id":"c-Awesome_Aasim-20241117164200-Izno-20241117070600","replies":[],"displayName":"Awesome"}}-->

Sorry to pile on here after the close, but please see the template's talk page, where I asked if this template was redundant to {{if dark}}. – Jonesey95 (talk) 04:35, 18 November 2024 (UTC)[reply]__DTELLIPSISBUTTON__{"threadItem":{"timestamp":"20241118043500","author":"Jonesey95","type":"comment","level":1,"id":"c-Jonesey95-20241118043500-Edit_request_to_make_new_template_work_{{lightdark}}","replies":[]}}-->