CINXE.COM

<!doctype html> <html lang="en" id="top-of-site" class="js"> <head> <title>Dark Mode In CSS Guide | CSS-Tricks</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.webmanifest"> <meta name="theme-color" content="#ff7a18"> <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="CSS-Tricks Search"> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="https://css-tricks.com/feed/"> <link rel="preconnect" href="https://s3.buysellads.com"> <link rel="dns-prefetch" href="https://s3.buysellads.com"> <link rel="preconnect" href="https://srv.buysellads.com"> <link rel="dns-prefetch" href="https://srv.buysellads.com"> <link rel="preconnect" href="https://static.codepen.io"> <link rel="dns-prefetch" href="https://static.codepen.io"> <style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>  <meta name="description" content="“Dark mode” is defined as a color scheme that uses light-colored text and other UI elements on a dark-colored background. Dark mode, dark theme, black mode, night mode… they all refer to and mean the same thing: a mostly-dark interface rather than a mostly-light interface."/> <meta name="robots" content="follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large"/> <link rel="canonical" href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/" /> <meta property="og:locale" content="en_US" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Dark Mode In CSS Guide | CSS-Tricks" /> <meta property="og:description" content="“Dark mode” is defined as a color scheme that uses light-colored text and other UI elements on a dark-colored background. Dark mode, dark theme, black mode, night mode… they all refer to and mean the same thing: a mostly-dark interface rather than a mostly-light interface." /> <meta property="og:url" content="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/" /> <meta property="og:site_name" content="CSS-Tricks" /> <meta property="article:publisher" content="https://www.facebook.com/CSSTricks" /> <meta property="article:tag" content="dark mode" /> <meta property="article:section" content="Articles" /> <meta property="og:updated_time" content="2024-08-12T15:00:55-06:00" /> <meta property="og:image" content="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/dark-mode-guide.png" /> <meta property="og:image:secure_url" content="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/dark-mode-guide.png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="600" /> <meta property="og:image:alt" content="Dark Mode in CSS Guide" /> <meta property="og:image:type" content="image/png" /> <meta property="article:published_time" content="2020-07-01T07:47:02-06:00" /> <meta property="article:modified_time" content="2024-08-12T15:00:55-06:00" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Dark Mode In CSS Guide | CSS-Tricks" /> <meta name="twitter:description" content="“Dark mode” is defined as a color scheme that uses light-colored text and other UI elements on a dark-colored background. Dark mode, dark theme, black mode, night mode… they all refer to and mean the same thing: a mostly-dark interface rather than a mostly-light interface." /> <meta name="twitter:site" content="@CSS" /> <meta name="twitter:creator" content="@adhuhamism" /> <meta name="twitter:image" content="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/dark-mode-guide.png" /> <meta name="twitter:label1" content="Written by" /> <meta name="twitter:data1" content="Adhuham" /> <meta name="twitter:label2" content="Time to read" /> <meta name="twitter:data2" content="25 minutes" /> <script data-jetpack-boost="ignore" type="application/ld+json" class="rank-math-schema">{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://css-tricks.com/#organization","name":"CSS-Tricks","sameAs":["https://www.facebook.com/CSSTricks","https://twitter.com/CSS"],"logo":{"@type":"ImageObject","@id":"https://css-tricks.com/#logo","url":"https://css-tricks.com/wp-content/uploads/2019/06/akqRGyta_400x400.jpg","contentUrl":"https://css-tricks.com/wp-content/uploads/2019/06/akqRGyta_400x400.jpg","caption":"CSS-Tricks","inLanguage":"en-US"}},{"@type":"WebSite","@id":"https://css-tricks.com/#website","url":"https://css-tricks.com","name":"CSS-Tricks","publisher":{"@id":"https://css-tricks.com/#organization"},"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/dark-mode-guide.png?fit=1200%2C600&ssl=1","url":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/dark-mode-guide.png?fit=1200%2C600&ssl=1","width":"1200","height":"600","inLanguage":"en-US"},{"@type":"WebPage","@id":"https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#webpage","url":"https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/","name":"Dark Mode In CSS Guide | CSS-Tricks","datePublished":"2020-07-01T07:47:02-06:00","dateModified":"2024-08-12T15:00:55-06:00","isPartOf":{"@id":"https://css-tricks.com/#website"},"primaryImageOfPage":{"@id":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/dark-mode-guide.png?fit=1200%2C600&ssl=1"},"inLanguage":"en-US"},{"@type":"Person","@id":"https://css-tricks.com/author/mohamedadhuham/","name":"Adhuham","url":"https://css-tricks.com/author/mohamedadhuham/","image":{"@type":"ImageObject","@id":"https://secure.gravatar.com/avatar/a12b02b18fc6bb2bdb87d00d61d63b22?s=96&d=retro&r=pg","url":"https://secure.gravatar.com/avatar/a12b02b18fc6bb2bdb87d00d61d63b22?s=96&d=retro&r=pg","caption":"Adhuham","inLanguage":"en-US"},"sameAs":["https://adhuham.com","https://twitter.com/adhuhamism"],"worksFor":{"@id":"https://css-tricks.com/#organization"}},{"@type":"BlogPosting","headline":"Dark Mode In CSS Guide | CSS-Tricks","datePublished":"2020-07-01T07:47:02-06:00","dateModified":"2024-08-12T15:00:55-06:00","author":{"@id":"https://css-tricks.com/author/mohamedadhuham/","name":"Adhuham"},"publisher":{"@id":"https://css-tricks.com/#organization"},"description":"\u201cDark mode\u201d is defined as a color scheme that uses light-colored text and other UI elements on a dark-colored background. Dark mode, dark theme, black mode, night mode\u2026 they all refer to and mean the same thing: a mostly-dark interface rather than a mostly-light interface.","name":"Dark Mode In CSS Guide | CSS-Tricks","@id":"https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#richSnippet","isPartOf":{"@id":"https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#webpage"},"image":{"@id":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/dark-mode-guide.png?fit=1200%2C600&ssl=1"},"inLanguage":"en-US","mainEntityOfPage":{"@id":"https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#webpage"}}]}</script>  <link rel='dns-prefetch' href='//stats.wp.com' /> <link rel='dns-prefetch' href='//i0.wp.com' /> <link rel='dns-prefetch' href='//c0.wp.com' /> <link rel='dns-prefetch' href='//widgets.wp.com' /> <link rel="alternate" type="application/rss+xml" title="CSS-Tricks » Dark Mode in CSS Guide Comments Feed" href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/feed/" /> <link rel='stylesheet' id='css-tricks-style-css' href='https://css-tricks.com/wp-content/themes/CSS-Tricks-19/style.css?ver=cache_bust=1732117801409' type='text/css' media='all' /> <style id='acf-post-slider-style-inline-css' type='text/css'> .post-slider { box-sizing: content-box; display: flex; margin: 0 0 var(--gap) 0; padding: 0 1rem 1rem; position: relative; @media (min-width: 1200px) { &::after { content: ""; position: absolute; right: 0; top: 0; bottom: 3.6rem; width: 5px; height: 100%; border-radius: 5px; box-shadow: -10px 0 20px 3px #000; background: linear-gradient( 130deg, #ff7a18 0%, #af002d 41.07%, #319197 76.05% ); } body.home & { background: none; } } @media (max-width: 1200px) { scrollbar-color: #666 #201c29; &::-webkit-scrollbar { width: 10px; height: 10px; } &::-webkit-scrollbar-thumb { background: #434343; border-radius: 10px; box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.25), inset -2px -2px 2px rgba(0, 0, 0, 0.25); } &::-webkit-scrollbar-track { background: linear-gradient( to right, #434343, #434343 1px, #262626 1px, #262626 ); } padding-bottom: var(--gap); padding-left: 5px; overflow-x: scroll; -webkit-overflow-scrolling: touch; scroll-snap-points-x: repeat(250px); scroll-snap-type: x mandatory; -webkit-scroll-snap-type: x mandatory; .mini-card { scroll-snap-align: start; } } } .post-slider-header { color: #fff; margin-top: 2rem; flex: 0 0 250px; margin-right: 1rem; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; @media (max-width: 1200px) { scroll-snap-align: start; scroll-margin-inline-start: 5px; } p { font-size: var(--font-size-body); margin: 0; } a { text-decoration: none; } &::before { --offset: 5px; content: ""; background: linear-gradient( 130deg, #ff7a18 0%, #af002d 41.07%, #319197 76.05% ); position: absolute; top: calc(var(--offset) * -1); left: calc(var(--offset) * -1); width: calc(100% + 10px); height: calc(100% + 10px); z-index: 1; border-radius: 12px; } &::after { content: ""; position: absolute; top: 0; left: 0; width: calc(100%); height: calc(100%); background: #000; z-index: 2; border-radius: 8px; } transform: translateY(-10px); > * { color: inherit; position: relative; z-index: 3; } @media (max-width: 800px) { flex: 0 0 175px; } } .mini-card-grid { display: flex; gap: 1rem; margin: 0 0 1.5rem 0; position: relative; scrollbar-gutter: always; padding: 3rem 0 3rem 2rem; margin: 0; overflow-x: scroll; -webkit-overflow-scrolling: touch; scrollbar-color: #666666 #201c29; &::-webkit-scrollbar { width: 10px; height: 10px; } &::-webkit-scrollbar-thumb { background: #434343; border-radius: 10px; box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.25), inset -2px -2px 2px rgba(0, 0, 0, 0.25); } &::-webkit-scrollbar-track { background: linear-gradient( to right, #434343, #434343 1px, #262626 1px, #262626 ); } @media (max-width: 1200px) { overflow-x: visible; } } .mini-card { padding: 1.5rem; border-radius: 16px; background: linear-gradient(85deg, #434343, #262626); color: #fff; display: flex; flex-direction: column; transition: 0.2s; margin: 0; min-width: 300px; min-height: 350px; box-shadow: -2rem 0 3rem -2rem black; a { text-decoration: none; } h3 a { color: white !important; } h3 .aal_anchor { display: none; } .tags { margin: 0 0 0.5rem 0; } .author-name { color: #fff; } time { display: block; margin: 0 0 0.25rem 0; color: #777; strong { color: #d4d4d4; } } &:hover, &:focus-within { transform: translate(0, -1rem) rotate(3deg); & ~ .mini-card { transform: translateX(130px); } } &:first-child { &:hover, &:focus-within { /* Cover clickable area on the left edge of first card */ transform: translate(-0.5rem, -1rem) rotate(3deg); } } &:not(:first-child) { margin-left: -130px; box-shadow: -3rem 0 3rem -2rem black; } @media (max-width: 1200px) { min-width: 220px; &:not(:first-child) { margin-left: -30px; } &:hover { transform: translate(0, -1rem); & ~ .mini-card { transform: translateX(30px); } } } @media (max-width: 800px) { min-width: 190px; &:not(:first-child) { margin-left: -10px; } &:hover { transform: translate(0, -1rem); & ~ .mini-card { transform: translateX(10px); } } } } .mini-card-title { font-size: 1.3rem; margin: 0 0 1rem 0; } </style> <style id='css-tricks-baseline-status-style-inline-css' type='text/css'> /*!***************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/style.scss ***! \***************************************************************************************************************************************************************************************************************************************/ /** * The following styles get applied both on the front of your site * and in the editor. * * Replace them with your own styles or remove the file completely. */ baseline-status { --color-text: #fff; --color-outline: var(--orange); background: #000; border: solid 5px var(--color-outline); border-radius: 8px; color: var(--color-text); display: block; margin-block-end: var(--gap); padding: calc(var(--gap) / 4); } @media (prefers-color-scheme: dark) { baseline-status { --color-text: #fff; --color-link: var(--orange); } } baseline-status::slotted(h1) { display: none; } /*# sourceMappingURL=style-index.css.map*/ </style> <style id='css-tricks-feedbin-starred-feed-style-inline-css' type='text/css'> /*!***************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/style.scss ***! \***************************************************************************************************************************************************************************************************************************************/ /** * The following styles get applied both on the front of your site * and in the editor. */ .wp-block-css-tricks-feedbin-starred-feed { container: feedbin/inline-size; display: grid; gap: 0; } .wp-block-css-tricks-feedbin-starred-feed .article-grid { gap: 0; grid-template-columns: 1fr; } .wp-block-css-tricks-feedbin-starred-feed .starred-item { margin-block-end: 1rem; } .wp-block-css-tricks-feedbin-starred-feed .starred-item :is(h3, #specificity) { font-family: "Blanco", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", system-serif; font-size: 1.35rem; line-height: 1.35; margin-block: calc(var(--gap) / 4); margin-top: 0; padding-block-end: calc(var(--gap) / 4); } .wp-block-css-tricks-feedbin-starred-feed .starred-item :is(h3, #specificity) a { color: var(--blue) !important; } .wp-block-css-tricks-feedbin-starred-feed .starred-item :is(h3, #specificity) a:is(:hover, :focus, #specificity) { -webkit-text-decoration: 1px solid var(--blue); text-decoration: 1px solid var(--blue); } .wp-block-css-tricks-feedbin-starred-feed .starred-item cite { flex: 0 1 300px; font-style: oblique; line-clamp: 1; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; } .wp-block-css-tricks-feedbin-starred-feed .starred-item span { line-clamp: 1; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; } .starred-item { border-radius: 12px; display: grid; gap: 1rem; grid-template-columns: 1fr; } @container feedbin (width >= 600px) { .starred-item { grid-template-columns: 40% 60%; } } .starred-item .article-article { background-color: #262626; background-position: top 0 center; background-repeat: no-repeat; background-image: radial-gradient(50% 50% at top center, rgba(0, 0, 0, 0.66), #262626), linear-gradient(180deg, #000, #262626); background-size: 120% 2000px, 100% 2000px; border-radius: 12px 0 0 12px; color: #fff; gap: 1rem; padding: 1.5rem; } .starred-item .article-article h2 a { color: #fff; } .starred-item .article-article span:has(strong) { font-size: 1rem; } .starred-item .article-summary { padding: var(--gap); } .starred-item .article-summary :is(h2, h3, h4) { color: #262626; } .starred-item .article-summary p { margin-block-end: calc(var(--gap) / 4); } .starred-item .article-summary hr, .starred-item .article-summary figure { display: none; } @container article-grid (width <= 600px) { .starred-item .article-summary { display: none; } } @keyframes shadow-reveal { 0% { opacity: 0; } 100% { opacity: 1; } } /*# sourceMappingURL=style-index.css.map*/ </style> <link rel='stylesheet' id='mediaelement-css' href='https://c0.wp.com/c/6.7.1/wp-includes/js/mediaelement/mediaelementplayer-legacy.min.css' type='text/css' media='all' /> <link rel='stylesheet' id='wp-mediaelement-css' href='https://c0.wp.com/c/6.7.1/wp-includes/js/mediaelement/wp-mediaelement.min.css' type='text/css' media='all' /> <style id='jetpack-sharing-buttons-style-inline-css' type='text/css'> .jetpack-sharing-buttons__services-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:0;list-style-type:none;margin:5px;padding:0}.jetpack-sharing-buttons__services-list.has-small-icon-size{font-size:12px}.jetpack-sharing-buttons__services-list.has-normal-icon-size{font-size:16px}.jetpack-sharing-buttons__services-list.has-large-icon-size{font-size:24px}.jetpack-sharing-buttons__services-list.has-huge-icon-size{font-size:36px}@media print{.jetpack-sharing-buttons__services-list{display:none!important}}.editor-styles-wrapper .wp-block-jetpack-sharing-buttons{gap:0;padding-inline-start:0}ul.jetpack-sharing-buttons__services-list.has-background{padding:1.25em 2.375em} </style> <style id='rank-math-toc-block-style-inline-css' type='text/css'> .wp-block-rank-math-toc-block nav ol{counter-reset:item}.wp-block-rank-math-toc-block nav ol li{display:block}.wp-block-rank-math-toc-block nav ol li:before{content:counters(item, ".") ". ";counter-increment:item} </style> <style id='rank-math-rich-snippet-style-inline-css' type='text/css'> /*! * Plugin: Rank Math * URL: https://rankmath.com/wordpress/plugin/seo-suite/ * Name: rank-math-review-snippet.css */@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(-360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(-360deg)}}@keyframes bounce{from{-webkit-transform:translateY(0px);transform:translateY(0px)}to{-webkit-transform:translateY(-5px);transform:translateY(-5px)}}@-webkit-keyframes bounce{from{-webkit-transform:translateY(0px);transform:translateY(0px)}to{-webkit-transform:translateY(-5px);transform:translateY(-5px)}}@-webkit-keyframes loading{0%{background-size:20% 50% ,20% 50% ,20% 50%}20%{background-size:20% 20% ,20% 50% ,20% 50%}40%{background-size:20% 100%,20% 20% ,20% 50%}60%{background-size:20% 50% ,20% 100%,20% 20%}80%{background-size:20% 50% ,20% 50% ,20% 100%}100%{background-size:20% 50% ,20% 50% ,20% 50%}}@keyframes loading{0%{background-size:20% 50% ,20% 50% ,20% 50%}20%{background-size:20% 20% ,20% 50% ,20% 50%}40%{background-size:20% 100%,20% 20% ,20% 50%}60%{background-size:20% 50% ,20% 100%,20% 20%}80%{background-size:20% 50% ,20% 50% ,20% 100%}100%{background-size:20% 50% ,20% 50% ,20% 50%}}:root{--rankmath-wp-adminbar-height: 0}#rank-math-rich-snippet-wrapper{overflow:hidden}#rank-math-rich-snippet-wrapper h5.rank-math-title{display:block;font-size:18px;line-height:1.4}#rank-math-rich-snippet-wrapper .rank-math-review-image{float:right;max-width:40%;margin-left:15px}#rank-math-rich-snippet-wrapper .rank-math-review-data{margin-bottom:15px}#rank-math-rich-snippet-wrapper .rank-math-total-wrapper{width:100%;padding:0 0 20px 0;float:left;clear:both;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}#rank-math-rich-snippet-wrapper .rank-math-total-wrapper .rank-math-total{border:0;display:block;margin:0;width:auto;float:left;text-align:left;padding:0;font-size:24px;line-height:1;font-weight:700;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}#rank-math-rich-snippet-wrapper .rank-math-total-wrapper .rank-math-review-star{float:left;margin-left:15px;margin-top:5px;position:relative;z-index:99;line-height:1}#rank-math-rich-snippet-wrapper .rank-math-total-wrapper .rank-math-review-star .rank-math-review-result-wrapper{display:inline-block;white-space:nowrap;position:relative;color:#e7e7e7}#rank-math-rich-snippet-wrapper .rank-math-total-wrapper .rank-math-review-star .rank-math-review-result-wrapper .rank-math-review-result{position:absolute;top:0;left:0;overflow:hidden;white-space:nowrap;color:#ffbe01}#rank-math-rich-snippet-wrapper .rank-math-total-wrapper .rank-math-review-star .rank-math-review-result-wrapper i{font-size:18px;-webkit-text-stroke-width:1px;font-style:normal;padding:0 2px;line-height:inherit}#rank-math-rich-snippet-wrapper .rank-math-total-wrapper .rank-math-review-star .rank-math-review-result-wrapper i:before{content:"\2605"}body.rtl #rank-math-rich-snippet-wrapper .rank-math-review-image{float:left;margin-left:0;margin-right:15px}body.rtl #rank-math-rich-snippet-wrapper .rank-math-total-wrapper .rank-math-total{float:right}body.rtl #rank-math-rich-snippet-wrapper .rank-math-total-wrapper .rank-math-review-star{float:right;margin-left:0;margin-right:15px}body.rtl #rank-math-rich-snippet-wrapper .rank-math-total-wrapper .rank-math-review-star .rank-math-review-result{left:auto;right:0}@media screen and (max-width: 480px){#rank-math-rich-snippet-wrapper .rank-math-review-image{display:block;max-width:100%;width:100%;text-align:center;margin-right:0}#rank-math-rich-snippet-wrapper .rank-math-review-data{clear:both}}.clear{clear:both} </style> <style id='classic-theme-styles-inline-css' type='text/css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css' type='text/css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--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--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 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%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <link rel="https://api.w.org/" href="https://css-tricks.com/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://css-tricks.com/wp-json/wp/v2/posts/312285" /><link rel='shortlink' href='https://css-tricks.com/?p=312285' /> <link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://css-tricks.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fcss-tricks.com%2Fa-complete-guide-to-dark-mode-on-the-web%2F" /> <link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://css-tricks.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fcss-tricks.com%2Fa-complete-guide-to-dark-mode-on-the-web%2F&format=xml" />  <style> details h4 { display: inline; } .test-comparison-slider { max-width: 100%; overflow: hidden; margin: 0 auto 1.5rem; background: #FDF6ED; border-radius: 8px; } .test-comparison-slider div.jx-image img { height: 100% !important; border-radius: 4px; } .test-comparison-slider .juxtapose { border: 1px solid #E2E8ED; max-width: 100%; } .wp-block-jetpack-slideshow { max-width: 600px; } .wp-block-jetpack-slideshow li::before { content: "" !important; } .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_caption.gallery-caption { width: 100%; } .wp-block-column { background: #fff0d4; padding: 1.2rem; border-radius: 8px; margin: 0 0 1rem 0; } .dark-mode-toggling-themes details summary h4 { font-size: 1rem; } .dark-mode-color-swatch .wp-block-columns { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 2rem; } .dark-mode-color-swatch .wp-block-column { background: transparent; border: 1px solid #ccc; margin: 0; } .dark-mode-color-swatch p { color: #eaeaea; margin-bottom: 0; padding: 25% 0; text-align: center; width: 100%; } </style> <style>img#wpstats{display:none}</style> <style type="text/css" media="all"> .ticss-ca61bce3 {}.ticss-ca61bce3 {}.ticss-ca61bce3 {} </style> <link rel="icon" href="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=32%2C32&ssl=1" sizes="32x32" /> <link rel="icon" href="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=180%2C180&ssl=1" sizes="192x192" /> <link rel="apple-touch-icon" href="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=180%2C180&ssl=1" /> <meta name="msapplication-TileImage" content="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=180%2C180&ssl=1" /> </head> <body class="post-template-default single single-post postid-312285 single-format-standard category-articles"> <div id="top-of-site-pixel-anchor"></div> <header class="site-header" id="site-header"> <a id="skip-nav" class="skip-nav screen-reader-text" href="#maincontent">Skip to main content</a> <div class="logo"> <a href="/"> <div class="screen-reader-text">CSS-Tricks</div> <svg class="icon-logo-star" width="35px" height="35px" viewBox="0 0 362.62 388.52" data-spin-me="false"> <path d="M156.58,239l-88.3,64.75c-10.59,7.06-18.84,11.77-29.43,11.77-21.19,0-38.85-18.84-38.85-40C0,257.83,14.13,244.88,27.08,239l103.6-44.74L27.08,148.34C13,142.46,0,129.51,0,111.85,0,90.66,18.84,73,40,73c10.6,0,17.66,3.53,28.25,11.77l88.3,64.75L144.81,44.74C141.28,20,157.76,0,181.31,0s40,18.84,36.5,43.56L206,149.52l88.3-64.75C304.93,76.53,313.17,73,323.77,73a39.2,39.2,0,0,1,38.85,38.85c0,18.84-12.95,30.61-27.08,36.5L231.93,194.26,335.54,239c14.13,5.88,27.08,18.83,27.08,37.67,0,21.19-18.84,38.85-40,38.85-9.42,0-17.66-4.71-28.26-11.77L206,239l11.77,104.78c3.53,24.72-12.95,44.74-36.5,44.74s-40-18.84-36.5-43.56Z" /> </svg> <svg width="322" height="32" viewBox="0 0 322 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-logo-text"> <path d="M16.4923 21.5221C16.0962 21.5202 15.7132 21.6668 15.4167 21.9339C13.9468 23.1946 12.5055 23.8978 10.3687 23.8978C6.5073 23.8978 3.70719 20.644 3.70719 16.6104V16.5521C3.70719 12.5441 6.53598 9.31211 10.3687 9.31211C12.142 9.31448 13.8542 9.97091 15.1873 11.1595C15.4503 11.3483 15.7586 11.4616 16.0796 11.4875C16.4007 11.5134 16.7227 11.4509 17.0117 11.3067C17.3008 11.1624 17.5463 10.9416 17.7224 10.6676C17.8985 10.3935 17.9987 10.0764 18.0125 9.74936C18.0137 9.47206 17.952 9.19822 17.8319 8.9492C17.7119 8.70017 17.5369 8.4827 17.3205 8.31374C15.5637 6.93643 13.513 6 10.3973 6C4.30235 6 0 10.7769 0 16.6104V16.6687C0 22.5642 4.38481 27.2354 10.2683 27.2354C13.5273 27.2354 15.6928 26.1824 17.5966 24.4808C17.7764 24.3189 17.9207 24.1204 18.0201 23.8982C18.1196 23.676 18.1719 23.435 18.1738 23.1909C18.1617 22.7453 17.9795 22.3219 17.6656 22.0104C17.3518 21.699 16.931 21.5238 16.4923 21.5221V21.5221ZM29.7041 14.9853C25.8069 14.0453 24.8855 13.342 24.8855 11.7607V11.7024C24.8855 10.3506 26.0973 9.26839 28.1732 9.26839C29.7615 9.26839 31.2601 9.79308 32.8341 10.8206C33.1116 10.996 33.4322 11.0882 33.7591 11.0866C33.977 11.089 34.1933 11.0476 34.3954 10.9647C34.5976 10.8818 34.7816 10.7591 34.9369 10.6037C35.0921 10.4482 35.2156 10.2631 35.3002 10.0589C35.3848 9.85479 35.4289 9.63565 35.4298 9.41414C35.4373 9.12618 35.3692 8.84139 35.2324 8.58907C35.0957 8.33675 34.8953 8.12601 34.6518 7.97852C32.7598 6.69182 30.5246 6.02662 28.2485 6.07287C24.2401 6.07287 21.3576 8.50321 21.3576 12.023V12.0813C21.3576 15.8635 23.7776 17.1533 28.0764 18.21C31.8266 19.0881 32.6333 19.8788 32.6333 21.3472V21.4055C32.6333 22.9286 31.2494 23.9853 29.048 23.9853C26.977 23.9843 24.9735 23.2368 23.394 21.8756C23.1425 21.6924 22.8468 21.5819 22.5385 21.5558C22.2301 21.5296 21.9206 21.5888 21.6426 21.7271C21.3647 21.8653 21.1288 22.0774 20.9599 22.3409C20.7911 22.6044 20.6956 22.9095 20.6835 23.2237C20.6822 23.4928 20.7443 23.7583 20.8647 23.9979C20.9851 24.2375 21.1602 24.4444 21.3755 24.601C23.5587 26.2783 26.2216 27.1842 28.9584 27.1808C33.1998 27.1808 36.172 24.8925 36.172 21.0521V20.9938C36.1827 17.5942 33.9706 16.0384 29.7041 14.9853ZM47.5839 14.9853C43.6903 14.0453 42.7689 13.342 42.7689 11.7607V11.7024C42.7689 10.3506 43.9807 9.26839 46.0566 9.26839C47.6413 9.26839 49.1435 9.79308 50.7175 10.8206C50.995 10.996 51.3157 11.0882 51.6425 11.0866C51.8604 11.089 52.0767 11.0476 52.2788 10.9647C52.481 10.8818 52.665 10.7591 52.8203 10.6037C52.9756 10.4482 53.0991 10.2631 53.1837 10.0589C53.2683 9.85479 53.3123 9.63565 53.3132 9.41414C53.3207 9.12618 53.2526 8.84139 53.1158 8.58907C52.9791 8.33675 52.7787 8.12601 52.5352 7.97852C50.6382 6.68823 48.3962 6.02286 46.114 6.07287C42.1056 6.07287 39.2195 8.50321 39.2195 12.023V12.0813C39.2195 15.8635 41.6431 17.1533 45.9419 18.21C49.6921 19.0881 50.4988 19.8788 50.4988 21.3472V21.4055C50.4988 22.9286 49.1149 23.9853 46.9135 23.9853C44.8438 23.9835 42.8417 23.236 41.2631 21.8756C41.0112 21.6927 40.7154 21.5825 40.4069 21.5565C40.0985 21.5304 39.7888 21.5896 39.5108 21.7277C39.2327 21.8659 38.9965 22.0778 38.8272 22.3412C38.6579 22.6045 38.5618 22.9094 38.549 23.2237C38.5485 23.4926 38.611 23.7578 38.7314 23.9973C38.8517 24.2368 39.0264 24.4437 39.241 24.601C41.4259 26.2776 44.0897 27.1834 46.8274 27.1808C51.0688 27.1808 54.0375 24.8925 54.0375 21.0521V20.9938C54.0446 17.5942 51.854 16.0384 47.5839 14.9853ZM63.94 16.1586H58.5155C58.0741 16.1791 57.6574 16.3718 57.3522 16.6965C57.0469 17.0212 56.8766 17.453 56.8766 17.9021C56.8766 18.3512 57.0469 18.783 57.3522 19.1077C57.6574 19.4325 58.0741 19.6251 58.5155 19.6456H63.94C64.3815 19.6251 64.7981 19.4325 65.1034 19.1077C65.4086 18.783 65.5789 18.3512 65.5789 17.9021C65.5789 17.453 65.4086 17.0212 65.1034 16.6965C64.7981 16.3718 64.3815 16.1791 63.94 16.1586V16.1586ZM80.2818 6.36437H66.88C66.6576 6.35381 66.4355 6.3892 66.227 6.4684C66.0185 6.54759 65.828 6.66895 65.667 6.82512C65.506 6.98129 65.3778 7.16903 65.2902 7.37699C65.2027 7.58495 65.1575 7.8088 65.1575 8.035C65.1575 8.2612 65.2027 8.48505 65.2902 8.69301C65.3778 8.90097 65.506 9.08871 65.667 9.24488C65.828 9.40105 66.0185 9.52241 66.227 9.6016C66.4355 9.6808 66.6576 9.71619 66.88 9.70563H71.7811V25.246C71.7811 25.7292 71.9699 26.1925 72.3061 26.5342C72.6423 26.8759 73.0983 27.0678 73.5737 27.0678C74.0491 27.0678 74.5051 26.8759 74.8413 26.5342C75.1775 26.1925 75.3663 25.7292 75.3663 25.246V9.70563H80.2818C80.7045 9.68556 81.1033 9.50079 81.3955 9.18968C81.6876 8.87858 81.8506 8.46505 81.8506 8.035C81.8506 7.60495 81.6876 7.19142 81.3955 6.88032C81.1033 6.56921 80.7045 6.38444 80.2818 6.36437V6.36437ZM94.2106 6.36437H87.0113C86.7749 6.36043 86.54 6.40486 86.3208 6.49502C86.1015 6.58518 85.9024 6.71923 85.7351 6.8892C85.5679 7.05916 85.436 7.26157 85.3473 7.48439C85.2586 7.70721 85.2148 7.94588 85.2187 8.18621V25.2496C85.2796 25.6839 85.4926 26.0812 85.8186 26.3687C86.1447 26.6562 86.5618 26.8145 86.9934 26.8145C87.4251 26.8145 87.8422 26.6562 88.1682 26.3687C88.4942 26.0812 88.7073 25.6839 88.7681 25.2496V19.7331H93.239L98.1401 26.0949C98.3271 26.3875 98.584 26.6271 98.8869 26.7915C99.1897 26.9559 99.5285 27.0397 99.8718 27.035C100.092 27.0389 100.31 26.9987 100.515 26.9167C100.719 26.8348 100.906 26.7126 101.064 26.5573C101.222 26.402 101.349 26.2166 101.436 26.0116C101.524 25.8066 101.571 25.586 101.575 25.3626C101.555 24.847 101.35 24.3568 100.998 23.9853L97.1326 19.0298C99.8431 18.1809 101.718 16.1878 101.718 12.9011V12.8428C101.739 12.0293 101.602 11.2196 101.314 10.46C101.027 9.70038 100.595 9.00573 100.044 8.41577C98.7496 7.1259 96.7741 6.36437 94.2214 6.36437H94.2106ZM98.115 13.1052C98.115 15.1857 96.5016 16.5339 93.9632 16.5339H88.7717V9.64733H93.9345C96.559 9.64733 98.115 10.8498 98.115 13.0505V13.1052ZM107.777 6.21862C107.543 6.21326 107.31 6.25564 107.093 6.34324C106.875 6.43083 106.677 6.56188 106.509 6.72865C106.342 6.89541 106.21 7.09451 106.12 7.31419C106.03 7.53386 105.984 7.76967 105.985 8.00767V25.246C106.005 25.7098 106.201 26.1478 106.531 26.4686C106.861 26.7895 107.301 26.9685 107.758 26.9685C108.214 26.9685 108.654 26.7895 108.984 26.4686C109.314 26.1478 109.51 25.7098 109.531 25.246V8.00403C109.532 7.76947 109.488 7.53695 109.4 7.31992C109.313 7.10289 109.183 6.90565 109.02 6.73962C108.857 6.57359 108.664 6.44206 108.45 6.35263C108.237 6.2632 108.008 6.21765 107.777 6.21862V6.21862ZM130.246 21.5221C129.85 21.5191 129.467 21.6659 129.171 21.9339C127.697 23.1946 126.256 23.8978 124.123 23.8978C120.258 23.8978 117.458 20.644 117.458 16.6104V16.5521C117.458 12.5441 120.286 9.31211 124.123 9.31211C125.895 9.3147 127.606 9.97116 128.938 11.1595C129.246 11.3991 129.625 11.5274 130.013 11.5238C130.243 11.5287 130.472 11.4867 130.686 11.4004C130.9 11.314 131.094 11.185 131.259 11.021C131.423 10.857 131.553 10.6613 131.641 10.4454C131.73 10.2295 131.775 9.9978 131.774 9.76393C131.773 9.48692 131.711 9.21364 131.591 8.96487C131.471 8.71611 131.297 8.4984 131.082 8.32832C129.321 6.951 127.274 6.01458 124.159 6.01458C118.042 6.01458 113.761 10.7915 113.761 16.625V16.6833C113.761 22.5788 118.142 27.25 124.029 27.25C127.288 27.25 129.45 26.197 131.354 24.4954C131.534 24.3335 131.678 24.135 131.778 23.9128C131.877 23.6906 131.93 23.4496 131.931 23.2055C131.923 22.7567 131.742 22.3291 131.427 22.0144C131.112 21.6997 130.688 21.523 130.246 21.5221ZM144.946 15.3934L151.235 9.23924C151.431 9.07489 151.59 8.86863 151.7 8.63504C151.809 8.40145 151.867 8.14624 151.869 7.88743C151.872 7.66729 151.831 7.44889 151.749 7.24507C151.667 7.04126 151.546 6.85615 151.392 6.70065C151.239 6.54515 151.057 6.42239 150.856 6.33961C150.655 6.25683 150.44 6.21569 150.224 6.21862C149.944 6.21503 149.668 6.27539 149.414 6.39524C149.161 6.51509 148.938 6.69134 148.761 6.91092L139.188 16.6833V8.00403C139.168 7.54018 138.972 7.10224 138.642 6.78138C138.311 6.46052 137.872 6.28145 137.415 6.28145C136.958 6.28145 136.519 6.46052 136.189 6.78138C135.858 7.10224 135.663 7.54018 135.642 8.00403V25.2423C135.663 25.7062 135.858 26.1441 136.189 26.465C136.519 26.7858 136.958 26.9649 137.415 26.9649C137.872 26.9649 138.311 26.7858 138.642 26.465C138.972 26.1441 139.168 25.7062 139.188 25.2423V20.9938L142.476 17.7691L148.965 26.186C149.125 26.4441 149.347 26.6571 149.61 26.8054C149.872 26.9538 150.167 27.0327 150.467 27.035C150.7 27.0439 150.932 27.0048 151.149 26.9203C151.367 26.8358 151.565 26.7075 151.733 26.5431C151.9 26.3788 152.033 26.1817 152.124 25.9638C152.214 25.7459 152.261 25.5117 152.26 25.2751C152.257 24.7993 152.084 24.3408 151.772 23.9853L144.946 15.3934ZM163.518 14.9853C159.624 14.0453 158.703 13.342 158.703 11.7607V11.7024C158.703 10.3506 159.915 9.26839 161.99 9.26839C163.579 9.26839 165.077 9.79308 166.651 10.8206C166.929 10.996 167.25 11.0882 167.576 11.0866C167.794 11.089 168.011 11.0476 168.213 10.9647C168.415 10.8818 168.599 10.7591 168.754 10.6037C168.909 10.4482 169.033 10.2631 169.118 10.0589C169.202 9.85479 169.246 9.63565 169.247 9.41414C169.256 9.12724 169.189 8.84317 169.054 8.59095C168.92 8.33873 168.721 8.12739 168.48 7.97852C166.588 6.69182 164.353 6.02662 162.077 6.07287C158.068 6.07287 155.182 8.50321 155.182 12.023V12.0813C155.182 15.8635 157.606 17.1533 161.904 18.21C165.655 19.0881 166.461 19.8788 166.461 21.3472V21.4055C166.461 22.9286 165.077 23.9853 162.876 23.9853C160.806 23.9835 158.804 23.236 157.226 21.8756C156.974 21.6927 156.678 21.5825 156.369 21.5565C156.061 21.5304 155.751 21.5896 155.473 21.7277C155.195 21.8659 154.959 22.0778 154.79 22.3412C154.62 22.6045 154.524 22.9094 154.512 23.2237C154.511 23.4931 154.574 23.7586 154.695 23.9982C154.816 24.2379 154.991 24.4446 155.207 24.601C157.39 26.2783 160.053 27.1842 162.79 27.1808C167.031 27.1808 170 24.8925 170 21.0521V20.9938C169.989 17.5942 167.799 16.0384 163.529 14.9853H163.518Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M211.018 29V23.9655C216.367 23.9655 220.48 18.6838 218.439 13.0624C217.697 10.993 216.027 9.32513 213.955 8.58385C208.328 6.54532 203.04 10.6841 203.04 15.9967V15.9967H198C198 7.50281 206.225 0.862157 215.13 3.64197C219.026 4.84655 222.118 7.96611 223.355 11.8578C226.138 20.7841 219.521 29 211.018 29V29Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M211.017 23.9966H206.008V18.9929V18.9929H211.017V18.9929V23.9966Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M206.007 27.8589H202.142V27.8589V23.998H206.007V27.8589V27.8589Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M202.145 23.9984H198.898V23.9984V20.7861V20.7861H202.114V20.7861V23.9984H202.145Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M239.312 14.8042C238.176 14.0276 236.755 13.6275 235.098 13.6275H231.5V25.0183H235.098C236.755 25.0183 238.176 24.5946 239.312 23.7709C239.927 23.3238 240.425 22.7119 240.756 21.9352C241.087 21.1586 241.277 20.2643 241.277 19.2523C241.277 18.2403 241.111 17.346 240.756 16.5929C240.425 15.8162 239.951 15.2043 239.312 14.8042V14.8042ZM233.609 15.535H234.745C236 15.535 237.041 15.7704 237.823 16.2646C238.699 16.7824 239.148 17.7943 239.148 19.23C239.148 20.7126 238.699 21.7482 237.823 22.313V22.313C237.065 22.8072 236.047 23.0661 234.769 23.0661H233.633V15.535H233.609Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M243.809 13.463C243.454 13.463 243.17 13.5807 242.933 13.816C242.697 14.0514 242.555 14.3338 242.555 14.6868C242.555 15.0398 242.673 15.3222 242.91 15.5811C243.147 15.8165 243.454 15.9341 243.809 15.9341C244.164 15.9341 244.448 15.8165 244.709 15.5811C244.946 15.3458 245.064 15.0398 245.064 14.6868C245.064 14.3338 244.946 14.0514 244.709 13.816C244.448 13.6042 244.141 13.463 243.809 13.463V13.463Z" fill="white"/> <rect x="242.768" y="16.9687" width="2.03584" height="8.02531" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M252.164 17.6515C251.548 17.1102 250.862 16.8043 250.128 16.8043C249.015 16.8043 248.068 17.1808 247.358 17.9575C246.624 18.7106 246.269 19.6755 246.269 20.8287C246.269 21.9583 246.624 22.9233 247.334 23.6999C248.044 24.453 248.991 24.8296 250.104 24.8296C250.885 24.8296 251.548 24.6178 252.116 24.1941V24.3824C252.116 25.0414 251.927 25.5591 251.595 25.9122C251.24 26.2652 250.743 26.4535 250.151 26.4535C249.204 26.4535 248.636 26.0769 247.902 25.1355L246.529 26.4535L246.577 26.5005C246.885 26.9241 247.334 27.3242 247.926 27.7008C248.518 28.0773 249.299 28.2892 250.175 28.2892C251.382 28.2892 252.353 27.9126 253.063 27.183C253.773 26.4535 254.152 25.465 254.152 24.2647V16.969H252.164V17.6515V17.6515ZM251.619 22.3826C251.264 22.7827 250.814 22.9709 250.223 22.9709C249.631 22.9709 249.181 22.7827 248.85 22.3826C248.495 21.9825 248.329 21.4647 248.329 20.8057C248.329 20.1468 248.495 19.629 248.85 19.2289C249.205 18.8288 249.655 18.6406 250.223 18.6406C250.814 18.6406 251.264 18.8288 251.619 19.2289C251.974 19.629 252.14 20.1703 252.14 20.8057C252.164 21.4647 251.974 21.9825 251.619 22.3826V22.3826Z" fill="white"/> <rect x="255.883" y="16.9687" width="2.03584" height="8.02531" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M256.924 13.463C256.569 13.463 256.285 13.5807 256.048 13.816C255.811 14.0514 255.669 14.3338 255.669 14.6868C255.669 15.0398 255.788 15.3222 256.024 15.5811C256.261 15.8165 256.569 15.9341 256.924 15.9341C257.279 15.9341 257.563 15.8165 257.823 15.5811C258.06 15.3458 258.178 15.0398 258.178 14.6868C258.178 14.3338 258.06 14.0514 257.823 13.816C257.563 13.6042 257.279 13.463 256.924 13.463V13.463Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M262.367 14.8034H260.379V16.9686H259.219V18.8043H260.379V22.1227C260.379 23.1582 260.592 23.9113 260.994 24.3349C261.421 24.7586 262.154 24.9939 263.172 24.9939C263.504 24.9939 263.835 24.9939 264.167 24.9704H264.261V23.1347L263.575 23.1817C263.101 23.1817 262.77 23.0876 262.604 22.9229C262.438 22.7581 262.367 22.4051 262.367 21.8638V18.8278H264.261V16.9921H262.367V14.8034V14.8034Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M273.78 13.603H275.815V24.9937H273.78V13.603Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M296.291 22.1231C295.936 22.5232 295.557 22.8762 295.273 23.0645V23.0645C294.989 23.2527 294.634 23.3233 294.232 23.3233C293.64 23.3233 293.143 23.1115 292.764 22.6644C292.385 22.2172 292.172 21.6524 292.172 20.9699C292.172 20.2874 292.361 19.7226 292.74 19.2754C293.119 18.8282 293.616 18.6164 294.208 18.6164C294.871 18.6164 295.557 19.0165 296.149 19.7226L297.498 18.4517V18.4517C296.623 17.322 295.51 16.8043 294.184 16.8043C293.072 16.8043 292.101 17.2043 291.32 18.0045C290.539 18.8047 290.136 19.7932 290.136 20.9934C290.136 22.1937 290.539 23.2057 291.32 23.9823C292.101 24.7825 293.072 25.1826 294.184 25.1826C295.652 25.1826 296.836 24.5471 297.64 23.394L296.291 22.1231V22.1231Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M304.624 18.1001C304.34 17.7 303.938 17.3705 303.464 17.1352C302.991 16.8998 302.423 16.7822 301.784 16.7822C300.647 16.7822 299.724 17.2058 299.038 18.006C298.351 18.8297 298.02 19.8417 298.02 21.0184C298.02 22.2422 298.399 23.2307 299.132 24.0073C299.866 24.7604 300.86 25.1605 302.068 25.1605C303.441 25.1605 304.553 24.6192 305.406 23.5366L305.453 23.4895L304.127 22.2187V22.2187C304.009 22.3599 303.82 22.5246 303.678 22.6894C303.488 22.8776 303.299 23.0188 303.086 23.113C302.778 23.2542 302.447 23.3483 302.068 23.3483C301.5 23.3483 301.05 23.1836 300.695 22.8541C300.363 22.5481 300.174 22.1481 300.127 21.6303H305.5L305.524 20.9007C305.524 20.383 305.453 19.8887 305.311 19.418C305.122 18.9238 304.908 18.5002 304.624 18.1001V18.1001ZM300.197 19.982C300.292 19.6055 300.481 19.276 300.718 19.0407C301.002 18.7818 301.357 18.6406 301.783 18.6406C302.281 18.6406 302.659 18.7818 302.92 19.0642C303.156 19.3231 303.298 19.629 303.322 20.0056H300.197V19.982Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M312.414 17.5809V17.5809C311.798 17.0631 310.946 16.8043 309.881 16.8043C309.195 16.8043 308.579 16.9455 308.011 17.2279C307.49 17.4868 306.969 17.9339 306.638 18.5223L306.662 18.5458L307.964 19.7932C308.508 18.9459 309.1 18.64 309.881 18.64C310.307 18.64 310.662 18.7576 310.923 18.9694C311.183 19.1813 311.325 19.4637 311.325 19.8402V20.2403C310.828 20.0991 310.331 20.005 309.834 20.005C308.816 20.005 308.011 20.2403 307.395 20.711C306.78 21.1817 306.472 21.8642 306.472 22.7114C306.472 23.4646 306.733 24.0765 307.253 24.5236C307.774 24.9708 308.437 25.1826 309.218 25.1826C309.999 25.1826 310.71 24.8766 311.372 24.3353V24.9943H313.361V19.8402C313.337 18.8518 313.029 18.0987 312.414 17.5809V17.5809ZM308.814 21.9348C309.051 21.7701 309.359 21.6995 309.785 21.6995C310.282 21.6995 310.803 21.7936 311.323 21.9819V22.7585C310.874 23.1586 310.282 23.3704 309.572 23.3704C309.217 23.3704 308.956 23.2998 308.767 23.1351C308.577 22.9939 308.483 22.8056 308.483 22.5467C308.483 22.2878 308.577 22.076 308.814 21.9348V21.9348Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M321.148 17.721C320.58 17.0856 319.798 16.7797 318.78 16.7797C317.976 16.7797 317.313 17.015 316.839 17.4622V16.9679H314.851V24.9932H316.887V20.5687C316.887 19.9568 317.029 19.4861 317.313 19.1331C317.597 18.7801 317.999 18.6154 318.52 18.6154C318.97 18.6154 319.325 18.7566 319.585 19.0625C319.846 19.3685 319.964 19.7921 319.964 20.3334V24.9697H322V20.3334C322 19.2273 321.716 18.3565 321.148 17.721V17.721Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M271.225 17.5809V17.5809C270.609 17.0631 269.757 16.8043 268.692 16.8043C268.005 16.8043 267.39 16.9455 266.821 17.2279C266.301 17.4868 265.78 17.9339 265.448 18.5223L265.472 18.5458L266.774 19.7932C267.319 18.9459 267.91 18.64 268.692 18.64C269.118 18.64 269.473 18.7576 269.733 18.9694C269.994 19.1813 270.136 19.4637 270.136 19.8402V20.2403C269.638 20.0991 269.141 20.005 268.644 20.005C267.626 20.005 266.821 20.2403 266.206 20.711C265.59 21.1817 265.283 21.8642 265.283 22.7114C265.283 23.4646 265.543 24.0765 266.064 24.5236C266.585 24.9708 267.248 25.1826 268.029 25.1826C268.81 25.1826 269.52 24.8766 270.183 24.3353V24.9943H272.171V19.8402C272.148 18.8518 271.84 18.0987 271.225 17.5809V17.5809ZM267.625 21.9348C267.862 21.7701 268.169 21.6995 268.595 21.6995C269.092 21.6995 269.613 21.7936 270.134 21.9819V22.7585C269.684 23.1586 269.092 23.3704 268.382 23.3704C268.027 23.3704 267.767 23.2998 267.577 23.1351C267.388 22.9939 267.293 22.8056 267.293 22.5467C267.293 22.2878 267.388 22.076 267.625 21.9348V21.9348Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M283.153 25.1587C279.91 25.1587 277.259 22.5228 277.259 19.2986C277.259 16.0744 279.91 13.4385 283.153 13.4385C286.396 13.4385 289.048 16.0744 289.048 19.2986C289.048 22.5228 286.42 25.1587 283.153 25.1587V25.1587ZM283.152 15.4859C281.045 15.4859 279.341 17.1804 279.341 19.275C279.341 21.3696 281.045 23.0641 283.152 23.0641C285.259 23.0641 286.963 21.3696 286.963 19.275C286.963 17.1804 285.259 15.4859 283.152 15.4859V15.4859Z" fill="white"/> <path d="M231.652 9H231.156L232.412 3.1H233.912C234.315 3.1 234.637 3.16667 234.88 3.3C235.123 3.43333 235.299 3.612 235.408 3.836C235.517 4.06 235.572 4.30667 235.572 4.576C235.572 4.92267 235.513 5.236 235.396 5.516C235.281 5.79333 235.117 6.03333 234.904 6.236C234.693 6.43867 234.441 6.59333 234.148 6.7C233.855 6.80667 233.532 6.86 233.18 6.86H232.108L231.652 9ZM232.148 6.676L231.98 6.424H233.172C233.559 6.424 233.895 6.34667 234.18 6.192C234.465 6.03467 234.687 5.81733 234.844 5.54C235.001 5.26267 235.08 4.94 235.08 4.572C235.08 4.36133 235.037 4.18 234.952 4.028C234.867 3.87333 234.729 3.75333 234.54 3.668C234.351 3.58 234.1 3.536 233.788 3.536H232.592L232.872 3.26L232.148 6.676ZM237.474 9.076C237.111 9.076 236.799 9.004 236.538 8.86C236.276 8.71333 236.075 8.51067 235.934 8.252C235.792 7.99333 235.722 7.692 235.722 7.348C235.722 6.97467 235.786 6.62667 235.914 6.304C236.044 5.98133 236.224 5.7 236.454 5.46C236.686 5.21733 236.956 5.02933 237.266 4.896C237.578 4.76 237.915 4.692 238.278 4.692C238.643 4.692 238.955 4.76667 239.214 4.916C239.475 5.06533 239.675 5.26933 239.814 5.528C239.952 5.784 240.022 6.07467 240.022 6.4C240.022 6.79467 239.955 7.156 239.822 7.484C239.691 7.80933 239.51 8.09067 239.278 8.328C239.046 8.56533 238.775 8.74933 238.466 8.88C238.159 9.01067 237.828 9.076 237.474 9.076ZM237.51 8.632C237.886 8.632 238.224 8.54133 238.526 8.36C238.83 8.176 239.071 7.92133 239.25 7.596C239.428 7.268 239.518 6.88667 239.518 6.452C239.518 6.18533 239.468 5.95467 239.37 5.76C239.271 5.56267 239.127 5.40933 238.938 5.3C238.751 5.19067 238.52 5.136 238.246 5.136C237.952 5.136 237.682 5.192 237.434 5.304C237.188 5.41333 236.975 5.56667 236.794 5.764C236.615 5.96133 236.475 6.19067 236.374 6.452C236.275 6.71333 236.226 6.996 236.226 7.3C236.226 7.71067 236.336 8.036 236.558 8.276C236.782 8.51333 237.099 8.632 237.51 8.632ZM243.959 9L243.627 4.752H244.055L244.379 8.76H244.287L245.967 4.752H246.499L244.639 9H243.959ZM241.159 9L241.095 4.752H241.595L241.579 8.76H241.483L243.503 4.752H243.967L241.843 9H241.159ZM246.97 7.084L247.066 6.64H250.506L250.406 6.78C250.42 6.724 250.432 6.65867 250.442 6.584C250.453 6.50667 250.458 6.42267 250.458 6.332C250.458 6.11067 250.413 5.91067 250.322 5.732C250.234 5.55067 250.1 5.40667 249.918 5.3C249.737 5.19333 249.506 5.14 249.226 5.14C248.925 5.14 248.649 5.196 248.398 5.308C248.15 5.42 247.934 5.576 247.75 5.776C247.569 5.97333 247.428 6.204 247.326 6.468C247.228 6.72933 247.178 7.012 247.178 7.316C247.178 7.57467 247.225 7.80267 247.318 8C247.414 8.19733 247.56 8.35067 247.754 8.46C247.949 8.56933 248.194 8.624 248.49 8.624C248.738 8.624 248.958 8.59467 249.15 8.536C249.345 8.47467 249.51 8.39467 249.646 8.296C249.785 8.19733 249.896 8.09333 249.978 7.984C250.064 7.872 250.122 7.76667 250.154 7.668H250.654C250.614 7.82533 250.534 7.98667 250.414 8.152C250.297 8.31467 250.142 8.46667 249.95 8.608C249.758 8.74933 249.533 8.864 249.274 8.952C249.018 9.03733 248.733 9.08 248.418 9.08C248.056 9.08 247.745 9.00667 247.486 8.86C247.23 8.71067 247.034 8.50533 246.898 8.244C246.765 7.98 246.698 7.676 246.698 7.332C246.698 6.96133 246.764 6.61733 246.894 6.3C247.028 5.98 247.212 5.7 247.446 5.46C247.684 5.21733 247.958 5.02933 248.27 4.896C248.582 4.76 248.917 4.692 249.274 4.692C249.632 4.692 249.933 4.76667 250.178 4.916C250.426 5.06267 250.614 5.26267 250.742 5.516C250.87 5.76933 250.934 6.05467 250.934 6.372C250.934 6.484 250.924 6.60667 250.902 6.74C250.884 6.87333 250.861 6.988 250.834 7.084H246.97ZM251.615 9L252.515 4.752H253.011L252.747 6.004L252.559 5.948C252.604 5.81467 252.673 5.676 252.767 5.532C252.86 5.38533 252.977 5.248 253.119 5.12C253.26 4.992 253.424 4.88933 253.611 4.812C253.8 4.732 254.012 4.692 254.247 4.692C254.415 4.692 254.549 4.70667 254.651 4.736C254.755 4.76533 254.817 4.788 254.839 4.804L254.603 5.284C254.579 5.26533 254.528 5.24133 254.451 5.212C254.376 5.18267 254.261 5.168 254.107 5.168C253.883 5.168 253.685 5.212 253.515 5.3C253.344 5.38533 253.199 5.49733 253.079 5.636C252.959 5.77467 252.861 5.92267 252.787 6.08C252.715 6.23733 252.664 6.38667 252.635 6.528L252.107 9H251.615ZM255.181 7.084L255.277 6.64H258.717L258.617 6.78C258.631 6.724 258.643 6.65867 258.653 6.584C258.664 6.50667 258.669 6.42267 258.669 6.332C258.669 6.11067 258.624 5.91067 258.533 5.732C258.445 5.55067 258.311 5.40667 258.129 5.3C257.948 5.19333 257.717 5.14 257.437 5.14C257.136 5.14 256.86 5.196 256.609 5.308C256.361 5.42 256.145 5.576 255.961 5.776C255.78 5.97333 255.639 6.204 255.537 6.468C255.439 6.72933 255.389 7.012 255.389 7.316C255.389 7.57467 255.436 7.80267 255.529 8C255.625 8.19733 255.771 8.35067 255.965 8.46C256.16 8.56933 256.405 8.624 256.701 8.624C256.949 8.624 257.169 8.59467 257.361 8.536C257.556 8.47467 257.721 8.39467 257.857 8.296C257.996 8.19733 258.107 8.09333 258.189 7.984C258.275 7.872 258.333 7.76667 258.365 7.668H258.865C258.825 7.82533 258.745 7.98667 258.625 8.152C258.508 8.31467 258.353 8.46667 258.161 8.608C257.969 8.74933 257.744 8.864 257.485 8.952C257.229 9.03733 256.944 9.08 256.629 9.08C256.267 9.08 255.956 9.00667 255.697 8.86C255.441 8.71067 255.245 8.50533 255.109 8.244C254.976 7.98 254.909 7.676 254.909 7.332C254.909 6.96133 254.975 6.61733 255.105 6.3C255.239 5.98 255.423 5.7 255.657 5.46C255.895 5.21733 256.169 5.02933 256.481 4.896C256.793 4.76 257.128 4.692 257.485 4.692C257.843 4.692 258.144 4.76667 258.389 4.916C258.637 5.06267 258.825 5.26267 258.953 5.516C259.081 5.76933 259.145 6.05467 259.145 6.372C259.145 6.484 259.135 6.60667 259.113 6.74C259.095 6.87333 259.072 6.988 259.045 7.084H255.181ZM261.526 9.076C261.072 9.076 260.714 8.93067 260.45 8.64C260.186 8.34933 260.054 7.94133 260.054 7.416C260.054 7.048 260.108 6.7 260.218 6.372C260.33 6.044 260.487 5.75467 260.69 5.504C260.895 5.25067 261.14 5.05333 261.426 4.912C261.711 4.768 262.028 4.696 262.378 4.696C262.666 4.696 262.922 4.756 263.146 4.876C263.372 4.996 263.551 5.16133 263.682 5.372C263.812 5.58267 263.878 5.82533 263.878 6.1C263.878 6.172 263.872 6.248 263.862 6.328C263.851 6.40533 263.839 6.46667 263.826 6.512L263.486 6.52C263.499 6.47467 263.508 6.424 263.514 6.368C263.522 6.30933 263.526 6.26 263.526 6.22C263.526 6.01733 263.475 5.83467 263.374 5.672C263.275 5.50933 263.139 5.38133 262.966 5.288C262.795 5.19467 262.6 5.148 262.382 5.148C262.091 5.148 261.832 5.208 261.606 5.328C261.382 5.44533 261.192 5.608 261.038 5.816C260.883 6.02133 260.764 6.25867 260.682 6.528C260.602 6.79467 260.562 7.076 260.562 7.372C260.562 7.76933 260.656 8.07467 260.846 8.288C261.038 8.50133 261.308 8.608 261.658 8.608C261.922 8.608 262.17 8.54667 262.402 8.424C262.636 8.30133 262.836 8.13867 263.002 7.936C263.17 7.73067 263.279 7.504 263.33 7.256L263.722 7.264C263.65 7.6 263.507 7.90533 263.294 8.18C263.08 8.45467 262.819 8.67333 262.51 8.836C262.203 8.996 261.875 9.076 261.526 9.076ZM262.958 9L264.286 2.748H264.782L263.454 9H262.958ZM268.755 9.076C268.47 9.076 268.214 9.01467 267.987 8.892C267.76 8.76933 267.582 8.60133 267.451 8.388C267.323 8.172 267.259 7.92667 267.259 7.652C267.259 7.57733 267.263 7.50533 267.271 7.436C267.282 7.36667 267.294 7.30667 267.307 7.256L267.643 7.248C267.635 7.28 267.627 7.32267 267.619 7.376C267.614 7.42933 267.611 7.48133 267.611 7.532C267.611 7.73467 267.66 7.91733 267.759 8.08C267.86 8.24267 267.996 8.372 268.167 8.468C268.34 8.56133 268.536 8.608 268.755 8.608C269.043 8.608 269.299 8.54933 269.523 8.432C269.75 8.312 269.94 8.148 270.095 7.94C270.252 7.732 270.371 7.49467 270.451 7.228C270.531 6.96133 270.571 6.68 270.571 6.384C270.571 5.97867 270.479 5.67067 270.295 5.46C270.111 5.24933 269.843 5.144 269.491 5.144C269.243 5.144 269 5.204 268.763 5.324C268.526 5.444 268.32 5.604 268.147 5.804C267.974 6.004 267.86 6.22533 267.807 6.468L267.423 6.456C267.495 6.12 267.643 5.81867 267.867 5.552C268.091 5.28533 268.356 5.076 268.663 4.924C268.972 4.76933 269.29 4.692 269.615 4.692C270.071 4.692 270.428 4.83733 270.687 5.128C270.948 5.41867 271.079 5.83067 271.079 6.364C271.079 6.732 271.023 7.08 270.911 7.408C270.802 7.73333 270.644 8.02133 270.439 8.272C270.234 8.52267 269.988 8.72 269.703 8.864C269.418 9.00533 269.102 9.076 268.755 9.076ZM266.775 9L268.107 2.748H268.603L267.275 9H266.775ZM271.22 10.776C271.121 10.776 271.031 10.7693 270.948 10.756C270.865 10.7453 270.816 10.736 270.8 10.728L270.892 10.284C270.921 10.3027 270.975 10.3173 271.052 10.328C271.127 10.3413 271.2 10.348 271.272 10.348C271.456 10.348 271.619 10.3027 271.76 10.212C271.904 10.1213 272.031 10.0067 272.14 9.868C272.249 9.72933 272.344 9.58667 272.424 9.44L272.66 9.012L272.084 4.752H272.588L273.072 8.552H272.984L275.036 4.752H275.568L272.976 9.42C272.848 9.652 272.707 9.87067 272.552 10.076C272.4 10.284 272.217 10.452 272.004 10.58C271.791 10.7107 271.529 10.776 271.22 10.776Z" fill="white"/> <line x1="184.5" y1="-2.18557e-08" x2="184.5" y2="32" stroke="white" stroke-opacity="0.5"/> </svg> </a> </div> <div class="header-middle-area"> <nav id="main-nav" class="main-nav" role="navigation"> <ul id="menu-primary" class="menu"><li id="menu-item-379211" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-379211"><a href="https://css-tricks.com/category/articles/"><span>Articles</span></a></li> <li id="menu-item-379212" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-379212"><a href="https://css-tricks.com/category/notes/"><span>Notes</span></a></li> <li id="menu-item-379154" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-379154"><a href="https://css-tricks.com/category/links/"><span>Links</span></a></li> <li id="menu-item-377808" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-377808"><a href="/guides"><span>Guides</span></a></li> <li id="menu-item-377809" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-377809"><a href="/almanac"><span>Almanac</span></a></li> <li id="menu-item-382690" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-382690"><a href="https://css-tricks.com/picks/"><span>Picks</span></a></li> <li id="menu-item-379272" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-379272"><a href="/random"><span>Shuffle</span></a></li> </ul></nav> <div class="search-and-account"> <a href="https://www.google.com/search?q=site:css-tricks.com%20layout" class="jetpack-search-filter__link"> <span class="screen-reader-text">Search</span> <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15.0726 10.4326C12.4801 10.4326 10.4 12.5451 10.4 15.1053C10.4 17.6978 12.5125 19.7779 15.0726 19.7779C17.6651 19.7779 19.7453 17.6654 19.7453 15.1053C19.744 12.544 17.664 10.4326 15.0726 10.4326Z" fill="white"/> <path d="M16.0327 0.447479C7.42401 0.447479 0.447693 7.4238 0.447693 16.0324C0.447693 24.6398 7.42401 31.6161 16.0314 31.6161C24.64 31.6161 31.6163 24.6398 31.6163 16.0324C31.6163 7.4238 24.64 0.447479 16.0327 0.447479ZM23.6163 24.0324C23.3926 24.2562 23.0401 24.385 22.6563 24.385C22.2726 24.385 21.9526 24.2575 21.6963 24.0324L18.7526 21.0887L18.4651 21.2487C17.4088 21.825 16.2576 22.145 15.0724 22.145C11.1998 22.145 8.06509 19.0087 8.06509 15.1376C8.06509 11.265 11.2013 8.13023 15.0724 8.13023C18.9451 8.13023 22.0798 11.2665 22.0798 15.1376C22.0798 16.5138 21.6961 17.8251 20.9273 18.9776L20.7348 19.2976L23.6473 22.2101C23.8711 22.4664 24.0311 22.7864 24.0311 23.1376C23.9998 23.4563 23.8723 23.7763 23.616 24.0326L23.6163 24.0324Z" fill="white"/> </svg> </a> </div> </div> </header> <div class="page-wrap"> <div class="articles-and-sidebar "> <main id="post-312285"> <article> <header class="mega-header"> <style> html { --featured-img: url(https://css-tricks.com/wp-content/uploads/2020/06/dark-mode-guide.png); --bg-blend-mode: multiply; background-size: 120% 2000px, 100% auto; } </style> <div class="tags"> <a href="https://css-tricks.com/tag/dark-mode/" rel="tag">dark mode</a> </div> <h1 class="article-title"> Dark Mode in CSS Guide </h1> <div class="author-row"> <a href="https://css-tricks.com/author/mohamedadhuham/" aria-label="Author page of Adhuham"> <img loading="lazy" alt="Avatar of Adhuham" class="avatar avatar-80 photo avatar-default" height="80" src="https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/32795085-80x80.png" width="80"> </a> <div> <a class="author-name" href="https://css-tricks.com/author/mohamedadhuham/"> Adhuham </a> on <time datetime="2024-08-12"> Aug 12, 2024 </time> </div> </div> </header> <div class="article-sponsor"> <p> Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering <a href="https://www.cloudways.com/en/wordpress-hosting.php?id=1223312">40% off for 4 months, and 40 free migrations</a>. </p> </div> <div class="article-content"> <p>Dark mode has gained a lot of traction recently. Like Apple, for instance, has added dark mode to its iOS and MacOS operating systems. Windows and Google have done the same. </p> <figure class="wp-block-image size-large"><img loading="lazy" fetchpriority="high" decoding="async" width="1824" height="848" src="https://i2.wp.com/css-tricks.com/wp-content/uploads/2020/06/OyfkbMzf.png?fit=1024%2C476&ssl=1" alt="" class="wp-image-312286" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/OyfkbMzf.png?w=1824&ssl=1 1824w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/OyfkbMzf.png?resize=300%2C139&ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/OyfkbMzf.png?resize=1024%2C476&ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/OyfkbMzf.png?resize=768%2C357&ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/OyfkbMzf.png?resize=1536%2C714&ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/OyfkbMzf.png?resize=1000%2C465&ssl=1 1000w" sizes="(min-width: 735px) 864px, 96vw" /><figcaption>DuckDuckGo’s light and dark themes</figcaption></figure> <p>Let’s get into dark mode in the context of <strong>websites</strong>. We’ll delve into different options and approaches to implementing a dark mode design and the technical considerations they entail. We’ll also touch upon some design tips along the way.</p> <div class="wp-block-group article-series"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"><h4 class="wp-block-heading" id="table-of-contents"><a href="#aa-table-of-contents" aria-hidden="true" class="aal_anchor" id="aa-table-of-contents"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Table of Contents</h4> <ol class="wp-block-list"><li><a href="#toggling-themes">Toggling Themes</a></li><li><a href="#os-level">Dark Mode at the Operating System Level</a></li><li><a href="#storing-preferences">Storing a User’s Preferences</a></li><li><a href="#ua-styles">Handling User Agent Styles</a></li><li><a href="#combining">Combining Approaches</a></li><li><a href="#design">Design Considerations</a></li><li><a href="#in-the-wild">Dark Mode in the Wild</a></li><li><a href="#decide">Dark Mode or No Dark Mode?</a></li></ol> </div></div> <hr class="wp-block-separator"/> <div class="dark-mode-toggling-themes"> <h3 class="wp-block-heading" id="toggling-themes"><a href="#aa-toggling-themes" aria-hidden="true" class="aal_anchor" id="aa-toggling-themes"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Toggling Themes</h3> <p>The typical scenario is that you already have a light theme for your site, and you’re interested in making a darker counterpart. Or, even if you’re starting from scratch, you’ll have both themes: light and dark. One theme should be defined as the default that users get on first visit, which is the light theme in most cases (though we can let the user’s browser make that choice for us, as we’ll see). There also should be a way to switch to the other theme (which can be done automatically, as we’ll also see) — as in, the user clicks a button and the color theme changes.</p> <p>There several approaches to go about doing this:</p> <div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <details><summary><h4><a href="#aa-using-a-body-class" aria-hidden="true" class="aal_anchor" id="aa-using-a-body-class"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using a Body Class</h4></summary> <p>The trick here is to swap out a class that can be a hook for changing a style anywhere on the page.</p> <pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt"><body class="dark-theme || light-theme"></code></pre> <p>Here’s a script for a button that will toggle that class, for example:</p> <pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">// Select the button const btn = document.querySelector('.btn-toggle'); // Listen for a click on the button btn.addEventListener('click', function() { // Then toggle (add/remove) the .dark-theme class to the body document.body.classList.toggle('dark-theme'); })</code></pre> <p>Here’s how we can use that idea:</p> <pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt"><body>   <button class="btn-toggle">Toggle Dark Mode</button>   <h1>Hey there! This is just a title</h1>   <p>I am just a boring text, existing here solely for the purpose of this demo</p>   <p>And I am just another one like the one above me, because two is better than having only one</p>   <a href="#">I am a link, don't click me!</a> </body></code></pre> <p>The general idea of this approach is to style things up as we normally would, call that our “default” mode, then create a complete set of color styles using a class set on the <code><body></code>  element we can use as a “dark” mode.</p> <p>Let’s say our default is a light color scheme. All of those “light” styles are written exactly the same way you normally write CSS. Given our HTML, let’s apply some global styling to the body and to links.</p> <pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">body {   color: #222;   background: #fff; } a {   color: #0033cc; }</code></pre> <p>Good good. We have dark text (<code>#222</code>) and dark links (<code>#0033cc</code>) on a light background (<code>#fff</code>). Our “default” theme is off to a solid start.</p> <p>Now let’s redefine those property values, this time set on a different body class:</p> <pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">body {   color: #222;   background: #fff; } a {   color: #0033cc; }   /* Dark Mode styles */ body.dark-theme {   color: #eee;   background: #121212; } body.dark-theme a {   color: #809fff; }</code></pre> <p>Dark theme styles will be descendants of the same parent class — which is <code>.dark-theme</code> in this example — which we’ve applied to the <code><body></code> tag.</p> <p>How do we “switch” body classes to access the dark styles? We can use JavaScript! We’ll select the button class (<code>.btn-toggle</code>), add a listener for when it’s clicked, then add the dark theme class (<code>.dark-theme</code>) to the body element’s class list. That effectively overrides all of the “light” colors we set, thanks to the cascade and specificity. </p> <p>Here’s the complete code working in action. Click the toggle button to toggle in and out of dark mode.</p> <div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_dyodgPj" src="//codepen.io/anon/embed/dyodgPj?height=450&theme-id=1&slug-hash=dyodgPj&default-tab=result" height="450" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed dyodgPj" title="CodePen Embed dyodgPj" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div> </details> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <details><summary><h4><a href="#aa-using-separate-stylesheets" aria-hidden="true" class="aal_anchor" id="aa-using-separate-stylesheets"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using Separate Stylesheets</h4></summary> <p>Rather than keeping all the styles together in one stylesheet, we could instead toggle between stylesheets for each theme. This assumes you have full stylesheets ready to go.</p> <p>For example, a default light theme like <code>light-theme.css</code>:</p> <pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* light-theme.css */   body {   color: #222;   background: #fff; } a {   color: #0033cc; }</code></pre> <p>Then we create styles for the dark theme and save them in a separate stylesheet we’re calling <code>dark-theme.css</code>.</p> <pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* dark-theme.css */   body {   color: #eee;   background: #121212; } body a {   color: #809fff; }</code></pre> <p>This gives us two separate stylesheets — one for each theme — we can link up in the HTML <code><head></code> section. Let’s link up the light styles first since we’re calling those the default.</p> <pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt"><!DOCTYPE html> <html lang="en"> <head>      <link href="light-theme.css" rel="stylesheet" id="theme-link"> </head>      </html></code></pre> <p>We are using a <code>#theme-link</code> ID that we can select with JavaScript to, again, toggle between light and dark mode. Only this time, we’re toggling files instead of classes.</p> <pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">// Select the button const btn = document.querySelector(".btn-toggle"); // Select the stylesheet <link> const theme = document.querySelector("#theme-link"); // Listen for a click on the button btn.addEventListener("click", function() { // If the current URL contains "ligh-theme.css" if (theme.getAttribute("href") == "light-theme.css") { // ... then switch it to "dark-theme.css" theme.href = "dark-theme.css"; // Otherwise... } else { // ... switch it to "light-theme.css" theme.href = "light-theme.css"; } });</code></pre> <div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex"> <div class="wp-block-button"><a class="wp-block-button__link" href="https://codepen.io/adhuham/project/full/AqjdGV" rel="noopener">View Demo</a></div> </div> </div> </div> <div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <details><summary><h4><a href="#aa-using-custom-properties" aria-hidden="true" class="aal_anchor" id="aa-using-custom-properties"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using Custom Properties</h4></summary> <p>We can also leverage the power of CSS custom properties to create a dark theme! It helps us avoid having to write separate style rulesets for each theme, making it a lot faster to write styles and a lot easier to make changes to a theme if we need to.</p> <p>We still might choose to swap a body class, and use that class to re-set custom properties:</p> <pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">// Select the button const btn = document.querySelector(".btn-toggle");   // Listen for a click on the button btn.addEventListener("click", function() {   // Then toggle (add/remove) the .dark-theme class to the body   document.body.classList.toggle("dark-theme"); });</code></pre> <p>First, let’s define the default light color values as custom properties on the body element:</p> <pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">body {   --text-color: #222;   --bkg-color: #fff;   --anchor-color: #0033cc; }</code></pre> <p>Now we can redefine those values on a <code>.dark-theme</code> body class just like we did in the first method:</p> <pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">body.dark-theme {   --text-color: #eee;   --bkg-color: #121212;   --anchor-color: #809fff; }</code></pre> <p>Here are our rulesets for the body and link elements using custom properties:</p> <pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">body {   color: var(--text-color);   background: var(--bkg-color); } a {   color: var(--anchor-color); }</code></pre> <p class="explanation">We could just as well have defined our custom properties inside the document <code>:root</code>. That’s totally legit and <a href="https://css-tricks.com/breaking-css-custom-properties-out-of-root-might-be-a-good-idea/">even common practice</a>. In that case, all the default theme styles definitions would go inside <code>:root { }</code> and all of the dark theme properties go inside <code>:root.dark-mode { }</code>.</p> </details> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <details><summary><h4><a href="#aa-using-server-side-scripts" aria-hidden="true" class="aal_anchor" id="aa-using-server-side-scripts"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using Server-Side Scripts</h4></summary> <p>If we’re already working with a server-side language, say PHP, then we can use it instead of JavaScript. This is a great approach if you prefer working directly in the markup.</p> <pre rel="PHP" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt"><?php $themeClass = ''; if (isset($_GET['theme']) && $_GET['theme'] == 'dark') {   $themeClass = 'dark-theme'; }   $themeToggle = ($themeClass == 'dark-theme') ? 'light' : 'dark'; ?> <!DOCTYPE html> <html lang="en">  <body class="<?php echo $themeClass; ?>">   <a href="?theme=<?php echo $themeToggle; ?>">Toggle Dark Mode</a>    </body> </html></code></pre> <p>We can have the user send a <code>GET</code> or <code>POST</code> request. Then, we let our code (PHP in this case) apply the appropriate body class when the page is reloaded. I am using a <code>GET</code> request (URL params) for the purpose of this demonstration.</p> <p>And, yes, we can swap stylesheets just like we did in the second method.</p> <pre rel="PHP" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt"><?php $themeStyleSheet = 'light-theme.css'; if (isset($_GET['theme']) && $_GET['theme'] == 'dark') {   $themeStyleSheet = 'dark-theme.css'; }   $themeToggle = ($themeStyleSheet == 'dark-theme.css') ? 'light' : 'dark'; ?> <!DOCTYPE html> <html lang="en"> <head>      <link href="<?php echo $themeStyleSheet; ?>" rel="stylesheet"> </head>   <body>   <a href="?theme=<?php echo $themeToggle; ?>">Toggle Dark Mode</a>    </body> </html></code></pre> <p>This method has an obvious downside: the page needs to be refreshed for the toggle to take place. But a server-side solution like this is useful in persisting the user’s theme choice across page reloads, as we will see later.</p> </div> </div> </div> <hr class="wp-block-separator is-style-default"/> <h4 class="wp-block-heading" id="which-method-should-you-choose"><a href="#aa-which-method-should-you-choose" aria-hidden="true" class="aal_anchor" id="aa-which-method-should-you-choose"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Which method should you choose?</h4> <p>The “right” method comes down to the requirements of your project. If you are doing a large project, for example, you might go with CSS properties to help wrangle a large codebase. On the other hand, if your project needs to support legacy browsers, then another approach will need to do instead.</p> <p>Moreover, there’s nothing saying we can only use one method. Sometimes a combination of methods will be the most effective route. There may even be other possible methods than what we have discussed.</p> <hr class="wp-block-separator"/> <div class="dark-mode-prefers-color-scheme"> <h3 class="wp-block-heading" id="os-level"><a href="#aa-dark-mode-at-the-operating-system-level" aria-hidden="true" class="aal_anchor" id="aa-dark-mode-at-the-operating-system-level"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Dark Mode at the Operating System Level</h3> <p>So far, we’ve used a button to toggle between light and dark mode but we can simply let the user’s operating system do that lifting for us. For example, many operating systems let users choose between light and dark themes directly in the system settings.</p> <figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1336" height="682" src="https://i2.wp.com/css-tricks.com/wp-content/uploads/2020/06/MD5XiU_A.png?fit=1024%2C523&ssl=1" alt="" class="wp-image-312287" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/MD5XiU_A.png?w=1336&ssl=1 1336w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/MD5XiU_A.png?resize=300%2C153&ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/MD5XiU_A.png?resize=1024%2C523&ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/MD5XiU_A.png?resize=768%2C392&ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/MD5XiU_A.png?resize=1000%2C510&ssl=1 1000w" sizes="(min-width: 735px) 864px, 96vw" /><figcaption>The “General” settings in MacOS System Preferences</figcaption></figure> <div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-3 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><h4 class="wp-block-heading" id="pure-css"><a href="#aa-pure-css" aria-hidden="true" class="aal_anchor" id="aa-pure-css"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Pure CSS</h4> <div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_mdVrQXV" src="//codepen.io/anon/embed/mdVrQXV?height=350&theme-id=1&slug-hash=mdVrQXV&default-tab=result" height="350" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed mdVrQXV" title="CodePen Embed mdVrQXV" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div> <details><summary>Details</summary> <p>Fortunately, CSS has a <code>prefers-color-scheme</code> media query which can be used to detect user’s system color scheme preferences. It can have three possible values: no preference, light and dark. Read more about it <a rel="noopener noreferrer" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme">on MDN</a>.</p> <pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">@media (prefers-color-scheme: dark) {   /* Dark theme styles go here */ }   @media (prefers-color-scheme: light) {   /* Light theme styles go here */ }</code></pre> <p>To use it, we can put the dark theme styles inside the media query.</p> <pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">@media (prefers-color-scheme: dark) {   body {     color: #eee;     background: #121212;   }     a {     color: #809fff;   } }</code></pre> <p>Now, if a user has enabled dark mode from the system settings, they will get the dark mode styles by default. We don’t have to resort to JavaScript or server-side scripts to decide which mode to use. Heck, we don’t even need the button anymore!</p> </details> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><h4 class="wp-block-heading" id="javascript"><a href="#aa-javascript" aria-hidden="true" class="aal_anchor" id="aa-javascript"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>JavaScript</h4> <div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_NWxREYg" src="//codepen.io/anon/embed/NWxREYg?height=350&theme-id=1&slug-hash=NWxREYg&default-tab=result" height="350" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed NWxREYg" title="CodePen Embed NWxREYg" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div> <details><summary>Details</summary> <p>We can turn to JavaScript to detect the user’s preferred color scheme. This is a lot like the first method we worked with, only we’re using <code>matchedMedia()</code> to detect the user’s preference.</p> <pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');nnif (prefersDarkScheme.matches) {n document.body.classList.add('dark-theme');n} else {n document.body.classList.remove('dark-theme');n}</code></pre> <p>There is a downside to using JavaScript: there will likely be a quick flash of the light theme as JavaScript is executed after the CSS. That could be misconstrued as a bug.</p> <p>And, of course, we can swap stylesheets instead like we did in the second method. This time, we link up both stylesheets and use the media query to determine which one is applied.</p> </details> <p></p> </div> </div> <div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-4 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><h4 class="wp-block-heading" id="overridingnbspos-settings"><a href="#aa-overriding-os-settings" aria-hidden="true" class="aal_anchor" id="aa-overriding-os-settings"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Overriding OS Settings</h4> <p>We just looked at how to account for a user’s system-wide color scheme preferences. <strong>But what if users want to override their system preference for a site?</strong> Just because a user prefers dark mode for their OS doesn’t always mean they prefer it on a website. That’s why providing a way to manually override dark mode, despite the system settings, is a good idea.</p> <details><summary>View Code</summary> <p>Let’s use the CSS custom properties approach to demonstrate how to do this. The idea is to define the custom properties for both themes like we did before, wrap dark styles up in the <code>prefers-color-scheme</code> media query, then define a <code>.light-theme</code> class inside of that we can use to override the dark mode properties, should the user want to toggle between the two modes.</p> <pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* Default colors */ body {   --text-color: #222;   --bkg-color: #fff; } /* Dark theme colors */ body.dark-theme {   --text-color: #eee;   --bkg-color: #121212; } /* Styles for users who prefer dark mode at the OS level */ @media (prefers-color-scheme: dark) {   /* defaults to dark theme */   body {      --text-color: #eee;     --bkg-color: #121212;   }   /* Override dark mode with light mode styles if the user decides to swap */   body.light-theme {     --text-color: #222;     --bkg-color: #fff;   } }</code></pre> <p>Now we can turn back to our trusty button to toggle between light and dark themes. <strong>This way, we’re respecting the OS color preference by default <em>and</em> allowing the user to manually switch themes.</strong></p> <pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">// Listen for a click on the button  btn.addEventListener("click", function() {   // If the OS is set to dark mode...   if (prefersDarkScheme.matches) {     // ...then apply the .light-theme class to override those styles     document.body.classList.toggle("light-theme");     // Otherwise...   } else {     // ...apply the .dark-theme class to override the default light styles     document.body.classList.toggle("dark-theme");   } });</code></pre> <div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_GRJxpQr" src="//codepen.io/anon/embed/GRJxpQr?height=350&theme-id=1&slug-hash=GRJxpQr&default-tab=result" height="350" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed GRJxpQr" title="CodePen Embed GRJxpQr" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div> </details> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><h4 class="wp-block-heading" id="browser-support"><a href="#aa-browser-support" aria-hidden="true" class="aal_anchor" id="aa-browser-support"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Browser Support</h4> <p>The <code>prefers-color-scheme</code> media query feature enjoys support by major browsers, including Chrome 76+, Firefox 67+, Chrome Android 76+, Safari 12.5+ (13+ on iOS), and Samsung Internet Browser. It doesn’t support IE.</p> <p>That’s a promising amount of support! <a href="https://caniuse.com/%23feat=prefers-color-scheme" rel="noopener">Can I Use</a> estimates 80.85% of user coverage.</p> <p>Operating systems that currently support dark mode include MacOS (Mojave or later), iOS (13.0+), Windows (10+), and Android (10+).</p> </div> </div> </div> <hr class="wp-block-separator"/> <h3 class="wp-block-heading" id="storing-preferences"><a href="#aa-storing-a-users-preference" aria-hidden="true" class="aal_anchor" id="aa-storing-a-users-preference"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Storing a User’s Preference</h3> <p>What we’ve looked at so far definitely does what it says in the tin: swap themes based on an OS preference or a button click. This is great, but doesn’t carry over when the user either visits another page on the site or reloads the current page.</p> <p>We need to save the user’s choice so that it will be applied consistently throughout the site and on subsequent visits. To do that, we can save the user’s choice to the <code>localStorage</code> when the theme is toggled. Cookies are also well-suited for the job.</p> <p>Let’s look at both approaches.</p> <div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-5 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><h4 class="wp-block-heading" id="using-localstorage"><a href="#aa-using-localstorage" aria-hidden="true" class="aal_anchor" id="aa-using-localstorage"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><strong>Using localStorage</strong></h4> <p>We have a script that saves the selected theme to localStorage when the toggle takes place. In other words, when the page is reloaded, the script fetches the choice from <code>localStorage</code> and applies it. JavaScript is often executed after CSS, so this approach is prone to a <strong>“flash of incorrect theme” (FOIT)</strong>.</p> <details><summary>View Code</summary> <pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">// Select the button const btn = document.querySelector(".btn-toggle"); // Select the theme preference from localStorage const currentTheme = localStorage.getItem("theme");   // If the current theme in localStorage is "dark"... if (currentTheme == "dark") {   // ...then use the .dark-theme class   document.body.classList.add("dark-theme"); }   // Listen for a click on the button  btn.addEventListener("click", function() {   // Toggle the .dark-theme class on each click   document.body.classList.toggle("dark-theme");      // Let's say the theme is equal to light   let theme = "light";   // If the body contains the .dark-theme class...   if (document.body.classList.contains("dark-theme")) {     // ...then let's make the theme dark     theme = "dark";   }   // Then save the choice in localStorage   localStorage.setItem("theme", theme); });</code></pre> <div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_YzXayaq" src="//codepen.io/anon/embed/YzXayaq?height=350&theme-id=1&slug-hash=YzXayaq&default-tab=result" height="350" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed YzXayaq" title="CodePen Embed YzXayaq" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div> </details> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><h4 class="wp-block-heading" id="using-cookies-with-php"><a href="#aa-using-cookies-with-php" aria-hidden="true" class="aal_anchor" id="aa-using-cookies-with-php"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using Cookies with PHP</h4> <p>To avoid FLIC, we can use a server-side script like PHP. Instead of saving the user’s theme preference in <code>localStorage</code>, we will create a cookie from JavaScript and save it there. But again, this may only be feasible if you’re already working with a server-side language.</p> <details><summary>View Code</summary> <pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">// Select the button const btn = document.querySelector(".btn-toggle");   // Listen for a click on the button  btn.addEventListener("click", function() {   // Toggle the .dark-theme class on the body   document.body.classList.toggle("dark-theme");      // Let's say the theme is equal to light   let theme = "light";   // If the body contains the .dark-theme class...   if (document.body.classList.contains("dark-theme")) {     // ...then let's make the theme dark     theme = "dark";   }   // Then save the choice in a cookie   document.cookie = "theme=" + theme; });</code></pre> <p>We can now check for the existence of that cookie and load the appropriate theme by applying the proper class to the <code><body></code> tag.</p> <pre rel="PHP" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt"><?php $themeClass = ''; if (!empty($_COOKIE['theme']) && $_COOKIE['theme'] == 'dark') {   $themeClass = 'dark-theme'; } ?>   <!DOCTYPE html> <html lang="en">  <body class="<?php echo $themeClass; ?>">  </body> </html></code></pre> <p>Here is how to do that using the separate stylesheets method:</p> <pre rel="PHP" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt"><?php $themeStyleSheet = 'light-theme.css'; if (!empty($_COOKIE['theme']) && $_COOKIE['theme'] == 'dark') {   $themeStyleSheet = 'dark-theme.css'; } ?>   <!DOCTYPE html> <html lang="en"> <head>      <link href="<?php echo $themeStyleSheet; ?>" rel="stylesheet" id="theme-link"> </head> </code></pre> <p>If your website has user accounts — like a place to log in and manage profile stuff — that’s also a great place to save theme preferences. Send those to the database where user account details are stored. Then, when the user logs in, fetch the theme from the database and apply it to the page using PHP (or whatever server-side script).</p> <p>There are various ways to do this. In this example, I am fetching the user’s theme preference from the database and saving it in a session variable at the time of login.</p> <pre rel="PHP" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt"><?php // Login action if (!empty($_POST['login'])) {   // etc.     // If the uuser is authenticated...   if ($loginSuccess) {     // ... save their theme preference to a session variable     $_SESSION['user_theme'] = $userData['theme'];   } }   // Pick the session variable first if it's set; otherwise pick the cookie $themeChoice = $_SESSION['user_theme'] ?? $_COOKIE['theme'] ?? null; $themeClass = ''; if ($themeChoice == 'dark') {   $themeClass = 'dark-theme'; } ?>   <!DOCTYPE html> <html lang="en">  <body class="<?php echo $themeClass; ?>">  </body> </html></code></pre> <p>I am using PHP’s <a href="https://www.php.net/manual/en/migration70.new-features.php#migration70.new-features.null-coalesce-op" rel="noopener">null coalesce operator</a> (<code>??</code>) to decide where to pick the theme preference: from the session or from the cookie. If the user is logged in, the value of the session variable is taken instead that of the cookie. And if the user is not logged in or has logged out, the value of cookie is taken.</p> </div> </div> <hr class="wp-block-separator"/> <h3 class="wp-block-heading" id="ua-styles"><a href="#aa-handling-user-agent-styles" aria-hidden="true" class="aal_anchor" id="aa-handling-user-agent-styles"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Handling User Agent Styles</h3> <p>To inform the browser UA stylesheet about the system color scheme preferences and tell it which color schemes are supported in the page, we can use the <code>color-scheme</code> meta tag.</p> <p>For example, let’s say the page should support both “dark” and “light” themes. We can put both of them as values in the meta tag, separated by spaces. If we only want to support a “light” theme, then we only need to use “light” as the value. This is discussed in a <a href="https://github.com/w3c/csswg-drafts/issues/3299" rel="noopener">CSSWG GitHub issue</a>, where it was originally proposed.</p> <pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt"><meta name="color-scheme" content="dark light"></code></pre> <p>When this meta tag is added, the browser takes the user’s color scheme preferences into consideration when rendering UA-controlled elements of the page (like a <code><button></code>). It renders colors for the root background, form controls, and spell-check features (as well as any other UA-controlled styles) based on the user’s preference.</p> <figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="2408" height="803" src="https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/06/jwtAqLmj.jpeg?fit=1024%2C341&ssl=1" alt="" class="wp-image-312293" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/jwtAqLmj.jpeg?w=2408&ssl=1 2408w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/jwtAqLmj.jpeg?resize=300%2C100&ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/jwtAqLmj.jpeg?resize=1024%2C341&ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/jwtAqLmj.jpeg?resize=768%2C256&ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/jwtAqLmj.jpeg?resize=1536%2C512&ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/jwtAqLmj.jpeg?resize=2048%2C683&ssl=1 2048w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/jwtAqLmj.jpeg?resize=1000%2C333&ssl=1 1000w" sizes="auto, (min-width: 735px) 864px, 96vw" /><figcaption><a href="https://dark-mode.glitch.me" rel="noopener">Source</a></figcaption></figure> <p>Although themes are manually styled for the most part (which overrides the UA styles), informing the browser about the supported themes helps to avoid even the slightest chance of a potential FOIT situation. This is true for those occasions where HTML has rendered but CSS is still waiting to load.</p> <p>We can also set this in CSS:</p> <pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">:root { color-scheme: light dark; /* both supported */ }</code></pre> <figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1298" height="1318" src="https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/06/color-scheme-comparison.png?fit=1008%2C1024&ssl=1" alt="" class="wp-image-313024" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/color-scheme-comparison.png?w=1298&ssl=1 1298w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/color-scheme-comparison.png?resize=295%2C300&ssl=1 295w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/color-scheme-comparison.png?resize=1008%2C1024&ssl=1 1008w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/color-scheme-comparison.png?resize=768%2C780&ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/color-scheme-comparison.png?resize=1000%2C1015&ssl=1 1000w" sizes="auto, (min-width: 735px) 864px, 96vw" /><figcaption>via <a href="https://blog.jim-nielsen.com/2020/color-scheme-property/" rel="noopener">Jim Nielsen</a></figcaption></figure> <p>At the time of writing, the <code>color-scheme</code> property <a href="https://caniuse.com/?feat=mdn-html_elements_meta_name_color-scheme" rel="noopener">lacks broad browser support</a>, though Safari and Chrome both support it.</p> <hr class="wp-block-separator"/> <h3 class="wp-block-heading" id="combining"><a href="#aa-combining-all-the-things" aria-hidden="true" class="aal_anchor" id="aa-combining-all-the-things"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Combining all the things!</h3> <p>Let’s combine everything and create a working demo that:</p> <ol class="wp-block-list"><li>Automatically loads a dark or light theme based on system preferences</li><li>Allows the user to manually override their system preference</li><li>Maintains the user’s preferred theme on page reloads</li></ol> <div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_BaNroxd" src="//codepen.io/anon/embed/BaNroxd?height=350&theme-id=1&slug-hash=BaNroxd&default-tab=result" height="350" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed BaNroxd" title="CodePen Embed BaNroxd" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div> <div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-6 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><h4 class="wp-block-heading" id="using-javascript-amp-local-storage"><a href="#aa-using-javascript-local-storage" aria-hidden="true" class="aal_anchor" id="aa-using-javascript-local-storage"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using JavaScript & Local Storage</h4> <pre rel="JavaScript" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt">// Select the button const btn = document.querySelector(".btn-toggle"); // Check for dark mode preference at the OS level const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");   // Get the user's theme preference from local storage, if it's available const currentTheme = localStorage.getItem("theme"); // If the user's preference in localStorage is dark... if (currentTheme == "dark") {   // ...let's toggle the .dark-theme class on the body   document.body.classList.toggle("dark-mode"); // Otherwise, if the user's preference in localStorage is light... } else if (currentTheme == "light") {   // ...let's toggle the .light-theme class on the body   document.body.classList.toggle("light-mode"); }   // Listen for a click on the button  btn.addEventListener("click", function() {   // If the user's OS setting is dark and matches our .dark-mode class...   if (prefersDarkScheme.matches) {     // ...then toggle the light mode class     document.body.classList.toggle("light-mode");     // ...but use .dark-mode if the .light-mode class is already on the body,     var theme = document.body.classList.contains("light-mode") ? "light" : "dark";   } else {     // Otherwise, let's do the same thing, but for .dark-mode     document.body.classList.toggle("dark-mode");     var theme = document.body.classList.contains("dark-mode") ? "dark" : "light";   }   // Finally, let's save the current preference to localStorage to keep using it   localStorage.setItem("theme", theme); });</code></pre> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><h4 class="wp-block-heading" id="using-php-amp-cookies"><a href="#aa-using-php-cookies" aria-hidden="true" class="aal_anchor" id="aa-using-php-cookies"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using PHP & Cookies</h4> <pre rel="PHP" class="wp-block-csstricks-code-block language-javascript" data-line=""><code markup="tt"><?php $themeClass = ''; if (!empty($_COOKIE['theme'])) {   if ($_COOKIE['theme'] == 'dark') {     $themeClass = 'dark-theme';   } else if ($_COOKIE['theme'] == 'light') {     $themeClass = 'light-theme';   }   } ?>   <!DOCTYPE html> <html lang="en">  <body class="<?php echo $themeClass; ?>">  <script>   const btn = document.querySelector(".btn-toggle");   const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");      btn.addEventListener("click", function() {     if (prefersDarkScheme.matches) {       document.body.classList.toggle("light-mode");       var theme = document.body.classList.contains("light-mode") ? "light" : "dark";     } else {       document.body.classList.toggle("dark-mode");       var theme = document.body.classList.contains("dark-mode") ? "dark" : "light";     }     document.cookie = "theme=" + theme;   }); </script> </body> </html></code></pre> </div> </div> <hr class="wp-block-separator"/> <h3 class="wp-block-heading" id="design"><a href="#aa-design-considerations" aria-hidden="true" class="aal_anchor" id="aa-design-considerations"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Design Considerations</h3> <p>I often hear that implementing dark mode is easier than designing one. While I’ll refrain from judgement, let’s look at some considerations for designing a dark theme.</p> <p>You already know the basic task: swap lighter color values for darker ones and vice versa. But there are some UI elements and enhancements that are more nuanced and require more attention. Let’s take a look at those.</p> <h4 class="wp-block-heading" id="dark-mode-images"><a href="#aa-dark-mode-images" aria-hidden="true" class="aal_anchor" id="aa-dark-mode-images"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><strong>Dark Mode Images</strong></h4> <p>A good rule is to decrease the brightness and contrast of images a bit so that it looks comfortable to the eyes when it’s against a dark background. A super bright image on a super dark background can be jarring and dimming the image reduces some of that heavy contrast.</p> <figure class="wp-block-jetpack-image-compare test-comparison-slider"><div class="juxtapose" data-mode="horizontal"><img data-recalc-dims="1" loading="lazy" decoding="async" id="314941" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/image-optimized-1.png?resize=1102%2C780&ssl=1" alt="" width="1102" height="780" class="image-compare__image-before"/><img data-recalc-dims="1" loading="lazy" decoding="async" id="314942" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/image-normal-1.png?resize=1102%2C780&ssl=1" alt="" width="1102" height="780" class="image-compare__image-after"/></div></figure> <p>The CSS <code><a href="https://css-tricks.com/almanac/properties/f/filter/">filter()</a></code> function is more than capable of handling this for us:</p> <pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* Apply the filter directly on the body tag */ body.dark-theme img {   filter: brightness(.8) contrast(1.2); }   /* Or apply it via media query */ @media (prefers-color-scheme: dark) {   img {     filter: brightness(.8) contrast(1.2);   } }</code></pre> <p>We can do the same sort of thing directly in the markup using the <code><picture></code> element to load different versions of an image:</p> <pre rel="HTML" class="wp-block-csstricks-code-block language-markup" data-line=""><code markup="tt"><picture>      <source srcset="photo-light.png" media="(prefers-color-scheme: light) or (prefers-color-scheme: no-preference)">      <source srcset="photo-dark.png" media="(prefers-color-scheme: dark)"> </picture></code></pre> <p>The downside here is that it requires supplying two files where we only have to deal with one when using CSS. This also doesn’t fully account for the user toggling the color theme on the site.</p> <h4 class="wp-block-heading" id="dark-mode-shadows"><a href="#aa-dark-mode-shadows" aria-hidden="true" class="aal_anchor" id="aa-dark-mode-shadows"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Dark Mode Shadows</h4> <p>Dark mode shadows are tricky. If we simply invert a dark shadow using light colors, then we get this funky thing with a light shadow on a dark background… and it’s not a good look.</p> <figure class="wp-block-jetpack-image-compare test-comparison-slider"><div class="juxtapose" data-mode="horizontal"><img data-recalc-dims="1" loading="lazy" decoding="async" id="314936" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/white-shadow-fixed-2.png?resize=726%2C386&ssl=1" alt="" width="726" height="386" class="image-compare__image-before"/><img data-recalc-dims="1" loading="lazy" decoding="async" id="314937" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/white-shadow-2.png?resize=726%2C386&ssl=1" alt="" width="726" height="386" class="image-compare__image-after"/></div></figure> <p>It’s possible to use a dark shadow in dark mode, but the background color has to be “light” enough (like a dark gray) to provide enough contrast to actually see the shadow against it. </p> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">🔥 When implementing dark mode, don’t throw away the visual cues in the light version by naively inverting the color scheme.<br><br>Close elements should still be lighter and distant elements should still be darker – even in a dark UI. <a href="https://t.co/RNxgIppDmn">pic.twitter.com/RNxgIppDmn</a></p>— Steve Schoger (@steveschoger) <a href="https://twitter.com/steveschoger/status/1151160261170126850?ref_src=twsrc%5Etfw" rel="noopener">July 16, 2019</a></blockquote> <p>Use opacity to convey depth, with high opacity regions having a lower depth. That’s to say, elements that have a higher elevation should have a lower opacity than elements that are “closer” in depth to the background.</p> <figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="3044" height="1116" src="https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/06/depth-4.png?fit=1024%2C375&ssl=1" alt="" class="wp-image-315202" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/depth-4.png?w=3044&ssl=1 3044w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/depth-4.png?resize=300%2C110&ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/depth-4.png?resize=1024%2C375&ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/depth-4.png?resize=768%2C282&ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/depth-4.png?resize=1536%2C563&ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/depth-4.png?resize=2048%2C751&ssl=1 2048w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/depth-4.png?resize=1000%2C367&ssl=1 1000w" sizes="auto, (min-width: 735px) 864px, 96vw" /><figcaption>Different shades of color create different perceptions of “depth”</figcaption></figure> <h4 class="wp-block-heading" id="dark-mode-typography"><a href="#aa-dark-mode-typography" aria-hidden="true" class="aal_anchor" id="aa-dark-mode-typography"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Dark Mode Typography</h4> <p>The trick here is a lot like images: we’ve gotta balance the contrast. Use too heavy of a font and we get blaring text that’s makes us want to move away from the screen. Use too light of a font and we’ll strain our eyes while inching toward the screen to get a closer look.</p> <figure class="wp-block-jetpack-image-compare test-comparison-slider"><div class="juxtapose" data-mode="horizontal"><img data-recalc-dims="1" loading="lazy" decoding="async" id="315199" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/typo-thick-3.png?resize=1516%2C1832&ssl=1" alt="" width="1516" height="1832" class="image-compare__image-before"/><img data-recalc-dims="1" loading="lazy" decoding="async" id="315198" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/typo-thin-4.png?resize=1137%2C1374&ssl=1" alt="" width="1137" height="1374" class="image-compare__image-after"/></div></figure> <p>The balance is somewhere in the middle. <a href="https://css-tricks.com/dark-mode-and-variable-fonts/">Robin has a nice write-up</a> where he suggests a small bit of CSS that makes a big difference in legibility.</p> <h4 class="wp-block-heading" id="dark-mode-icons"><a href="#aa-dark-mode-icons" aria-hidden="true" class="aal_anchor" id="aa-dark-mode-icons"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Dark Mode Icons</h4> <p>Icons fall into this “tricky” category because they’re sort of a cross between text and images. If we’re working with SVG icons, though, we can change the fill with CSS. On the other hand, if we’re using font icons, we can simply change the color property instead.</p> <pre rel="CSS" class="wp-block-csstricks-code-block language-css" data-line=""><code markup="tt">/* SVG icon */ body.dark-theme svg.icon path {   fill: #efefef; } /* Font icon (using Font Awesome as an example) */ body.dark-theme .fa {   color: #efefef; }</code></pre> <p>A lot of the same design considerations that are true for text, are also generally applicable to icons. For example, we ought to avoid using full white and heavy outlines.</p> <h4 class="wp-block-heading" id="dark-mode-colors"><a href="#aa-dark-mode-colors" aria-hidden="true" class="aal_anchor" id="aa-dark-mode-colors"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Dark Mode Colors</h4> <p>Pure white text on a pure black background will look jarring. The trick here is to use an off-white for the text and off-black for the background. <a href="https://material.io/design/color/dark-theme.html" rel="noopener">Material Design Guidelines</a> for example recommends <code>#121212</code> for the background.</p> <figure class="wp-block-jetpack-image-compare test-comparison-slider"><div class="juxtapose" data-mode="horizontal"><img data-recalc-dims="1" loading="lazy" decoding="async" id="315187" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/bkg-fixed-3.png?resize=1137%2C1374&ssl=1" alt="" width="1137" height="1374" class="image-compare__image-before"/><img data-recalc-dims="1" loading="lazy" decoding="async" id="315186" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/bkg-3.png?resize=1137%2C1374&ssl=1" alt="" width="1137" height="1374" class="image-compare__image-after"/></div></figure> <h4 class="wp-block-heading" id="dark-mode-color-palettes"><a href="#aa-dark-mode-color-palettes" aria-hidden="true" class="aal_anchor" id="aa-dark-mode-color-palettes"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Dark Mode Color Palettes</h4> <p>We’ve seen the difference using off-white and off-black colors makes for text and images. Let’s expand on that a bit with tips on how to develop a full color palette.</p> <p>Most things boil down to one thing: <strong>contrast</strong>. That’s why the first tip before settling on any color is to run ideas through a contrast checker to ensure color ratios conform to WCAG’s guidelines for at least a AA rating, <a href="https://css-tricks.com/understanding-web-accessibility-color-contrast-guidelines-and-ratios/">which is a contrast ratio of 4.5:1</a>.</p> <p>That means desaturated colors are our friends when working with a dark mode design. They help prevent overbearingly bright images and still give us plenty of room to create an effective contrast ratio.</p> <figure class="wp-block-jetpack-image-compare test-comparison-slider"><div class="juxtapose" data-mode="horizontal"><img data-recalc-dims="1" loading="lazy" decoding="async" id="315013" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/desaturate-fixed-4.png?resize=936%2C868&ssl=1" alt="" width="936" height="868" class="image-compare__image-before"/><img data-recalc-dims="1" loading="lazy" decoding="async" id="315014" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/desaturate-3.png?resize=936%2C868&ssl=1" alt="" width="936" height="868" class="image-compare__image-after"/></div></figure> <p>Next, remember that accent colors are meant to be enhancements. They’re likely brighter than the dark theme background color, so using them like a primary color or the background color of a large container is just as jarring and hard on the eyes as a bright image or heavy white text.</p> <figure class="wp-block-jetpack-image-compare test-comparison-slider"><div class="juxtapose" data-mode="horizontal"><img data-recalc-dims="1" loading="lazy" decoding="async" id="314988" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/color-blob-fixed-1.png?resize=800%2C740&ssl=1" alt="" width="800" height="740" class="image-compare__image-before"/><img data-recalc-dims="1" loading="lazy" decoding="async" id="314989" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/color-blob-2.png?resize=800%2C740&ssl=1" alt="" width="800" height="740" class="image-compare__image-after"/></div></figure> <p>If contrast is the balance we’re trying to strike, then remember that dark mode is more than blacks and grays. What about dark blue background with pale yellow text? Or dark brown with tan? There’s an entire (and <a href="https://css-tricks.com/the-expanding-gamut-of-color-on-the-web/">growing</a>) spectrum of color out there and we can leverage any part of it to fuel creativity.</p> <p>A few examples of colors that are dark without resorting to full-on black:</p> <div class="dark-mode-color-swatch"> <div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:30%"> <p class="has-text-align-center ticss-ca61bce3 has-very-light-gray-color has-text-color has-background" style="background-color:#232b32">#232B32</p> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <p class="has-text-align-center ticss-ca61bce3 has-very-light-gray-color has-text-color has-background" style="background-color:#15202b">#152028</p> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"> <p class="has-text-align-center ticss-ca61bce3 has-very-light-gray-color has-text-color has-background" style="background-color:#202945">#202945</p> </div> </div> </div> <p><a href="https://material.io/design/color/dark-theme.html" rel="noopener">Material Design’s guidelines on dark mode</a> is a handy resource on best practices for dark mode design. It’s definitely worth a read for more tips to keep in mind.</p> <h3 class="wp-block-heading" id="in-the-wild"><a href="#aa-dark-mode-in-the-wild" aria-hidden="true" class="aal_anchor" id="aa-dark-mode-in-the-wild"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Dark Mode in the Wild</h3> <div class="wp-block-jetpack-slideshow aligncenter" data-effect="slide"><div class="wp-block-jetpack-slideshow_container swiper-container"><ul class="wp-block-jetpack-slideshow_swiper-wrapper swiper-wrapper"><li class="wp-block-jetpack-slideshow_slide swiper-slide"><figure><img data-recalc-dims="1" loading="lazy" decoding="async" width="1024" height="782" alt="" class="wp-block-jetpack-slideshow_image wp-image-312352" data-id="312352" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.04.48-PM.png?resize=1024%2C782&ssl=1" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.04.48-PM.png?resize=1024%2C782&ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.04.48-PM.png?resize=300%2C229&ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.04.48-PM.png?resize=768%2C587&ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.04.48-PM.png?resize=1536%2C1174&ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.04.48-PM.png?resize=2048%2C1565&ssl=1 2048w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.04.48-PM.png?resize=1000%2C764&ssl=1 1000w" sizes="auto, (min-width: 735px) 864px, 96vw" /><figcaption class="wp-block-jetpack-slideshow_caption gallery-caption">DuckDuckGo</figcaption></figure></li><li class="wp-block-jetpack-slideshow_slide swiper-slide"><figure><img data-recalc-dims="1" loading="lazy" decoding="async" width="1024" height="782" alt="" class="wp-block-jetpack-slideshow_image wp-image-312348" data-id="312348" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.03.46-PM.png?resize=1024%2C782&ssl=1" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.03.46-PM.png?resize=1024%2C782&ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.03.46-PM.png?resize=300%2C229&ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.03.46-PM.png?resize=768%2C587&ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.03.46-PM.png?resize=1536%2C1174&ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.03.46-PM.png?resize=2048%2C1565&ssl=1 2048w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.03.46-PM.png?resize=1000%2C764&ssl=1 1000w" sizes="auto, (min-width: 735px) 864px, 96vw" /><figcaption class="wp-block-jetpack-slideshow_caption gallery-caption">Twitter</figcaption></figure></li><li class="wp-block-jetpack-slideshow_slide swiper-slide"><figure><img data-recalc-dims="1" loading="lazy" decoding="async" width="1024" height="782" alt="" class="wp-block-jetpack-slideshow_image wp-image-312347" data-id="312347" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.02.30-PM.png?resize=1024%2C782&ssl=1" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.02.30-PM.png?resize=1024%2C782&ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.02.30-PM.png?resize=300%2C229&ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.02.30-PM.png?resize=768%2C587&ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.02.30-PM.png?resize=1536%2C1174&ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.02.30-PM.png?resize=2048%2C1565&ssl=1 2048w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.02.30-PM.png?resize=1000%2C764&ssl=1 1000w" sizes="auto, (min-width: 735px) 864px, 96vw" /><figcaption class="wp-block-jetpack-slideshow_caption gallery-caption">YouTube</figcaption></figure></li><li class="wp-block-jetpack-slideshow_slide swiper-slide"><figure><img data-recalc-dims="1" loading="lazy" decoding="async" width="1024" height="782" alt="" class="wp-block-jetpack-slideshow_image wp-image-312351" data-id="312351" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.16.55-PM.png?resize=1024%2C782&ssl=1" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.16.55-PM.png?resize=1024%2C782&ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.16.55-PM.png?resize=300%2C229&ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.16.55-PM.png?resize=768%2C587&ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.16.55-PM.png?resize=1536%2C1174&ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.16.55-PM.png?resize=2048%2C1565&ssl=1 2048w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.16.55-PM.png?resize=1000%2C764&ssl=1 1000w" sizes="auto, (min-width: 735px) 864px, 96vw" /><figcaption class="wp-block-jetpack-slideshow_caption gallery-caption">Slack</figcaption></figure></li><li class="wp-block-jetpack-slideshow_slide swiper-slide"><figure><img data-recalc-dims="1" loading="lazy" decoding="async" width="1024" height="782" alt="" class="wp-block-jetpack-slideshow_image wp-image-312349" data-id="312349" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.03.23-PM.png?resize=1024%2C782&ssl=1" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.03.23-PM.png?resize=1024%2C782&ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.03.23-PM.png?resize=300%2C229&ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.03.23-PM.png?resize=768%2C587&ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.03.23-PM.png?resize=1536%2C1174&ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.03.23-PM.png?resize=2048%2C1565&ssl=1 2048w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.03.23-PM.png?resize=1000%2C764&ssl=1 1000w" sizes="auto, (min-width: 735px) 864px, 96vw" /><figcaption class="wp-block-jetpack-slideshow_caption gallery-caption">Slack</figcaption></figure></li><li class="wp-block-jetpack-slideshow_slide swiper-slide"><figure><img data-recalc-dims="1" loading="lazy" decoding="async" width="1024" height="782" alt="" class="wp-block-jetpack-slideshow_image wp-image-312350" data-id="312350" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.03.36-PM.png?resize=1024%2C782&ssl=1" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.03.36-PM.png?resize=1024%2C782&ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.03.36-PM.png?resize=300%2C229&ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.03.36-PM.png?resize=768%2C587&ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.03.36-PM.png?resize=1536%2C1174&ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.03.36-PM.png?resize=2048%2C1565&ssl=1 2048w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.03.36-PM.png?resize=1000%2C764&ssl=1 1000w" sizes="auto, (min-width: 735px) 864px, 96vw" /><figcaption class="wp-block-jetpack-slideshow_caption gallery-caption">Dropbox Paper</figcaption></figure></li><li class="wp-block-jetpack-slideshow_slide swiper-slide"><figure><img data-recalc-dims="1" loading="lazy" decoding="async" width="1024" height="782" alt="" class="wp-block-jetpack-slideshow_image wp-image-312346" data-id="312346" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.02.20-PM.png?resize=1024%2C782&ssl=1" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.02.20-PM.png?resize=1024%2C782&ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.02.20-PM.png?resize=300%2C229&ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.02.20-PM.png?resize=768%2C587&ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.02.20-PM.png?resize=1536%2C1174&ssl=1 1536w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.02.20-PM.png?resize=2048%2C1565&ssl=1 2048w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-03-at-3.02.20-PM.png?resize=1000%2C764&ssl=1 1000w" sizes="auto, (min-width: 735px) 864px, 96vw" /><figcaption class="wp-block-jetpack-slideshow_caption gallery-caption">Simplenote</figcaption></figure></li></ul><a class="wp-block-jetpack-slideshow_button-prev swiper-button-prev swiper-button-white" role="button"></a><a class="wp-block-jetpack-slideshow_button-next swiper-button-next swiper-button-white" role="button"></a><a aria-label="Pause Slideshow" class="wp-block-jetpack-slideshow_button-pause" role="button"></a><div class="wp-block-jetpack-slideshow_pagination swiper-pagination swiper-pagination-white"></div></div></div> <p>YouTube uses the CSS variables technique. They’ve defined all their colors in variables under the html selector while dark mode colors are defined under <code>html:not(.style-scope)[dark]</code>. When dark mode is enabled, YouTube adds a <code>dark="true"</code> attribute to the <code><html></code> tag. This is what they use to override the variables defined in the HTML.</p> <figure class="wp-block-image size-large is-resized"><img data-recalc-dims="1" loading="lazy" decoding="async" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/b0FBHzyc-1-e1593210129104-1024x991.png?resize=768%2C743&ssl=1" alt="" class="wp-image-315030" width="768" height="743" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/b0FBHzyc-1-e1593210129104.png?resize=1024%2C991&ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/b0FBHzyc-1-e1593210129104.png?resize=300%2C290&ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/b0FBHzyc-1-e1593210129104.png?resize=768%2C744&ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/b0FBHzyc-1-e1593210129104.png?resize=1000%2C968&ssl=1 1000w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/b0FBHzyc-1-e1593210129104.png?w=1164&ssl=1 1164w" sizes="auto, (min-width: 735px) 864px, 96vw" /><figcaption>YouTube adds <code>dark=true</code> attribute to the <code><html></code> when it switches to the dark mode.</figcaption></figure> <p>In the wild, the CSS custom properties approach seems to be most popular. It’s being used by Dropbox Paper, Slack, and Facebook.</p> <p><a href="https://simplenote.com/" rel="noopener">Simplenote</a> uses the class-swapping method where all light style rules are descendants of a <code>.theme-light</code> parent class and all the dark styles fall under a <code>.theme-dark</code> class. When the theme is toggled, the appropriate class is applied to the <code><body></code> tag.</p> <figure class="wp-block-image size-large is-resized"><img data-recalc-dims="1" loading="lazy" decoding="async" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/UsbhAk5g-1-e1593210246404-1024x1003.png?resize=768%2C752&ssl=1" alt="" class="wp-image-315033" width="768" height="752" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/UsbhAk5g-1-e1593210246404.png?resize=1024%2C1003&ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/UsbhAk5g-1-e1593210246404.png?resize=300%2C294&ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/UsbhAk5g-1-e1593210246404.png?resize=768%2C752&ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/UsbhAk5g-1-e1593210246404.png?resize=1000%2C980&ssl=1 1000w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/UsbhAk5g-1-e1593210246404.png?w=1174&ssl=1 1174w" sizes="auto, (min-width: 735px) 864px, 96vw" /><figcaption>Simplenote uses two classes: <code>.light-theme</code> and <code>.dark-theme</code> to style the themes.</figcaption></figure> <p>Twitter goes the extra mile and offers several themes to choose from: “Default,” “Dim,” and “Lights out.” The “Dim” option employs dark blue for a background color. Compare that to “Lights out” which uses a stark black.</p> <figure class="wp-block-image size-large is-resized"><img data-recalc-dims="1" loading="lazy" decoding="async" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/0cDi_Rnw.png?resize=768%2C331&ssl=1" alt="" class="wp-image-312326" width="768" height="331" srcset="https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/0cDi_Rnw.png?resize=1024%2C441&ssl=1 1024w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/0cDi_Rnw.png?resize=300%2C129&ssl=1 300w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/0cDi_Rnw.png?resize=768%2C331&ssl=1 768w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/0cDi_Rnw.png?resize=1000%2C431&ssl=1 1000w, https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/0cDi_Rnw.png?w=1218&ssl=1 1218w" sizes="auto, (min-width: 735px) 864px, 96vw" /><figcaption>Twitter offers three themes to choose from.</figcaption></figure> <hr class="wp-block-separator"/> <h3 class="wp-block-heading" id="decide"><a href="#aa-dark-mode-or-no-dark-mode-that-is-the-question" aria-hidden="true" class="aal_anchor" id="aa-dark-mode-or-no-dark-mode-that-is-the-question"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Dark mode or no dark mode? That is the question.</h3> <p>There are perfectly valid reasons on both sides. Some of those reasons even go beyond the scope of user experience and include things like timing, budget and resources.</p> <p>While being considerate of why you might not want to implement a dark mode, here are reasons why you might want to have one:</p> <ul class="wp-block-list"><li>It’s cool and trendy (although that’s not a reason alone to do it)</li><li>It enhances accessibility by supporting users who are sensitive to eye strain in starkly bright themes.</li><li>It allows users to decide the most comfortable way to consume content while providing us a way to maintain control over the look and feel of things. Remember, we want to <a href="https://css-tricks.com/reader-mode-the-button-to-beat/">beat the Reader Mode button</a>!</li><li>It helps to preserve battery life for devices with OLED screen where brighter colors consume more energy.</li><li>It’s extremely popular and appears to be going nowhere. It’s possible that your users who prefer a dark mode (like me!) will expect your site to have one. Might as well be ready for it.</li></ul> <p></p> </div> </article> </main> <aside class="entry-unrelated sidebar"> <div id="scroll-ad-position"></div> <div class="toc"> <h2 class="toc-heading"> <svg viewBox="0 0 175 35"> <text fill="#fff" x="0" y="30">TOC</text> </svg> </h2> <ol class="toc-list"> <li class="toc-link"> <a href="#aa-toggling-themes">Toggling Themes</a> </li><li class="toc-link"> <a href="#aa-which-method-should-you-choose">Which method should you choose?</a> </li><li class="toc-link"> <a href="#aa-dark-mode-at-the-operating-system-level">Dark Mode at the Operating System Level</a> </li><li class="toc-link"> <a href="#aa-storing-a-users-preference">Storing a User's Preference</a> </li><li class="toc-link"> <a href="#aa-handling-user-agent-styles">Handling User Agent Styles</a> </li><li class="toc-link"> <a href="#aa-combining-all-the-things">Combining all the things!</a> </li><li class="toc-link"> <a href="#aa-design-considerations">Design Considerations</a> </li><li class="toc-link"> <a href="#aa-dark-mode-images">Dark Mode Images</a> </li><li class="toc-link"> <a href="#aa-dark-mode-shadows">Dark Mode Shadows</a> </li><li class="toc-link"> <a href="#aa-dark-mode-typography">Dark Mode Typography</a> </li><li class="toc-link"> <a href="#aa-dark-mode-icons">Dark Mode Icons</a> </li><li class="toc-link"> <a href="#aa-dark-mode-colors">Dark Mode Colors</a> </li><li class="toc-link"> <a href="#aa-dark-mode-color-palettes">Dark Mode Color Palettes</a> </li><li class="toc-link"> <a href="#aa-dark-mode-in-the-wild">Dark Mode in the Wild</a> </li><li class="toc-link"> <a href="#aa-dark-mode-or-no-dark-mode-that-is-the-question">Dark mode or no dark mode? That is the question.</a> </li></ol> </div> <div id="all-modules"></div> </aside> </div> <div class="related-ads-comments-wrap"> <div class="related-ads-comments"> <div class="articles-and-sidebar"> <div class="after-article-note article-sponsor"> <em>Psst!</em> Create a DigitalOcean account and get <a href="https://try.digitalocean.com/css-tricks/?utm_medium=content_acq&utm_source=css-tricks&utm_campaign=global_brand_ad_en&utm_content=conversion_postarticle_psst">$200 in free credit</a> for cloud-based hosting and services. </div> </div> <section class="respond-area"> <h2 class="comments-title" id="comments"> <span>Comments</span> </h2> <ol class="commentlist" id="commentlist"> <li class="comment even thread-even depth-1 featured" id="li-comment-1758659"> <div class="comment-wrap" id="comment-1758659"> <div class="comment-author-wrap"> <div class="comment-author">Chris Heilmann</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1758659"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2020-07-01T08:05:17-06:00">July 1, 2020</time></div> </div> <div class="comment-content"> <p>Also worth mentioning that developer tools have an option to toggle dark and light mode without having to change the operating system if you want to check if your detection works.<br /> In Chromium Based browsers (Microsoft Edge/Chrome/Brave…) you can do that in the rendering menu or with a keyboard shortcut:<br /> <a href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/accessibility/preferred-color-scheme-simulation" rel="nofollow ugc">https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/accessibility/preferred-color-scheme-simulation</a></p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1758659-674ba7282196a' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1758659&origin=css-tricks.com&obj_id=45537868-1758659-674ba7282196a' data-name='like-comment-frame-45537868-1758659-674ba7282196a'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment byuser comment-author-mohamedadhuham bypostauthor odd alt depth-2" id="li-comment-1758665"> <div class="comment-wrap" id="comment-1758665"> <div class="comment-author-wrap"> <div class="comment-author">Adhuham</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1758665"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2020-07-01T11:04:23-06:00">July 1, 2020</time></div> </div> <div class="comment-content"> <p>Yeah! That would be really handy.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1758665-674ba72822379' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1758665&origin=css-tricks.com&obj_id=45537868-1758665-674ba72822379' data-name='like-comment-frame-45537868-1758665-674ba72822379'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-1758711"> <div class="comment-wrap" id="comment-1758711"> <div class="comment-author-wrap"> <div class="comment-author">Chris Morgan</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1758711"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2020-07-02T02:41:22-06:00">July 2, 2020</time></div> </div> <div class="comment-content"> <p>There’s a major problem with this article: all of the options described require JavaScript to take effect.</p> <p>A <em>much</em> better technique for client-side resolution of dark mode is to use the actual media query, and then have your toggle modify the media query, rather than adding or removing classes.</p> <p>The end result is that dark mode will work even if JavaScript is disabled, and that you’re even less likely to get a flash of incorrect theme than before.</p> <p>I use this technique on my own website and wrote about it at <a href="https://chrismorgan.info/blog/dark-theme-implementation/" rel="nofollow ugc">https://chrismorgan.info/blog/dark-theme-implementation/</a>.</p> <p>One other matter: this example is incorrect:</p> <pre><code><picture>  <source srcset="photo-light.png" media="(prefers-color-scheme: light) or (prefers-color-scheme: no-preference)">  <source srcset="photo-dark.png" media="(prefers-color-scheme: dark)"> </picture> </code></pre> <p><code><picture></code> MUST have one <code><img></code> child, so that if none of the sources match there’s still something to show. As it is, older browsers that don’t support <code>(prefers-color-scheme)</code> would get no image at all. Also more values could be added in the future; so <code>not all and (prefers-color-scheme: dark)</code> would be better than <code>(prefers-color-scheme: light)</code> anyway. (<code>no-preference</code> got dropped from the spec, BTW; UAs default to <code>light</code> now.)</p> <p>So the example should be this instead:</p> <pre><code><picture> <source srcset="photo-dark.png" media="(prefers-color-scheme: dark)"> <img src="photo-light.png"> </picture> </code></pre> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1758711-674ba728228f4' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1758711&origin=css-tricks.com&obj_id=45537868-1758711-674ba728228f4' data-name='like-comment-frame-45537868-1758711-674ba728228f4'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment byuser comment-author-mohamedadhuham bypostauthor odd alt depth-2" id="li-comment-1758876"> <div class="comment-wrap" id="comment-1758876"> <div class="comment-author-wrap"> <div class="comment-author">Adhuham</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1758876"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2020-07-04T19:17:44-06:00">July 4, 2020</time></div> </div> <div class="comment-content"> <p>Hey Chris,</p> <p>That’s an interesting technique. Thanks for sharing. :)</p> <p>Unfortunately, I don’t quite understand how that would exactly prevent <em>FLIC</em> situation, as you still have to use JavaScript for query modification and everything. Maybe I am missing something?!</p> <p>The article do talk about using <code>prefers-color-scheme</code> media query to account for system preferences–which should work even if JS is disabled. But still, JS comes into play when you need to give the user manual control over their theme preference (ie. overriding the system preference).</p> <p>You’re right about the <code><picture></code>. That looks much better! Thanks for pointing out.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1758876-674ba72822e80' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1758876&origin=css-tricks.com&obj_id=45537868-1758876-674ba72822e80' data-name='like-comment-frame-45537868-1758876-674ba72822e80'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment even thread-even depth-1" id="li-comment-1758722"> <div class="comment-wrap" id="comment-1758722"> <div class="comment-author-wrap"> <div class="comment-author">John Vieth</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1758722"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2020-07-02T05:53:35-06:00">July 2, 2020</time></div> </div> <div class="comment-content"> <p>Why doesn’t this article have a dark mode option? Pfft… :)</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1758722-674ba728232a0' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1758722&origin=css-tricks.com&obj_id=45537868-1758722-674ba728232a0' data-name='like-comment-frame-45537868-1758722-674ba728232a0'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-1758735"> <div class="comment-wrap" id="comment-1758735"> <div class="comment-author-wrap"> <div class="comment-author">Kel</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1758735"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2020-07-02T10:02:43-06:00">July 2, 2020</time></div> </div> <div class="comment-content"> <p>No. <em>This</em> is dark mode.<br /> <a href="https://tonsky.me" rel="nofollow ugc">https://tonsky.me</a></p> <p>:)</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1758735-674ba72823d43' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1758735&origin=css-tricks.com&obj_id=45537868-1758735-674ba72823d43' data-name='like-comment-frame-45537868-1758735-674ba72823d43'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment byuser comment-author-mohamedadhuham bypostauthor even depth-2" id="li-comment-1758782"> <div class="comment-wrap" id="comment-1758782"> <div class="comment-author-wrap"> <div class="comment-author">Adhuham</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1758782"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2020-07-03T00:41:57-06:00">July 3, 2020</time></div> </div> <div class="comment-content"> <p>That’s a clever dark mode implementation alright!</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1758782-674ba7282423c' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1758782&origin=css-tricks.com&obj_id=45537868-1758782-674ba7282423c' data-name='like-comment-frame-45537868-1758782-674ba7282423c'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt depth-2" id="li-comment-1795879"> <div class="comment-wrap" id="comment-1795879"> <div class="comment-author-wrap"> <div class="comment-author">Paul Drewett</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1795879"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2022-05-27T10:43:30-06:00">May 27, 2022</time></div> </div> <div class="comment-content"> <p>That is the greatest dark mode I have ever seen :-)</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1795879-674ba728246c9' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1795879&origin=css-tricks.com&obj_id=45537868-1795879-674ba728246c9' data-name='like-comment-frame-45537868-1795879-674ba728246c9'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment even thread-even depth-1" id="li-comment-1759033"> <div class="comment-wrap" id="comment-1759033"> <div class="comment-author-wrap"> <div class="comment-author">Alexander Sandberg</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1759033"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2020-07-06T22:30:43-06:00">July 6, 2020</time></div> </div> <div class="comment-content"> <p>Really great and detailed article! :)</p> <p>I think it’s missing a way to switch themes using CSS only, however. Might be useful since not everyone has access to JavaScript, or just for the fun of it!</p> <p>I wrote a post sometime ago on how one can achieve this, which might be interesting to some readers: <a href="https://alexandersandberg.com/theme-switcher/" rel="nofollow ugc">https://alexandersandberg.com/theme-switcher/</a></p> <p>Here’s the source code: <a href="https://github.com/alexandersandberg/theme-switcher" rel="nofollow ugc">https://github.com/alexandersandberg/theme-switcher</a></p> <p>It’s a technique using checkboxes (or radio buttons if more than 2 themes) and some CSS selector magic to switch between the themes. It’s accessible as well, which is a huge plus.</p> <p>To store the user’s theme preference, a little bit of JavaScript is still required, sadly.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1759033-674ba72824ad7' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1759033&origin=css-tricks.com&obj_id=45537868-1759033-674ba72824ad7' data-name='like-comment-frame-45537868-1759033-674ba72824ad7'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-1759229"> <div class="comment-wrap" id="comment-1759229"> <div class="comment-author-wrap"> <div class="comment-author">Mike</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1759229"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2020-07-08T01:53:08-06:00">July 8, 2020</time></div> </div> <div class="comment-content"> <p>Excellent comprehensive article there fellah!</p> <p>Unfortunately the “Combining all the things!” demo works in Firefox, but not in Chrome.<br /> I already had OS set to dark mode (in case its part of the issue).</p> <p>My take: [Light & dark mode, with user-switch button](<a href="https://codepen.io/2kool2/pen/abzgPzJ" rel="nofollow ugc">https://codepen.io/2kool2/pen/abzgPzJ</a>)</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1759229-674ba72824f47' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1759229&origin=css-tricks.com&obj_id=45537868-1759229-674ba72824f47' data-name='like-comment-frame-45537868-1759229-674ba72824f47'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-1759300"> <div class="comment-wrap" id="comment-1759300"> <div class="comment-author-wrap"> <div class="comment-author">Andreas</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1759300"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2020-07-08T14:38:51-06:00">July 8, 2020</time></div> </div> <div class="comment-content"> <p>For a “complete” guide the high contrast mode is missing. The forced-color query is our friend here.</p> <p>Just call it ultra dark mode and an a11y topic sound cool and fits to the article</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1759300-674ba728252de' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1759300&origin=css-tricks.com&obj_id=45537868-1759300-674ba728252de' data-name='like-comment-frame-45537868-1759300-674ba728252de'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-1759719"> <div class="comment-wrap" id="comment-1759719"> <div class="comment-author-wrap"> <div class="comment-author">dilmodev</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1759719"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2020-07-12T16:10:30-06:00">July 12, 2020</time></div> </div> <div class="comment-content"> <p>Awesome article, I love CSS tricks!</p> <p>I wrote a blog post on how to accomplish dark mode using react and react hooks along with styled components.</p> <p>Check out the post <a href="https://www.dilmodev.com/implementing-dark-mode/" rel="nofollow ugc">here</a> if it would be helpful to you.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1759719-674ba72825551' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1759719&origin=css-tricks.com&obj_id=45537868-1759719-674ba72825551' data-name='like-comment-frame-45537868-1759719-674ba72825551'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment byuser comment-author-chriscoyier even thread-even depth-1" id="li-comment-1759752"> <div class="comment-wrap" id="comment-1759752"> <div class="comment-author-wrap"> <div class="comment-author">Chris Coyier</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1759752"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2020-07-13T06:32:06-06:00">July 13, 2020</time></div> </div> <div class="comment-content"> <p>Some Dark Mode links I’ve had saved up…</p> <ul> <li>Kilian Valkhof: <a href="https://kilianvalkhof.com/2020/design/your-dark-mode-toggle-is-broken/" rel="nofollow ugc">Your dark mode toggle is broken</a><br /> <blockquote><p> Just like prefers-color-scheme toggles between three states, your dark mode toggle should also toggle between three states: light, dark, <strong>system</strong> </p></blockquote> </li> <li>Max Böck: <a href="https://mxb.dev/blog/color-theme-switcher/" rel="nofollow ugc">Color Theme Switcher<br /> </a></p> <blockquote><p> I decided to build a new feature on my site:<br /> dynamic color themes! Yes, instead of two color schemes, I now have ten! That’s eight better than the previous website! </p></blockquote> </li> <li>Joshua Comeau: <a href="https://joshwcomeau.com/gatsby/dark-mode/" rel="nofollow ugc">The Quest for the Perfect Dark Mode<br /> </a></p> <blockquote><p> The reason that this problem is so dastardly has to do with how frameworks like Gatsby/Next.js work; the HTML is generated ahead of time. If you’re not careful, you’ll wind up with that telltale flicker, where the user sees the wrong colors for a brief moment.</p> <p> Today we’ll learn how to build the perfect Dark Mode for Gatsby.js. </p></blockquote> </li> </ul> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1759752-674ba72825d6f' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1759752&origin=css-tricks.com&obj_id=45537868-1759752-674ba72825d6f' data-name='like-comment-frame-45537868-1759752-674ba72825d6f'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-1762636"> <div class="comment-wrap" id="comment-1762636"> <div class="comment-author-wrap"> <div class="comment-author">Charles</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1762636"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2020-09-12T10:39:28-06:00">September 12, 2020</time></div> </div> <div class="comment-content"> <p>Your pure CSS method works perfectly with Safari on my iPhone. Not sure why the second example, JavaScript, doesn’t. I don’t have anything disabled on my browser. Anyway I appreciate this concise article!</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1762636-674ba72826135' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1762636&origin=css-tricks.com&obj_id=45537868-1762636-674ba72826135' data-name='like-comment-frame-45537868-1762636-674ba72826135'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment even depth-2" id="li-comment-1796674"> <div class="comment-wrap" id="comment-1796674"> <div class="comment-author-wrap"> <div class="comment-author">Mack</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1796674"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2022-08-10T23:17:09-06:00">August 10, 2022</time></div> </div> <div class="comment-content"> <p>The Javascript example does not work because it cannot detect theme change by itself in the way the code is written. The class-toggling part would just run once. To toggle every time theme changes, add the class-toggling code to “onchange” event of object “prefersDarkScheme” as callback and everything would work nicely.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1796674-674ba728264da' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1796674&origin=css-tricks.com&obj_id=45537868-1796674-674ba728264da' data-name='like-comment-frame-45537868-1796674-674ba728264da'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt depth-2" id="li-comment-1796827"> <div class="comment-wrap" id="comment-1796827"> <div class="comment-author-wrap"> <div class="comment-author">Funkaholik</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1796827"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2022-08-24T12:54:52-06:00">August 24, 2022</time></div> </div> <div class="comment-content"> <p>Can you code it down, pls?<br /> So we could switch from device more than once)<br /> Also i’m curious why css-tricks still doesn’t have this feature to let users switch manually..((</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1796827-674ba7282686b' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1796827&origin=css-tricks.com&obj_id=45537868-1796827-674ba7282686b' data-name='like-comment-frame-45537868-1796827-674ba7282686b'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment even thread-even depth-1" id="li-comment-1768423"> <div class="comment-wrap" id="comment-1768423"> <div class="comment-author-wrap"> <div class="comment-author">Anton</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1768423"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2021-02-11T08:22:17-07:00">February 11, 2021</time></div> </div> <div class="comment-content"> <p>Hi! Very helpful article. Now I’m trying to add night mode to my website and I get stuck on storing a user’s preference.</p> <p>In article storing a user’s preference with localStorage work only with method #1 “Using a body class”, but how to make it work with method #2 “Using separate stylesheets”?</p> <p>I’m trying to make it, but nothing changes, as my knowledges in JS are very poor. Can you help me?</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1768423-674ba72826bc9' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1768423&origin=css-tricks.com&obj_id=45537868-1768423-674ba72826bc9' data-name='like-comment-frame-45537868-1768423-674ba72826bc9'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-1768785"> <div class="comment-wrap" id="comment-1768785"> <div class="comment-author-wrap"> <div class="comment-author">Ralph J. Smit</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1768785"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2021-02-18T05:58:34-07:00">February 18, 2021</time></div> </div> <div class="comment-content"> <p>Great article!<br /> I applied the technique of cookies and server side on my WordPress website. This worked great – until I activated page caching.</p> <p>The website clearly benefited a lot from page caching, but this meant that the theme was not ‘stored’, e.g. for each new page, you’d start plain again with the cached version.</p> <p>So I was wondering if there could be an other JavaScript method without FOIT. Because tags are executed when they are encountered, one of my ideas is to add a tag before the whole page is loaded, which gets the cookie value and adds adds a class if needed. Do you know if such a thing is feasible?</p> <p>Thanks a lot!<br /> Ralph</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1768785-674ba72827058' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1768785&origin=css-tricks.com&obj_id=45537868-1768785-674ba72827058' data-name='like-comment-frame-45537868-1768785-674ba72827058'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-1769446"> <div class="comment-wrap" id="comment-1769446"> <div class="comment-author-wrap"> <div class="comment-author">sbs</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1769446"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2021-03-07T22:34:44-07:00">March 7, 2021</time></div> </div> <div class="comment-content"> <p>This might not be a question related to the dark mode. But can any one point me what’s the tool used in the demo that you can slide the vertical bar to see left/right comparison? I think that’s a very cool effect to demo.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1769446-674ba72827418' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1769446&origin=css-tricks.com&obj_id=45537868-1769446-674ba72827418' data-name='like-comment-frame-45537868-1769446-674ba72827418'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment odd alt depth-2" id="li-comment-1769455"> <div class="comment-wrap" id="comment-1769455"> <div class="comment-author-wrap"> <div class="comment-author">Kel</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1769455"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2021-03-08T08:02:28-07:00">March 8, 2021</time></div> </div> <div class="comment-content"> <p>I believe the one on this page is based on Juxtapose ( <a href="https://juxtapose.knightlab.com" rel="nofollow ugc">https://juxtapose.knightlab.com</a> ) but there are quite a few of these Before / After slider things on the web like Cocoen and TwentyTwenty.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1769455-674ba72827818' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1769455&origin=css-tricks.com&obj_id=45537868-1769455-674ba72827818' data-name='like-comment-frame-45537868-1769455-674ba72827818'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-1770044"> <div class="comment-wrap" id="comment-1770044"> <div class="comment-author-wrap"> <div class="comment-author">Kark</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1770044"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2021-03-23T12:02:50-06:00">March 23, 2021</time></div> </div> <div class="comment-content"> <p>To prevent that “FLIC” , you could use some kind of transition. I’ve saw that a few weeks ago but can’t remember on what page it was. Still. I think that may be a good solution – as long as the user didn’t turn on reduce-motion…</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1770044-674ba72827baa' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1770044&origin=css-tricks.com&obj_id=45537868-1770044-674ba72827baa' data-name='like-comment-frame-45537868-1770044-674ba72827baa'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment odd alt depth-2" id="li-comment-1770671"> <div class="comment-wrap" id="comment-1770671"> <div class="comment-author-wrap"> <div class="comment-author">Sujin</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1770671"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2021-04-12T00:52:12-06:00">April 12, 2021</time></div> </div> <div class="comment-content"> <p>What is “FLIC”? I couldn’t find what “FLIC” stands for anywhere..</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1770671-674ba72827f85' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1770671&origin=css-tricks.com&obj_id=45537868-1770671-674ba72827f85' data-name='like-comment-frame-45537868-1770671-674ba72827f85'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment even thread-even depth-1" id="li-comment-1770972"> <div class="comment-wrap" id="comment-1770972"> <div class="comment-author-wrap"> <div class="comment-author">Orlando Fernando Marconi</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1770972"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2021-04-18T21:10:30-06:00">April 18, 2021</time></div> </div> <div class="comment-content"> <p>Hey!</p> <p>Is it possible to detect power saving as well?</p> <p>There are videos that don’t load when my iphone is in economy mode.</p> <p>It would be interesting to add a bodyclass when the device is in power saving.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1770972-674ba7282836b' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1770972&origin=css-tricks.com&obj_id=45537868-1770972-674ba7282836b' data-name='like-comment-frame-45537868-1770972-674ba7282836b'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-1771329"> <div class="comment-wrap" id="comment-1771329"> <div class="comment-author-wrap"> <div class="comment-author">Mark</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1771329"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2021-04-28T08:53:13-06:00">April 28, 2021</time></div> </div> <div class="comment-content"> <p>Thanks for this, a really excellent article which had everything I needed for my current site build.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1771329-674ba7282872f' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1771329&origin=css-tricks.com&obj_id=45537868-1771329-674ba7282872f' data-name='like-comment-frame-45537868-1771329-674ba7282872f'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-1786078"> <div class="comment-wrap" id="comment-1786078"> <div class="comment-author-wrap"> <div class="comment-author">Tomás</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1786078"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2021-11-22T21:35:50-07:00">November 22, 2021</time></div> </div> <div class="comment-content"> <p>Is there anyway to avoid duplicating the css code for the media query with: “prefers-color-scheme: dark”?</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1786078-674ba72828b08' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1786078&origin=css-tricks.com&obj_id=45537868-1786078-674ba72828b08' data-name='like-comment-frame-45537868-1786078-674ba72828b08'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-1786163"> <div class="comment-wrap" id="comment-1786163"> <div class="comment-author-wrap"> <div class="comment-author">Seb</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1786163"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2021-11-24T09:34:43-07:00">November 24, 2021</time></div> </div> <div class="comment-content"> <p>I’d like to know this as well Tomás. Messy when you have half a dozen properties, a nightmare when you have 100! There must be a better way…</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1786163-674ba72828ee7' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1786163&origin=css-tricks.com&obj_id=45537868-1786163-674ba72828ee7' data-name='like-comment-frame-45537868-1786163-674ba72828ee7'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-1788499"> <div class="comment-wrap" id="comment-1788499"> <div class="comment-author-wrap"> <div class="comment-author">Mori</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1788499"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2022-01-22T02:31:52-07:00">January 22, 2022</time></div> </div> <div class="comment-content"> <p><strong>Pure CSS</strong>: <a href="https://codepen.io/mori79/pen/ExwqNVv" rel="nofollow ugc">https://codepen.io/mori79/pen/ExwqNVv</a></p> <p><strong>Related post</strong>: <a href="https://stackoverflow.com/a/70811865/478018" rel="nofollow ugc">https://stackoverflow.com/a/70811865/478018</a></p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1788499-674ba72829326' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1788499&origin=css-tricks.com&obj_id=45537868-1788499-674ba72829326' data-name='like-comment-frame-45537868-1788499-674ba72829326'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-1796041"> <div class="comment-wrap" id="comment-1796041"> <div class="comment-author-wrap"> <div class="comment-author">om kumar sahu</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1796041"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2022-06-12T03:30:32-06:00">June 12, 2022</time></div> </div> <div class="comment-content"> <p>Can you write an article on how the brave browser changes the complete color palette when we switch the force dark mode on?</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1796041-674ba72829750' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1796041&origin=css-tricks.com&obj_id=45537868-1796041-674ba72829750' data-name='like-comment-frame-45537868-1796041-674ba72829750'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-1796728"> <div class="comment-wrap" id="comment-1796728"> <div class="comment-author-wrap"> <div class="comment-author">John</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1796728"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2022-08-16T05:13:58-06:00">August 16, 2022</time></div> </div> <div class="comment-content"> <p>How would I edit a table in dark mode, im trying to get the border of the table to be a different color other than black, but cant seem to get the output I want. Thanks!</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1796728-674ba72829af6' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1796728&origin=css-tricks.com&obj_id=45537868-1796728-674ba72829af6' data-name='like-comment-frame-45537868-1796728-674ba72829af6'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment byuser comment-author-geoffgraham odd alt depth-2" id="li-comment-1796731"> <div class="comment-wrap" id="comment-1796731"> <div class="comment-author-wrap"> <div class="comment-author">Geoff Graham</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1796731"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2022-08-16T06:12:51-06:00">August 16, 2022</time></div> </div> <div class="comment-content"> <p>Check that the table’s border isn’t getting set in the HTML itself, then style it up in CSS:</p> <p><iframe title="Super Quick Dark Mode Table" id="cp_embed_yLKQzJz" src="https://codepen.io/geoffgraham/embed/preview/yLKQzJz?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=yLKQzJz" scrolling="no" frameborder="0" height="300" allowtransparency="true" class="cp_embed_iframe" style="width: 100%; overflow: hidden;"></iframe></p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1796731-674ba7282aaef' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1796731&origin=css-tricks.com&obj_id=45537868-1796731-674ba7282aaef' data-name='like-comment-frame-45537868-1796731-674ba7282aaef'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-1796787"> <div class="comment-wrap" id="comment-1796787"> <div class="comment-author-wrap"> <div class="comment-author">Aaron Muir Hamilton</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1796787"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2022-08-20T23:38:57-06:00">August 20, 2022</time></div> </div> <div class="comment-content"> <p>Why doesn’t css-tricks itself respect dark color preference? There are several articles about enabling it here, including some that go into quite some detail, but as of now the main content is a blinding white rectangle.</p> <p>It’s not that far off either. There could be about 8 lines of CSS in a @media query and it would just work. I have it working pretty well right now with just a couple tweaks in devtools. Replace the .wp-block-column background with a translucent tint, turn off a couple resets, and then you don’t have to do much work at all.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1796787-674ba7282af63' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1796787&origin=css-tricks.com&obj_id=45537868-1796787-674ba7282af63' data-name='like-comment-frame-45537868-1796787-674ba7282af63'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-1797520"> <div class="comment-wrap" id="comment-1797520"> <div class="comment-author-wrap"> <div class="comment-author">Pollard</div> <div class="comment-time"><a href="https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#comment-1797520"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2022-10-23T17:38:47-06:00">October 23, 2022</time></div> </div> <div class="comment-content"> <p>Well now you’ve done it. Just created a dark theme with switch for a site but I did not know <code>prefers-color-scheme</code></p> <p>Also just swapped dark mode browser addon for one that allows custom colors/css.</p> <p>Now I can have my color scheme set for system/browser dark mode. I can have every website I visit use the same and it just so happens that it’s not to different than my desktop theme in Plasma.</p> <p>Unification. Just need to remember to turn it off occasionally so I can see what the real world looks like.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1797520-674ba7282b2c0' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1797520&origin=css-tricks.com&obj_id=45537868-1797520-674ba7282b2c0' data-name='like-comment-frame-45537868-1797520-674ba7282b2c0'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ol> <div class="comments-closed"> This comment thread is closed. If you have important information to share, please <a href="/contact/">contact us</a>. </div> </section> <div class="related-posts"> <div id='jp-relatedposts' class='jp-relatedposts' > </div></div> </div> </div> </div> <footer class="site-footer"> <svg class="icon-logo-star" width="35px" height="35px" viewBox="0 0 362.62 388.52" data-spin-me="false"> <path d="M156.58,239l-88.3,64.75c-10.59,7.06-18.84,11.77-29.43,11.77-21.19,0-38.85-18.84-38.85-40C0,257.83,14.13,244.88,27.08,239l103.6-44.74L27.08,148.34C13,142.46,0,129.51,0,111.85,0,90.66,18.84,73,40,73c10.6,0,17.66,3.53,28.25,11.77l88.3,64.75L144.81,44.74C141.28,20,157.76,0,181.31,0s40,18.84,36.5,43.56L206,149.52l88.3-64.75C304.93,76.53,313.17,73,323.77,73a39.2,39.2,0,0,1,38.85,38.85c0,18.84-12.95,30.61-27.08,36.5L231.93,194.26,335.54,239c14.13,5.88,27.08,18.83,27.08,37.67,0,21.19-18.84,38.85-40,38.85-9.42,0-17.66-4.71-28.26-11.77L206,239l11.77,104.78c3.53,24.72-12.95,44.74-36.5,44.74s-40-18.84-36.5-43.56Z" /> </svg> <div class="footer-inside"> <div class="footer-message-and-form"> <p class="colophon"> CSS-Tricks is powered by <a href="https://www.digitalocean.com/?utm_source=css-tricks.com&utm_medium=cta&utm_campaign=website_link">DigitalOcean</a>. </p> <div class="footer-form-wrap"> <h4>Keep up to date on web dev</h4> <p>with our hand-crafted newsletter</p> <form id="mktoForm_1402"></form> </div> </div> <div class="link-grid"> <div> <div> <h5>DigitalOcean</h5> <nav id="footer-nav-digitalocean" class="footer-nav" role="navigation"> <ul id="menu-digitalocean" class="menu"><li id="menu-item-379274" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-379274"><a href="https://www.digitalocean.com/about?utm_source=css-tricks.com&utm_medium=cta&utm_campaign=website_link">About DO</a></li> <li id="menu-item-379275" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-379275"><a href="https://www.cloudways.com/en/wordpress-hosting.php?id=1223312">Cloudways</a></li> <li id="menu-item-379276" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-379276"><a href="https://www.digitalocean.com/legal?utm_source=css-tricks.com&utm_medium=cta&utm_campaign=website_link">Legal stuff</a></li> <li id="menu-item-379277" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-379277"><a href="https://try.digitalocean.com/css-tricks/?utm_source=wordpress-1242695-4567563.cloudwaysapps.com&utm_medium=cta&utm_campaign=website_link">Get free credit!</a></li> </ul> </nav> </div> </div> <div> <div> <h5>CSS-Tricks</h5> <nav id="footer-nav-csstricks" class="footer-nav" role="navigation"> <ul id="menu-css-tricks" class="menu"><li id="menu-item-379046" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-379046"><a href="https://css-tricks.com/guest-writing/">Write for us!</a></li> <li id="menu-item-379047" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-379047"><a href="https://css-tricks.com/advertising/">Advertise with us</a></li> <li id="menu-item-379048" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-379048"><a href="https://css-tricks.com/contact/">Contact us</a></li> </ul> </nav> </div> </div> <div> <div> <h5>Social</h5> <nav id="footer-nav-social" class="footer-nav" role="navigation"> <ul id="menu-social" class="menu"><li id="menu-item-379051" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-379051"><a href="https://css-tricks.com/rss-feeds/">RSS Feeds</a></li> <li id="menu-item-377816" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-377816"><a href="https://codepen.io/team/css-tricks">CodePen</a></li> <li id="menu-item-377813" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-377813"><a href="https://mastodon.social/@csstricks">Mastodon</a></li> <li id="menu-item-382192" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-382192"><a href="https://bsky.app/profile/css-tricks.com">Bluesky</a></li> </ul> </nav> </div> </div> </div> </div> <a href="#top-of-site" class="top-of-site-link" data-visible="false"> <span class="screen-reader-text">Back to Top</span> <svg width="32" height="32" viewBox="0 0 100 100"> <path fill="white" d="m50 0c-13.262 0-25.98 5.2695-35.355 14.645s-14.645 22.094-14.645 35.355 5.2695 25.98 14.645 35.355 22.094 14.645 35.355 14.645 25.98-5.2695 35.355-14.645 14.645-22.094 14.645-35.355-5.2695-25.98-14.645-35.355-22.094-14.645-35.355-14.645zm20.832 62.5-20.832-22.457-20.625 22.457c-1.207 0.74219-2.7656 0.57812-3.7891-0.39844-1.0273-0.98047-1.2695-2.5273-0.58594-3.7695l22.918-25c0.60156-0.61328 1.4297-0.96094 2.2891-0.96094 0.86328 0 1.6914 0.34766 2.293 0.96094l22.918 25c0.88672 1.2891 0.6875 3.0352-0.47266 4.0898-1.1562 1.0508-2.9141 1.0859-4.1133 0.078125z"/> </svg> </a> <div id="consent-banner"></div> <div id="teconsent"> </div> </footer> <style id='jetpack-block-image-compare-inline-css' type='text/css'> div.juxtapose{font-family:Helvetica,Arial,sans-serif;width:100%}div.jx-slider{color:#f3f3f3;cursor:pointer;height:100%;overflow:hidden;position:relative;width:100%}div.jx-handle{cursor:col-resize;height:100%;margin-left:-20px;position:absolute;width:40px;z-index:15}.vertical div.jx-handle{cursor:row-resize;height:40px;margin-left:0;margin-top:-20px;width:100%}div.jx-control{background-color:currentColor;height:100%;margin-left:auto;margin-right:auto;width:3px}.vertical div.jx-control{background-color:currentColor;height:3px;position:relative;top:50%;transform:translateY(-50%);width:100%}div.jx-controller{background-color:currentColor;bottom:0;height:60px;margin:auto auto auto -3px;position:absolute;top:0;width:9px}.vertical div.jx-controller{height:9px;margin-left:auto;margin-right:auto;position:relative;top:-3px;width:100px}div.jx-arrow{bottom:0;margin:auto;top:0}.vertical div.jx-arrow,div.jx-arrow{height:0;position:absolute;transition:all .2s ease;width:0}.vertical div.jx-arrow{left:0;margin:0 auto;right:0}div.jx-arrow.jx-left{border-color:#0000 currentcolor #0000 #0000;border-style:solid;border-width:8px 8px 8px 0;left:2px}div.jx-arrow.jx-right{border-color:#0000 #0000 #0000 currentcolor;border-style:solid;border-width:8px 0 8px 8px;right:2px}.vertical div.jx-arrow.jx-left{border-color:#0000 #0000 currentcolor;border-style:solid;border-width:0 8px 8px;left:0;top:2px}.vertical div.jx-arrow.jx-right{border-color:currentcolor #0000 #0000;border-style:solid;border-width:8px 8px 0;bottom:2px;right:0;top:auto}div.jx-handle:active div.jx-arrow.jx-left,div.jx-handle:hover div.jx-arrow.jx-left{left:-1px}div.jx-handle:active div.jx-arrow.jx-right,div.jx-handle:hover div.jx-arrow.jx-right{right:-1px}.vertical div.jx-handle:active div.jx-arrow.jx-left,.vertical div.jx-handle:hover div.jx-arrow.jx-left{left:0;top:0}.vertical div.jx-handle:active div.jx-arrow.jx-right,.vertical div.jx-handle:hover div.jx-arrow.jx-right{bottom:0;right:0}div.jx-image{display:inline-block;height:100%;overflow:hidden;position:absolute;top:0}.vertical div.jx-image{left:0;top:auto;width:100%}div.jx-slider div.jx-image img{height:100%!important;margin-bottom:0;max-height:none!important;max-width:none!important;position:absolute;width:auto!important;z-index:5}div.jx-slider.vertical div.jx-image img{height:auto!important;width:100%!important}div.jx-image.jx-left{background-position:0;left:0}div.jx-image.jx-left img{left:0}div.jx-image.jx-right{background-position:100%;right:0}div.jx-image.jx-right img{bottom:0;right:0}.veritcal div.jx-image.jx-left{background-position:top;top:0}.veritcal div.jx-image.jx-left img{top:0}.vertical div.jx-image.jx-right{background-position:bottom;bottom:0}.veritcal div.jx-image.jx-right img{bottom:0}div.jx-image div.jx-label{background-color:#000;background-color:#000000b3;color:#fff;display:inline-block;font-size:1em;line-height:18px;padding:.25em .75em;position:relative;top:0;vertical-align:middle;white-space:nowrap;z-index:10}div.jx-image.jx-left div.jx-label{float:left;left:0}div.jx-image.jx-right div.jx-label{float:right;right:0}.vertical div.jx-image div.jx-label{display:table;position:absolute}.vertical div.jx-image.jx-right div.jx-label{bottom:0;left:0;top:auto}div.jx-image.transition{transition:width .5s ease}div.jx-handle.transition{transition:left .5s ease}.vertical div.jx-image.transition{transition:height .5s ease}.vertical div.jx-handle.transition{transition:top .5s ease}div.jx-controller:focus,div.jx-image.jx-left div.jx-label:focus,div.jx-image.jx-right div.jx-label:focus,figure.wp-block-jetpack-image-compare figcaption{font-size:85%;text-align:center}div.jx-control{color:#fff}.vertical div.jx-controller,div.jx-controller{border-radius:50%;height:48px;width:48px}div.jx-controller{margin-left:-22.5px}.vertical div.jx-controller{transform:translateY(-19.5px)}.vertical div.jx-arrow.jx-left,.vertical div.jx-arrow.jx-right,div.jx-arrow.jx-left,div.jx-arrow.jx-right{background-repeat:no-repeat;border:none;height:24px;width:24px;will-change:transform;z-index:1}div.jx-arrow.jx-left{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEzLjQgMTggOCAxMmw1LjQtNiAxLjIgMS00LjYgNSA0LjYgNXoiLz48L3N2Zz4=);left:0}div.jx-arrow.jx-right{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjYgNiA5LjQgN2w0LjYgNS00LjYgNSAxLjIgMSA1LjQtNnoiLz48L3N2Zz4=);right:0}div.vertical div.jx-arrow.jx-left,div.vertical div.jx-arrow.jx-right{transform:rotate(90deg)} </style> <style id='jetpack-block-slideshow-inline-css' type='text/css'> .wp-block-jetpack-slideshow{margin-bottom:1.5em;position:relative}.wp-block-jetpack-slideshow [tabindex="-1"]:focus{outline:0}.wp-block-jetpack-slideshow.wp-amp-block>.wp-block-jetpack-slideshow_container{opacity:1}.wp-block-jetpack-slideshow.wp-amp-block.wp-block-jetpack-slideshow__autoplay .wp-block-jetpack-slideshow_button-play,.wp-block-jetpack-slideshow.wp-amp-block.wp-block-jetpack-slideshow__autoplay.wp-block-jetpack-slideshow__autoplay-playing .wp-block-jetpack-slideshow_button-pause{display:block}.wp-block-jetpack-slideshow.wp-amp-block.wp-block-jetpack-slideshow__autoplay.wp-block-jetpack-slideshow__autoplay-playing .wp-block-jetpack-slideshow_button-play{display:none}.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_container{opacity:0;overflow:hidden;width:100%}.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_container.wp-swiper-initialized{opacity:1}.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_container.swiper-container{display:block}.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_container .wp-block-jetpack-slideshow_slide,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_container .wp-block-jetpack-slideshow_swiper-wrapper{line-height:normal;margin:0;padding:0}.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_container ul.wp-block-jetpack-slideshow_swiper-wrapper{display:flex}.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_slide{display:flex;height:100%;width:100%}.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_slide figure{align-items:center;display:flex;height:100%;justify-content:center;margin:0;position:relative;width:100%}.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_slide figure .wp-block-jetpack-slideshow_image{pointer-events:none;-webkit-user-select:none;user-select:none}.wp-block-jetpack-slideshow.alignfull .wp-block-jetpack-slideshow_image,.wp-block-jetpack-slideshow.alignwide .wp-block-jetpack-slideshow_image{max-width:unset;object-fit:cover;width:100vw}.wp-block-jetpack-slideshow .swiper-container-fade .wp-block-jetpack-slideshow_slide:not(.swiper-slide-active){opacity:0!important}.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_image{display:block;height:auto;max-height:100%;max-width:100%;object-fit:contain;width:auto}.wp-block-jetpack-slideshow .amp-carousel-button,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-next,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-pause,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-play,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-prev{background-color:#fff;background-position:50%;background-repeat:no-repeat;background-size:contain;border:0;border-radius:4px;box-shadow:none;height:30px;margin:-14px 0 0;opacity:.5;padding:0;transition:opacity .5s ease-out;width:28px}.wp-block-jetpack-slideshow .amp-carousel-button:focus,.wp-block-jetpack-slideshow .amp-carousel-button:hover,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-next:focus,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-next:hover,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-pause:focus,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-pause:hover,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-play:focus,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-play:hover,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-prev:focus,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-prev:hover{background-color:#fff;opacity:1}.wp-block-jetpack-slideshow .amp-carousel-button:focus,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-next:focus,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-pause:focus,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-play:focus,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-prev:focus{outline:thin dotted #fff;outline-offset:-4px}.wp-block-jetpack-slideshow .amp-carousel-button{margin:0}.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-next,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-prev{display:none}.wp-block-jetpack-slideshow .swiper-button-next:after,.wp-block-jetpack-slideshow .swiper-button-prev:after,.wp-block-jetpack-slideshow .swiper-container-rtl .swiper-button-next:after,.wp-block-jetpack-slideshow .swiper-container-rtl .swiper-button-prev:after{content:""}.wp-block-jetpack-slideshow .amp-carousel-button-next,.wp-block-jetpack-slideshow .swiper-button-next.swiper-button-white,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-next,.wp-block-jetpack-slideshow.swiper-container-rtl .swiper-button-prev.swiper-button-white,.wp-block-jetpack-slideshow.swiper-container-rtl .wp-block-jetpack-slideshow_button-prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PG1hc2sgaWQ9ImEiIHdpZHRoPSI4IiBoZWlnaHQ9IjEyIiB4PSI4IiB5PSI2IiBtYXNrLXR5cGU9ImFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNOC41OTggMTYuNTkgMTMuMTU2IDEyIDguNTk4IDcuNDEgMTAuMDAxIDZsNS45NyA2LTUuOTcgNnoiLz48L21hc2s+PGcgbWFzaz0idXJsKCNhKSI+PHBhdGggZmlsbD0iIzAwMCIgZD0iTS4zNDQgMGgyMy44ODJ2MjRILjM0NHoiLz48L2c+PC9zdmc+)}.wp-block-jetpack-slideshow .amp-carousel-button-prev,.wp-block-jetpack-slideshow .swiper-button-prev.swiper-button-white,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-prev,.wp-block-jetpack-slideshow.swiper-container-rtl .swiper-button-next.swiper-button-white,.wp-block-jetpack-slideshow.swiper-container-rtl .wp-block-jetpack-slideshow_button-next{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PG1hc2sgaWQ9ImEiIHdpZHRoPSI5IiBoZWlnaHQ9IjEyIiB4PSI4IiB5PSI2IiBtYXNrLXR5cGU9ImFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTYuMjA3IDE2LjU5IDExLjY1IDEybDQuNTU3LTQuNTlMMTQuODA0IDZsLTUuOTcgNiA1Ljk3IDZ6Ii8+PC9tYXNrPjxnIG1hc2s9InVybCgjYSkiPjxwYXRoIGZpbGw9IiMwMDAiIGQ9Ik0uNTc5IDBoMjMuODgydjI0SC41Nzl6Ii8+PC9nPjwvc3ZnPg==)}.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-pause,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-play{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M6 19h4V5H6zm8-14v14h4V5z'/%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3C/svg%3E");display:none;inset-inline-end:10px;margin-top:0;position:absolute;top:10px;z-index:1}.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_autoplay-paused .wp-block-jetpack-slideshow_button-pause,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-play{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3C/svg%3E")}.wp-block-jetpack-slideshow:has(>div[data-autoplay=true]) .wp-block-jetpack-slideshow_button-pause,.wp-block-jetpack-slideshow[data-autoplay=true] .wp-block-jetpack-slideshow_button-pause{display:block}.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_caption.gallery-caption{background-color:#00000080;bottom:0;box-sizing:border-box;color:#fff;cursor:text;left:0;margin:0!important;max-height:100%;opacity:1;padding:.75em;position:absolute;right:0;text-align:initial;z-index:1}.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_caption.gallery-caption a{color:inherit}.wp-block-jetpack-slideshow[data-autoplay=true] .wp-block-jetpack-slideshow_caption.gallery-caption{max-height:calc(100% - 68px)}.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_pagination.swiper-pagination-bullets,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_pagination.swiper-pagination-custom{bottom:0;display:flex;gap:8px;justify-content:flex-start;line-height:24px;padding:10px 0 2px;position:relative}.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_pagination.swiper-pagination-bullets .swiper-pagination-bullet,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_pagination.swiper-pagination-custom .swiper-pagination-bullet{background:currentColor;color:currentColor;height:8px;opacity:.5;transform:scale(.75);transition:opacity .25s,transform .25s;vertical-align:top;width:8px}.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_pagination.swiper-pagination-bullets .swiper-pagination-bullet:focus,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_pagination.swiper-pagination-bullets .swiper-pagination-bullet:hover,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_pagination.swiper-pagination-custom .swiper-pagination-bullet:focus,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_pagination.swiper-pagination-custom .swiper-pagination-bullet:hover{opacity:1}.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_pagination.swiper-pagination-bullets .swiper-pagination-bullet:focus,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_pagination.swiper-pagination-custom .swiper-pagination-bullet:focus{outline:thin dotted;outline-offset:0}.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_pagination.swiper-pagination-bullets .swiper-pagination-bullet-active,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_pagination.swiper-pagination-bullets .swiper-pagination-bullet[selected],.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_pagination.swiper-pagination-custom .swiper-pagination-bullet-active,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_pagination.swiper-pagination-custom .swiper-pagination-bullet[selected]{background-color:currentColor;opacity:1;transform:scale(1)}.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_pagination.swiper-pagination-bullets .swiper-pagination-simple,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_pagination.swiper-pagination-custom .swiper-pagination-simple{font-size:14px;line-height:16px;text-align:start;width:100%}.wp-block-jetpack-slideshow_pagination.amp-pagination{text-align:center}.wp-block-jetpack-slideshow_pagination.amp-pagination .swiper-pagination-bullet{border:0;border-radius:100%;display:inline-block;margin:0 4px;padding:0}@media(min-width:600px){.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-next,.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_button-prev{display:block}}.is-email .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_container{height:auto;opacity:1;overflow:visible;width:auto}.is-email .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_container ul.wp-block-jetpack-slideshow_swiper-wrapper,.is-email .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_slide figure{display:block;margin-bottom:12px}.is-email .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_container ul.wp-block-jetpack-slideshow_swiper-wrapper,.is-email .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_slide{list-style:none;margin-left:auto;margin-right:auto}.is-email .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_slide{display:inline-block;height:auto;margin-left:2%!important;margin-right:2%!important;vertical-align:top;width:42%}.is-email .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_caption.gallery-caption{background-color:#0000;bottom:auto;color:inherit;inset-inline-end:auto;padding-top:0;position:relative} </style> <style id='core-block-supports-inline-css' type='text/css'> .wp-container-core-columns-is-layout-1{flex-wrap:nowrap;}.wp-container-core-columns-is-layout-2{flex-wrap:nowrap;}.wp-container-core-columns-is-layout-3{flex-wrap:nowrap;}.wp-container-core-columns-is-layout-4{flex-wrap:nowrap;}.wp-container-core-columns-is-layout-5{flex-wrap:nowrap;}.wp-container-core-columns-is-layout-6{flex-wrap:nowrap;}.wp-container-core-columns-is-layout-7{flex-wrap:nowrap;} </style> <iframe src='https://widgets.wp.com/likes/master.html?ver=20241201#ver=20241201&n=1' scrolling='no' id='likes-master' name='likes-master' style='display:none;'></iframe> <div id='likes-other-gravatars' class='wpl-new-layout' role="dialog" aria-hidden="true" tabindex="-1"><div class="likes-text"><span>%d</span></div><ul class="wpl-avatars sd-like-gravatars"></ul></div> <svg width="0" height="0" class="screen-reader"> <defs> <linearGradient id="orange-to-pink" x1="0" x2="1" y1="0" y2="1"> <stop offset="0%" stop-color="#ff7a18" /> <stop offset="40%" stop-color="#af002d" /> <stop offset="100%" stop-color="#319197" /> </linearGradient> <filter id="duotone_orange_pink"> <feColorMatrix type="matrix" result="grayscale" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"> </feColorMatrix> <feComponentTransfer color-interpolation-filters="sRGB" result="duotone"> <feFuncR type="table" tableValues="0.7411764706 0.9882352941"></feFuncR> <feFuncG type="table" tableValues="0.0431372549 0.7333333333"></feFuncG> <feFuncB type="table" tableValues="0.568627451 0.05098039216"></feFuncB> <feFuncA type="table" tableValues="0 1"></feFuncA> </feComponentTransfer> </filter> </defs> </svg> <script type="text/javascript" id="jetpack_related-posts-js-extra"> /* <![CDATA[ */ var related_posts_js_options = {"post_heading":"h4"}; /* ]]> */ </script><script src="https://c0.wp.com/p/jetpack/14.0/_inc/build/related-posts/related-posts.min.js" id="jetpack_related-posts-js"></script><script type="text/javascript" id="breeze-prefetch-js-extra"> /* <![CDATA[ */ var breeze_prefetch = {"local_url":"https:\/\/css-tricks.com","ignore_remote_prefetch":"1","ignore_list":["wp-admin","wp-login.php"]}; /* ]]> */ </script><script src="https://css-tricks.com/wp-content/plugins/breeze/assets/js/js-front-end/breeze-prefetch-links.min.js?ver=2.1.19" id="breeze-prefetch-js"></script><script> var articleID = 312285; var articleYear = 2020; var articleAuthor = "275091"; var articleType = "post"; </script><script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><script src="//anchor.digitalocean.com/js/forms2/js/forms2.min.js"></script><script>MktoForms2.loadForm("//anchor.digitalocean.com", "113-DTN-266", 1402);</script><script async="async" src="//consent.trustarc.com/notice?domain=css-tricks.com&c=teconsent&js=nj&noticeType=bb&text=true&gtm=1" crossorigin></script><script> var style = document.createElement('style'); style.innerHTML = '#teconsent {position: fixed; z-index: 1000; bottom: 0px; right: 0; font-size: 0px; height: 33px;}'; document.head.appendChild(style); </script><script type="text/javascript" id="bbp-swap-no-js-body-class"> document.body.className = document.body.className.replace( 'bbp-no-js', 'bbp-js' ); </script><script type="module" src="https://css-tricks.com/wp-content/plugins/baseline-status/baseline-status.js?ver=1.0.4"></script><script src="https://css-tricks.com/wp-content/themes/CSS-Tricks-19/js/min/jquery-3.5.1.min.js" id="jquery-js"></script><script type="text/javascript" id="jetpack-live-comment-markdown-js-extra"> /* <![CDATA[ */ var markdownify = {"ajax_url":"\/wp-admin\/admin-ajax.php","nonce":"1d4c08fd30"}; /* ]]> */ </script><script src="https://css-tricks.com/wp-content/plugins/jetpack-markdown-live-preview-comments/js/markdownify.js?ver=1" id="jetpack-live-comment-markdown-js"></script><script src="https://css-tricks.com/wp-content/plugins/breeze/assets/js/js-front-end/breeze-lazy-load.min.js?ver=2.1.19" id="breeze-lazy-js"></script><script src="https://c0.wp.com/p/jetpack/14.0/modules/likes/queuehandler.js" id="jetpack_likes_queuehandler-js"></script><script src="https://stats.wp.com/e-202448.js" id="jetpack-stats-js" data-wp-strategy="defer"></script><script id="jetpack-stats-js-after"> /* <![CDATA[ */ _stq = window._stq || []; _stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"45537868\",\"post\":\"312285\",\"tz\":\"-7\",\"srv\":\"css-tricks.com\",\"j\":\"1:14.0\"}") ]); _stq.push([ "clickTrackerInit", "45537868", "312285" ]); /* ]]> */ </script><script type="text/javascript" id="jetpack-blocks-assets-base-url-js-before"> /* <![CDATA[ */ var Jetpack_Block_Assets_Base_Url="https://css-tricks.com/wp-content/plugins/jetpack/_inc/blocks/"; /* ]]> */ </script><script src="https://c0.wp.com/c/6.7.1/wp-includes/js/dist/dom-ready.min.js" id="wp-dom-ready-js"></script><script type="text/javascript" id="jetpack-block-image-compare-js-extra"> /* <![CDATA[ */ var imageCompareHandle = {"msg":"Slide to compare images"}; var imageCompareHandle = {"msg":"Slide to compare images"}; var imageCompareHandle = {"msg":"Slide to compare images"}; var imageCompareHandle = {"msg":"Slide to compare images"}; var imageCompareHandle = {"msg":"Slide to compare images"}; var imageCompareHandle = {"msg":"Slide to compare images"}; /* ]]> */ </script><script src="https://css-tricks.com/wp-content/plugins/jetpack/_inc/blocks/image-compare/view.js?minify=false&ver=14.0" id="jetpack-block-image-compare-js"></script><script src="https://c0.wp.com/c/6.7.1/wp-includes/js/dist/escape-html.min.js" id="wp-escape-html-js"></script><script src="https://c0.wp.com/c/6.7.1/wp-includes/js/dist/hooks.min.js" id="wp-hooks-js"></script><script src="https://c0.wp.com/c/6.7.1/wp-includes/js/dist/i18n.min.js" id="wp-i18n-js"></script><script id="wp-i18n-js-after"> /* <![CDATA[ */ wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); /* ]]> */ </script><script src="https://css-tricks.com/wp-content/plugins/jetpack/_inc/blocks/slideshow/view.js?minify=false&ver=14.0" id="jetpack-block-slideshow-js"></script><script type="text/javascript">window.addEventListener("DOMContentLoaded",(e=>{document.querySelectorAll('img[loading="lazy"]').forEach((e=>{e.getBoundingClientRect().top<=window.innerHeight&&(e.loading="eager")}))}));</script><script src="https://css-tricks.com/wp-content/themes/CSS-Tricks-19/js/min/global-concat.min.js?cache_bust=1732132808837"></script><script> window.addEventListener("load", () => { const consent = truste.cma.callApi("getGDPRConsentDecision","css-tricks.com"); // Google Analytics and Segment are functional if (consent.consentDecision.includes(2) || (consent.source === 'implied' && truste.eu.bindMap.behaviorManager !== 'eu')) { // Google Analytics (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-68528-29', 'auto'); if (typeof articleYear !== "undefined") { ga('set', 'dimension1', articleYear); } if (typeof articleAuthor !== "undefined") { ga('set', 'dimension2', articleAuthor); } if (typeof articleType !== "undefined") { ga('set', 'dimension3', articleType); } ga('send', 'pageview'); // Segment Analytics !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="nnmtLrk127wcC9ggBpAutRr4F4x4TMVz";;analytics.SNIPPET_VERSION="4.15.3"; analytics.load("nnmtLrk127wcC9ggBpAutRr4F4x4TMVz"); const analyticsProperties = {}; if (typeof articleID !== "undefined") { analyticsProperties.article_id = articleID; } if (typeof articleYear !== "undefined") { analyticsProperties.article_year = articleYear; } if (typeof articleAuthor !== "undefined") { analyticsProperties.article_author = articleAuthor; } if (typeof articleType !== "undefined") { analyticsProperties.article_type = articleType; } analytics.page({ properties: analyticsProperties }); }}(); } }); </script><script async src="https://static.codepen.io/assets/embed/ei.js"></script><script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script></body> </html>