[wp-trac] [WordPress Trac] #58782: Twenty Twenty: Easily add prefers-color-scheme: dark support
WordPress Trac
noreply at wordpress.org
Wed Jul 12 00:09:05 UTC 2023
#58782: Twenty Twenty: Easily add prefers-color-scheme: dark support
-----------------------------+------------------------------
Reporter: adamzea | Owner: (none)
Type: feature request | Status: new
Priority: normal | Milestone: Awaiting Review
Component: Bundled Theme | Version:
Severity: normal | Resolution:
Keywords: | Focuses:
-----------------------------+------------------------------
Changes (by sabernhardt):
* component: General => Bundled Theme
Old description:
> 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;
> }
>
>
> }}}
New description:
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;
}
}
}}}
--
--
Ticket URL: <https://core.trac.wordpress.org/ticket/58782#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform
More information about the wp-trac
mailing list