Make WordPress Core

Opened 12 months ago

Closed 5 months ago

#58782 closed feature request (wontfix)

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

Reported by: adamzea's profile adamzea Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: close 2nd-opinion
Focuses: Cc:

Description (last modified by sabernhardt)

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;
	}
}

Change History (4)

#1 @sabernhardt
12 months ago

  • Component changed from General to Bundled Theme
  • Description modified (diff)

#2 @sabernhardt
10 months ago

  • Keywords close 2nd-opinion added

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.

#3 @poena
5 months ago

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

#4 @sabernhardt
5 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to wontfix
  • Status changed from new to closed

Closing as not planned

Note: See TracTickets for help on using tickets.