[{"data":1,"prerenderedAt":290},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-left":8,"i-ph:caret-right":10,"components-theming":12},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,256,false,"\u003Cpath fill=\"currentColor\" d=\"M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16M40 152h16a8 8 0 0 0 0-16H40v-16h16a8 8 0 0 0 0-16H40V88h16a8 8 0 0 0 0-16H40V56h40v144H40Zm176 48H96V56h120z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32\"\u002F>",{"id":13,"title":14,"body":15,"description":283,"extension":284,"meta":285,"navigation":181,"path":286,"seo":287,"stem":288,"__hash__":289},"docs\u002Fdocs\u002Ftokens\u002Ftheming.md","Theming",{"type":16,"value":17,"toc":281},"minimark",[18,22,41,44,135,138,217,232,277],[19,20,14],"h1",{"id":21},"theming",[23,24,25,26,31,32,36,37,40],"p",{},"Building upon what was described in ",[27,28,30],"a",{"href":29},"\u002Fdocs\u002Ftokens\u002Fcolors","colors",", VUI defines two main themes: dark and light mode. Each theme contains a distinctive set of colors that map to the main color variables. To support both light and dark modes, you should set your color variables with the ",[33,34,35],"code",{},"light"," or ",[33,38,39],{},"dark"," prefix.",[23,42,43],{},"Here's a simple example of how to re-map some of the existing CSS variables:",[45,46,51],"pre",{"className":47,"code":48,"language":49,"meta":50,"style":50},"language-css shiki shiki-themes vitesse-dark vitesse-light vitesse-dark",":root {\n  --light-color-accent: rgb(247, 63, 31);\n  --dark-color-accent: rgb(165, 47, 27);\n}\n","css","",[33,52,53,69,102,129],{"__ignoreMap":50},[54,55,58,62,66],"span",{"class":56,"line":57},"line",1,[54,59,61],{"class":60},"sP76a",":",[54,63,65],{"class":64},"sflEz","root",[54,67,68],{"class":60}," {\n",[54,70,72,75,77,81,84,88,91,94,96,99],{"class":56,"line":71},2,[54,73,74],{"class":64},"  --light-color-accent",[54,76,61],{"class":60},[54,78,80],{"class":79},"sDB6b"," rgb",[54,82,83],{"class":60},"(",[54,85,87],{"class":86},"socUO","247",[54,89,90],{"class":60},",",[54,92,93],{"class":86}," 63",[54,95,90],{"class":60},[54,97,98],{"class":86}," 31",[54,100,101],{"class":60},");\n",[54,103,105,108,110,112,114,117,119,122,124,127],{"class":56,"line":104},3,[54,106,107],{"class":64},"  --dark-color-accent",[54,109,61],{"class":60},[54,111,80],{"class":79},[54,113,83],{"class":60},[54,115,116],{"class":86},"165",[54,118,90],{"class":60},[54,120,121],{"class":86}," 47",[54,123,90],{"class":60},[54,125,126],{"class":86}," 27",[54,128,101],{"class":60},[54,130,132],{"class":56,"line":131},4,[54,133,134],{"class":60},"}\n",[23,136,137],{},"Under the hood, VUI automatically sets the correct CSS variable based on the active theme:",[45,139,141],{"className":47,"code":140,"language":49,"meta":50,"style":50},":root.light {\n  --color-accent: var(--light-color-accent);\n}\n\n:root.dark {\n  --color-accent: var(--dark-color-accent);\n}\n",[33,142,143,156,173,177,183,196,212],{"__ignoreMap":50},[54,144,145,147,149,152,154],{"class":56,"line":57},[54,146,61],{"class":60},[54,148,65],{"class":64},[54,150,151],{"class":60},".",[54,153,35],{"class":64},[54,155,68],{"class":60},[54,157,158,161,163,166,168,171],{"class":56,"line":71},[54,159,160],{"class":64},"  --color-accent",[54,162,61],{"class":60},[54,164,165],{"class":79}," var",[54,167,83],{"class":60},[54,169,170],{"class":64},"--light-color-accent",[54,172,101],{"class":60},[54,174,175],{"class":56,"line":104},[54,176,134],{"class":60},[54,178,179],{"class":56,"line":131},[54,180,182],{"emptyLinePlaceholder":181},true,"\n",[54,184,186,188,190,192,194],{"class":56,"line":185},5,[54,187,61],{"class":60},[54,189,65],{"class":64},[54,191,151],{"class":60},[54,193,39],{"class":64},[54,195,68],{"class":60},[54,197,199,201,203,205,207,210],{"class":56,"line":198},6,[54,200,160],{"class":64},[54,202,61],{"class":60},[54,204,165],{"class":79},[54,206,83],{"class":60},[54,208,209],{"class":64},"--dark-color-accent",[54,211,101],{"class":60},[54,213,215],{"class":56,"line":214},7,[54,216,134],{"class":60},[23,218,219,220,223,224,227,228,231],{},"Since VUI supports custom themes, you can use VueUse's ",[33,221,222],{},"useColorMode"," to define your own themes. For example, if you want to add a ",[33,225,226],{},"dark-contrast"," theme, you can implement it by adding a new class to the ",[33,229,230],{},":root"," selector:",[45,233,235],{"className":47,"code":234,"language":49,"meta":50,"style":50},":root.dark-contrast {\n  --color-accent: rgb(255, 0, 0);\n}\n",[33,236,237,249,273],{"__ignoreMap":50},[54,238,239,241,243,245,247],{"class":56,"line":57},[54,240,61],{"class":60},[54,242,65],{"class":64},[54,244,151],{"class":60},[54,246,226],{"class":64},[54,248,68],{"class":60},[54,250,251,253,255,257,259,262,264,267,269,271],{"class":56,"line":71},[54,252,160],{"class":64},[54,254,61],{"class":60},[54,256,80],{"class":79},[54,258,83],{"class":60},[54,260,261],{"class":86},"255",[54,263,90],{"class":60},[54,265,266],{"class":86}," 0",[54,268,90],{"class":60},[54,270,266],{"class":86},[54,272,101],{"class":60},[54,274,275],{"class":56,"line":104},[54,276,134],{"class":60},[278,279,280],"style",{},"html pre.shiki code .sP76a, html code.shiki .sP76a{--shiki-dark:#666666;--shiki-light:#999999;--shiki-default:#666666}html pre.shiki code .sflEz, html code.shiki .sflEz{--shiki-dark:#BD976A;--shiki-light:#B07D48;--shiki-default:#BD976A}html pre.shiki code .sDB6b, html code.shiki .sDB6b{--shiki-dark:#B8A965;--shiki-light:#998418;--shiki-default:#B8A965}html pre.shiki code .socUO, html code.shiki .socUO{--shiki-dark:#4C9A91;--shiki-light:#2F798A;--shiki-default:#4C9A91}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);}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);}",{"title":50,"searchDepth":71,"depth":71,"links":282},[],"Building upon what was described in colors, VUI defines two main themes: dark and light mode. Each theme contains a distinctive set of colors that map to the main color variables. To support both light and dark modes, you should set your color variables with the light or dark prefix.","md",{},"\u002Fdocs\u002Ftokens\u002Ftheming",{"title":14,"description":283},"docs\u002Ftokens\u002Ftheming","F8SASu3kbPMiBicVR_-QV_3thPPADd8sdK-DHyfrJVY",1782200883575]