[{"data":1,"prerenderedAt":192},["ShallowReactive",2],{"term-l\u002Flight-dark":3,"related-l\u002Flight-dark":179},{"id":4,"title":5,"acronym":6,"body":7,"category":161,"description":162,"difficulty":163,"extension":164,"letter":165,"meta":166,"navigation":83,"path":167,"related":168,"seo":173,"sitemap":174,"stem":177,"subcategory":6,"__hash__":178},"terms\u002Fterms\u002Fl\u002Flight-dark.md","light-dark()",null,{"type":8,"value":9,"toc":155},"minimark",[10,15,19,23,26,30,141,145,151],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 - The Vibe Check",[16,17,18],"p",{},"light-dark() is CSS finally admitting that every site needs both a light and dark color and being tired of writing two separate media query blocks for it. You give it two colors, and it picks the right one automatically based on the page's color scheme. One line instead of a whole prefers-color-scheme media block.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"light-dark() is a CSS color function that takes two color values and returns the first when the element's color scheme is light and the second when it's dark, based on the computed color-scheme property. It requires color-scheme: light dark to be set on the root element to activate, and eliminates the need for separate prefers-color-scheme media query blocks for simple color swaps.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n  color-scheme: light dark;\n}\n\nbody {\n  background: light-dark(white, #1a1a1a);\n  color: light-dark(black, #eee);\n}\n","css","",[38,39,40,56,72,78,85,94,116,136],"code",{"__ignoreMap":36},[41,42,45,49,53],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sMK4o",":",[41,50,52],{"class":51},"spNyl","root",[41,54,55],{"class":47}," {\n",[41,57,59,63,65,69],{"class":43,"line":58},2,[41,60,62],{"class":61},"sqsOY","  color-scheme",[41,64,48],{"class":47},[41,66,68],{"class":67},"sTEyZ"," light dark",[41,70,71],{"class":47},";\n",[41,73,75],{"class":43,"line":74},3,[41,76,77],{"class":47},"}\n",[41,79,81],{"class":43,"line":80},4,[41,82,84],{"emptyLinePlaceholder":83},true,"\n",[41,86,88,92],{"class":43,"line":87},5,[41,89,91],{"class":90},"sBMFI","body",[41,93,55],{"class":47},[41,95,97,100,102,105,108,111,114],{"class":43,"line":96},6,[41,98,99],{"class":61},"  background",[41,101,48],{"class":47},[41,103,104],{"class":67}," light-dark(white",[41,106,107],{"class":47},",",[41,109,110],{"class":47}," #",[41,112,113],{"class":67},"1a1a1a)",[41,115,71],{"class":47},[41,117,119,122,124,127,129,131,134],{"class":43,"line":118},7,[41,120,121],{"class":61},"  color",[41,123,48],{"class":47},[41,125,126],{"class":67}," light-dark(black",[41,128,107],{"class":47},[41,130,110],{"class":47},[41,132,133],{"class":67},"eee)",[41,135,71],{"class":47},[41,137,139],{"class":43,"line":138},8,[41,140,77],{"class":47},[11,142,144],{"id":143},"when-youll-hear-this","When You'll Hear This",[16,146,147,148,150],{},"\"We replaced half our dark mode media queries with light-dark() and the CSS got so much shorter.\" \u002F \"light-dark() does nothing until you set color-scheme on ",[52,149],{},", that tripped us up at first.\"",[152,153,154],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":58,"depth":58,"links":156},[157,158,159,160],{"id":13,"depth":58,"text":14},{"id":21,"depth":58,"text":22},{"id":28,"depth":58,"text":29},{"id":143,"depth":58,"text":144},"frontend","light-dark() is CSS finally admitting that every site needs both a light and dark color and being tired of writing two separate media query blocks for it.","beginner","md","l",{},"\u002Fterms\u002Fl\u002Flight-dark",[169,170,171,172],"Dark Mode","CSS Variables","Color Scheme","Media Query",{"title":5,"description":162},{"changefreq":175,"priority":176},"weekly",0.7,"terms\u002Fl\u002Flight-dark","_pllQ1Kk-Ni3fdNI6WvJOwQ0DeXThYsfUJ6dqdLOawo",[180,183,186,189],{"title":171,"path":181,"acronym":6,"category":161,"difficulty":163,"description":182},"\u002Fterms\u002Fc\u002Fcolor-scheme","CSS color-scheme tells the browser whether your page supports light mode, dark mode, or both.",{"title":170,"path":184,"acronym":6,"category":161,"difficulty":163,"description":185},"\u002Fterms\u002Fc\u002Fcss-variables","CSS Variables (officially called Custom Properties) let you store values in CSS and reuse them everywhere.",{"title":169,"path":187,"acronym":6,"category":161,"difficulty":163,"description":188},"\u002Fterms\u002Fd\u002Fdark-mode","The feature every user demands and every developer underestimates. 'Just make the background dark' they said. It'll be easy, they said.",{"title":172,"path":190,"acronym":6,"category":161,"difficulty":163,"description":191},"\u002Fterms\u002Fm\u002Fmedia-query","A media query is a CSS if-statement based on screen conditions. 'If the screen is narrower than 768px, apply these styles.",1792528097871]