Twenty Twenty: Easily add prefers-color-scheme: dark support

[adamzea]

Here's some code to easily add automatic dark-mode support to the Twenty Twenty theme.

.menu-modal .menu-modal-inner  { 
	background-color: rgba(51, 51, 51, 0.65);
	-webkit-backdrop-filter: blur(30px) saturate(125%);
	backdrop-filter: blur(30px) saturate(125%);
} 

.search-modal-inner {
	background-color: rgba(255, 255, 255, 0.55);
	-webkit-backdrop-filter: blur(30px) saturate(125%);
	backdrop-filter: blur(30px) saturate(125%);
}

.ose- {
	display: block !important;
}

@media (prefers-color-scheme: dark) {
	body {
		--wp--preset--color--black: #000;
		--wp--preset--color--cyan-bluish-gray: #abb8c3;
		--wp--preset--color--white: #fff;
		--wp--preset--color--pale-pink: #f78da7;
		--wp--preset--color--vivid-red: #cf2e2e;
		--wp--preset--color--luminous-vivid-orange: #ff6900;
		--wp--preset--color--luminous-vivid-amber: #fcb900;
		--wp--preset--color--light-green-cyan: #7bdcb5;
		--wp--preset--color--vivid-green-cyan: #00d084;
		--wp--preset--color--pale-cyan-blue: #8ed1fc;
		--wp--preset--color--vivid-cyan-blue: #0693e3;
		--wp--preset--color--vivid-purple: #9b51e0;
		--wp--preset--color--accent: #d91146;
		--wp--preset--color--primary: #000;
		--wp--preset--color--secondary: #3866a8;
		--wp--preset--color--subtle-background: #b2d3ff;
		--wp--preset--color--background: #e8f3ff;
		--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,#9b51e0 100%);
		--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,#7adcb4 0%,#00d082 100%);
		--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);
		--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,#cf2e2e 100%);
		--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,#eee 0%,#a9b8c3 100%);
		--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,#4aeadc 0%,#9778d1 20%,#cf2aba 40%,#ee2c82 60%,#fb6962 80%,#fef84c 100%);
		--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,#ffceec 0%,#9896f0 100%);
		--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,#fecda5 0%,#fe2d2d 50%,#6b003e 100%);
		--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,#ffcb70 0%,#c751c0 50%,#4158d0 100%);
		--wp--preset--gradient--pale-ocean: linear-gradient(135deg,#fff5cb 0%,#b6e3d4 50%,#33a7b5 100%);
		--wp--preset--gradient--electric-grass: linear-gradient(135deg,#caf880 0%,#71ce7e 100%);
		--wp--preset--gradient--midnight: linear-gradient(135deg,#020381 0%,#2874fc 100%);
		--wp--preset--duotone--dark-grayscale: url("#wp-duotone-dark-grayscale");
		--wp--preset--duotone--grayscale: url("#wp-duotone-grayscale");
		--wp--preset--duotone--purple-yellow: url("#wp-duotone-purple-yellow");
		--wp--preset--duotone--blue-red: url("#wp-duotone-blue-red");
		--wp--preset--duotone--midnight: url("#wp-duotone-midnight");
		--wp--preset--duotone--magenta-yellow: url("#wp-duotone-magenta-yellow");
		--wp--preset--duotone--purple-green: url("#wp-duotone-purple-green");
		--wp--preset--duotone--blue-orange: url("#wp-duotone-blue-orange");
		--wp--preset--font-size--small: 18px;
		--wp--preset--font-size--medium: 20px;
		--wp--preset--font-size--large: 26.25px;
		--wp--preset--font-size--x-large: 42px;
		--wp--preset--font-size--normal: 21px;
		--wp--preset--font-size--larger: 32px;
	}

	body {
		background: #000000 !important;
	}

	.singular .entry-header {
		background-color: #000;
	}

	.menu-modal,
	.menu-modal-inner {
		background-color: rgba(51, 51, 51, 0.65);
		-webkit-backdrop-filter: blur(30px) saturate(125%);
		backdrop-filter: blur(30px) saturate(125%);
	}

	.search-modal-inner {
		background-color: rgba(51, 51, 51, 0.65);
		-webkit-backdrop-filter: blur(30px) saturate(125%);
		backdrop-filter: blur(30px) saturate(125%);
	}
	
	#site-header {
		background: #222222;
	}

	.footer-nav-widgets-wrapper,
	#site-footer {
		background: #222222;
	}

	.archive-header {
		background-color: #000;
		padding: 4rem 0;
	}

	body,
	.entry-title a,
	:root .has-primary-color {
		color: #ffffff;
	}

	.header-footer-group,
	body:not(.overlay-header) #site-header .toggle,
	.menu-modal .toggle {
		color: #ffffff;
	}

	.site-description,
	body:not(.overlay-header) .toggle-inner .toggle-text,
	.widget .post-date,
	.widget .rss-date,
	.widget_archive li,
	.widget_categories li,
	.widget cite,
	.widget_pages li,
	.widget_meta li,
	.widget_nav_menu li,
	.powered-by-wordpress,
	.to-the-top,
	.singular .entry-header .post-meta,
	.singular:not(.overlay-header) .entry-header .post-meta a {
		color: #ffffff;
	}

	.color-accent,
	.color-accent-hover:hover,
	.color-accent-hover:focus,
	:root .has-accent-color,
	.has-drop-cap:not(:focus):first-letter,
	.wp-block-button.is-style-outline,
	a {
		color: #ffa8bf;
	}

	cite,
	figcaption,
	.wp-caption-text,
	.post-meta,
	.entry-content .wp-block-archives li,
	.entry-content .wp-block-categories li,
	.entry-content .wp-block-latest-posts li, .wp-block-latest-comments__comment-date,
	.wp-block-latest-posts__post-date,
	.wp-block-embed figcaption,
	.wp-block-image figcaption,
	.wp-block-pullquote cite,
	.comment-metadata,
	.comment-respond .comment-notes,
	.comment-respond .logged-in-as,
	.pagination .dots,
	.entry-content hr:not(.has-background),
	hr.styled-separator,
	:root .has-secondary-color {
		color: #72acff;
	}
}

[sabernhardt]

Hi and welcome to WordPress Core Trac!

I like dark mode (I even created my own for Trac), but I think making Twenty Twenty support both light and dark palettes should be left to plugins and/or child themes.

Except for a recent bug within the editor (#59086), Twenty Twenty has had good support for setting a light text color against a dark background in the Customizer. Then every visitor would get the same color palette, and anyone creating content could check it with those colors.

Twenty Twenty-One ​added a checkbox for site owners to enable its dark mode. That theme required a commitment to making content fit the colors of both the light and dark schemes, and visitors can still override the sitewide choice if something does not work well in dark mode.

As far as proposed colors within the palette, full white (#fff) text can be easier for many people to read against near-black (such as #222) than against full black (#000). Also, using !important could cause problems.

[poena]

I agree that adding automatic dark-mode support to this theme would be best left to child themes or plugins.

[sabernhardt]

Closing as not planned