{"id":4579,"date":"2024-11-25T14:44:01","date_gmt":"2024-11-25T19:44:01","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=4579"},"modified":"2024-11-25T14:44:02","modified_gmt":"2024-11-25T19:44:02","slug":"tweaking-one-set-of-colors-for-light-dark-modes","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/tweaking-one-set-of-colors-for-light-dark-modes\/","title":{"rendered":"Tweaking One Set of Colors for Light\/Dark Modes"},"content":{"rendered":"\n<p>Often when dealing light\/dark modes, you&#8217;re thinking about <em>entirely changing<\/em> colors. A light color becomes a dark color and vice versa. That&#8217;s the nature of the situation!<\/p>\n\n\n\n<p>But think about the oranges. The pinks. The greens and blues. Those are colors that have a decent chance of working OK in both a dark and light theme. <\/p>\n\n\n\n<p>Here&#8217;s the thing:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If you&#8217;ve got a pink that looks great on light, it probably should be brightened a bit on dark.<\/li>\n\n\n\n<li>Or, if you&#8217;ve got a pink that looks great on dark, it probably should be darkened a bit on light.<\/li>\n<\/ul>\n\n\n\n<p>An example of something like this is syntax highlighting colors so that&#8217;s what we&#8217;ll do here. But it could be anything: illustration parts, your <code>&lt;hr \/&gt;<\/code> elment, buttons, whatever.<\/p>\n\n\n\n<p>Here&#8217;s a pink:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.some-tag<\/span> {\n  <span class=\"hljs-comment\">\/* pink! *\/<\/span>\n  <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">oklch<\/span>(<span class=\"hljs-number\">0.75<\/span> <span class=\"hljs-number\">0.2<\/span> <span class=\"hljs-number\">328<\/span>);\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Which looks fine on white (and has accessible contrast):<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"772\" height=\"282\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-23-at-9.54.49%E2%80%AFAM.png?resize=772%2C282&#038;ssl=1\" alt=\"\" class=\"wp-image-4583\" style=\"width:500px\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-23-at-9.54.49%E2%80%AFAM.png?w=772&amp;ssl=1 772w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-23-at-9.54.49%E2%80%AFAM.png?resize=300%2C110&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-23-at-9.54.49%E2%80%AFAM.png?resize=768%2C281&amp;ssl=1 768w\" sizes=\"auto, (max-width: 772px) 100vw, 772px\" \/><\/figure>\n<\/div>\n\n\n<p>Set it on black, and it still has accessible contrast, and looks&#8230; also fine.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"714\" height=\"302\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-23-at-9.56.08%E2%80%AFAM.png?resize=714%2C302&#038;ssl=1\" alt=\"\" class=\"wp-image-4584\" style=\"width:500px\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-23-at-9.56.08%E2%80%AFAM.png?w=714&amp;ssl=1 714w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-23-at-9.56.08%E2%80%AFAM.png?resize=300%2C127&amp;ssl=1 300w\" sizes=\"auto, (max-width: 714px) 100vw, 714px\" \/><\/figure>\n<\/div>\n\n\n<p>But I think we could do better. We certainly could have picked a color that <em>didn&#8217;t<\/em> meet accessible contrast requirements. But also, I think it would look a bit nicer if that pink was darkened up a smidge on light and lightened up a bit dark. <\/p>\n\n\n\n<p>Fortunately we&#8217;ve set the color in OKLCH which has perceptually uniform brightness. Meaning if we have a bunch of colors, and we notch them all up in brightness by the same number, they will all appear <em>about the same amount brighter<\/em> to our human eyes.<\/p>\n\n\n\n<p>A way to approach this is to pick a number of how much we want to bright, darken (or both). Like:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">html<\/span> {\n  <span class=\"hljs-attribute\">color-scheme<\/span>: light dark;\n\n  <span class=\"hljs-attribute\">--colorAdjuster<\/span>: -<span class=\"hljs-number\">0.1<\/span>;\n  @media (<span class=\"hljs-attribute\">prefers-color-scheme<\/span>: light) {\n    --colorAdjuster: <span class=\"hljs-number\">0.133<\/span>;\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Then use this number to adjust our color(s):<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.some-tag<\/span> {\n  <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">oklch<\/span>(calc(<span class=\"hljs-number\">0.75<\/span> - var(--colorAdjuster)) <span class=\"hljs-number\">0.2<\/span> <span class=\"hljs-number\">328<\/span>);\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Here&#8217;s an example doing that with syntax highlighting. You&#8217;ll need to adjust your color mode preference to see the colors change.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yLmQoed\/36ebba2a4ff44b1af5223707ff6f3904\" src=\"\/\/codepen.io\/anon\/embed\/yLmQoed\/36ebba2a4ff44b1af5223707ff6f3904?height=450&amp;theme-id=47434&amp;slug-hash=yLmQoed\/36ebba2a4ff44b1af5223707ff6f3904&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yLmQoed\/36ebba2a4ff44b1af5223707ff6f3904\" title=\"CodePen Embed yLmQoed\/36ebba2a4ff44b1af5223707ff6f3904\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Here&#8217;s both modes as images:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"842\" height=\"312\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-23-at-10.19.53%E2%80%AFAM.png?resize=842%2C312&#038;ssl=1\" alt=\"\" class=\"wp-image-4588\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-23-at-10.19.53%E2%80%AFAM.png?w=842&amp;ssl=1 842w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-23-at-10.19.53%E2%80%AFAM.png?resize=300%2C111&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-23-at-10.19.53%E2%80%AFAM.png?resize=768%2C285&amp;ssl=1 768w\" sizes=\"auto, (max-width: 842px) 100vw, 842px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"834\" height=\"302\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-23-at-10.19.37%E2%80%AFAM.png?resize=834%2C302&#038;ssl=1\" alt=\"\" class=\"wp-image-4589\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-23-at-10.19.37%E2%80%AFAM.png?w=834&amp;ssl=1 834w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-23-at-10.19.37%E2%80%AFAM.png?resize=300%2C109&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-23-at-10.19.37%E2%80%AFAM.png?resize=768%2C278&amp;ssl=1 768w\" sizes=\"auto, (max-width: 834px) 100vw, 834px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>In my opinion, these colors have a very similar feel, but each color, from a base, was darkened a bit in light mode and lightened a bit in dark mode.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A CSS Custom Property can be used to tweak colors darker when shown on light and lighter when shown on dark, making them pop in both cases. <\/p>\n","protected":false},"author":1,"featured_media":4524,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[7,157],"class_list":["post-4579","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-css","tag-dark-theme"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/11\/pexels-photo-5138933.jpeg?fit=1733%2C1300&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/4579","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=4579"}],"version-history":[{"count":10,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/4579\/revisions"}],"predecessor-version":[{"id":4593,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/4579\/revisions\/4593"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/4524"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=4579"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=4579"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=4579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}