[wp-trac] [WordPress Trac] #58782: Twenty Twenty: Easily add prefers-color-scheme: dark support
WordPress Trac
noreply at wordpress.org
Tue Jul 11 13:20:16 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: General | Version:
Severity: normal | Keywords:
Focuses: |
-----------------------------+-----------------------------
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>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform
More information about the wp-trac
mailing list