[{"data":1,"prerenderedAt":1105},["ShallowReactive",2],{"guide-css-custom-properties-color-values":3},{"id":4,"title":5,"body":6,"date":1097,"description":1098,"extension":1099,"meta":1100,"navigation":79,"path":1101,"readingTime":111,"seo":1102,"stem":1103,"__hash__":1104},"guides\u002Fguides\u002Fcss-custom-properties-color-values.md","CSS Custom Properties for Color Values: Design Tokens in Practice",{"type":7,"value":8,"toc":1087},"minimark",[9,13,18,30,148,154,158,161,497,503,507,510,621,635,642,701,708,712,715,822,825,903,910,966,970,973,1014,1017,1021,1046,1050,1071,1075,1083],[10,11,12],"p",{},"CSS custom properties (also called CSS variables) give you a way to define reusable values that update dynamically across your entire stylesheet. For color management, they are the foundation of design token systems, dark mode support, and consistent theming — all without a preprocessor.",[14,15,17],"h2",{"id":16},"why-custom-properties-for-colors","Why Custom Properties for Colors",[10,19,20,21,25,26,29],{},"Hard-coded color values scattered through a stylesheet create maintenance problems. When your brand blue changes from ",[22,23,24],"code",{},"#3B82F6"," to ",[22,27,28],{},"#2563EB",", you must find and replace every instance. With custom properties, you change one definition:",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-css shiki shiki-themes github-light github-dark",":root {\n  --color-primary: #3B82F6;\n}\n\n.button {\n  background-color: var(--color-primary);\n}\n\n.heading {\n  color: var(--color-primary);\n}\n","css","",[22,38,39,52,68,74,81,89,109,114,119,127,143],{"__ignoreMap":36},[40,41,44,48],"span",{"class":42,"line":43},"line",1,[40,45,47],{"class":46},"sScJk",":root",[40,49,51],{"class":50},"sVt8B"," {\n",[40,53,55,59,62,65],{"class":42,"line":54},2,[40,56,58],{"class":57},"s4XuR","  --color-primary",[40,60,61],{"class":50},": ",[40,63,24],{"class":64},"sj4cs",[40,66,67],{"class":50},";\n",[40,69,71],{"class":42,"line":70},3,[40,72,73],{"class":50},"}\n",[40,75,77],{"class":42,"line":76},4,[40,78,80],{"emptyLinePlaceholder":79},true,"\n",[40,82,84,87],{"class":42,"line":83},5,[40,85,86],{"class":46},".button",[40,88,51],{"class":50},[40,90,92,95,97,100,103,106],{"class":42,"line":91},6,[40,93,94],{"class":64},"  background-color",[40,96,61],{"class":50},[40,98,99],{"class":64},"var",[40,101,102],{"class":50},"(",[40,104,105],{"class":57},"--color-primary",[40,107,108],{"class":50},");\n",[40,110,112],{"class":42,"line":111},7,[40,113,73],{"class":50},[40,115,117],{"class":42,"line":116},8,[40,118,80],{"emptyLinePlaceholder":79},[40,120,122,125],{"class":42,"line":121},9,[40,123,124],{"class":46},".heading",[40,126,51],{"class":50},[40,128,130,133,135,137,139,141],{"class":42,"line":129},10,[40,131,132],{"class":64},"  color",[40,134,61],{"class":50},[40,136,99],{"class":64},[40,138,102],{"class":50},[40,140,105],{"class":57},[40,142,108],{"class":50},[40,144,146],{"class":42,"line":145},11,[40,147,73],{"class":50},[10,149,150,151,153],{},"Update ",[22,152,105],{}," once, and every element using it updates automatically. This is particularly powerful for dark mode — you redefine the variables under a different selector rather than overriding individual properties.",[14,155,157],{"id":156},"setting-up-a-color-token-system","Setting Up a Color Token System",[10,159,160],{},"A well-structured color token system has three layers: primitive tokens, semantic tokens, and component tokens.",[31,162,164],{"className":33,"code":163,"language":35,"meta":36,"style":36},"\u002F* Layer 1: Primitive tokens — raw color values *\u002F\n:root {\n  --blue-500: #3B82F6;\n  --blue-600: #2563EB;\n  --blue-700: #1D4ED8;\n  --gray-100: #F3F4F6;\n  --gray-900: #111827;\n  --red-500: #EF4444;\n  --green-500: #22C55E;\n}\n\n\u002F* Layer 2: Semantic tokens — meaning-based aliases *\u002F\n:root {\n  --color-primary: var(--blue-500);\n  --color-primary-hover: var(--blue-600);\n  --color-bg: var(--gray-100);\n  --color-text: var(--gray-900);\n  --color-danger: var(--red-500);\n  --color-success: var(--green-500);\n}\n\n\u002F* Layer 3: Component tokens — specific to UI elements *\u002F\n:root {\n  --button-bg: var(--color-primary);\n  --button-text: white;\n  --card-bg: white;\n  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n",[22,165,166,172,178,189,200,212,224,236,248,260,264,268,274,281,297,314,331,348,365,382,387,392,398,405,421,434,446,492],{"__ignoreMap":36},[40,167,168],{"class":42,"line":43},[40,169,171],{"class":170},"sJ8bj","\u002F* Layer 1: Primitive tokens — raw color values *\u002F\n",[40,173,174,176],{"class":42,"line":54},[40,175,47],{"class":46},[40,177,51],{"class":50},[40,179,180,183,185,187],{"class":42,"line":70},[40,181,182],{"class":57},"  --blue-500",[40,184,61],{"class":50},[40,186,24],{"class":64},[40,188,67],{"class":50},[40,190,191,194,196,198],{"class":42,"line":76},[40,192,193],{"class":57},"  --blue-600",[40,195,61],{"class":50},[40,197,28],{"class":64},[40,199,67],{"class":50},[40,201,202,205,207,210],{"class":42,"line":83},[40,203,204],{"class":57},"  --blue-700",[40,206,61],{"class":50},[40,208,209],{"class":64},"#1D4ED8",[40,211,67],{"class":50},[40,213,214,217,219,222],{"class":42,"line":91},[40,215,216],{"class":57},"  --gray-100",[40,218,61],{"class":50},[40,220,221],{"class":64},"#F3F4F6",[40,223,67],{"class":50},[40,225,226,229,231,234],{"class":42,"line":111},[40,227,228],{"class":57},"  --gray-900",[40,230,61],{"class":50},[40,232,233],{"class":64},"#111827",[40,235,67],{"class":50},[40,237,238,241,243,246],{"class":42,"line":116},[40,239,240],{"class":57},"  --red-500",[40,242,61],{"class":50},[40,244,245],{"class":64},"#EF4444",[40,247,67],{"class":50},[40,249,250,253,255,258],{"class":42,"line":121},[40,251,252],{"class":57},"  --green-500",[40,254,61],{"class":50},[40,256,257],{"class":64},"#22C55E",[40,259,67],{"class":50},[40,261,262],{"class":42,"line":129},[40,263,73],{"class":50},[40,265,266],{"class":42,"line":145},[40,267,80],{"emptyLinePlaceholder":79},[40,269,271],{"class":42,"line":270},12,[40,272,273],{"class":170},"\u002F* Layer 2: Semantic tokens — meaning-based aliases *\u002F\n",[40,275,277,279],{"class":42,"line":276},13,[40,278,47],{"class":46},[40,280,51],{"class":50},[40,282,284,286,288,290,292,295],{"class":42,"line":283},14,[40,285,58],{"class":57},[40,287,61],{"class":50},[40,289,99],{"class":64},[40,291,102],{"class":50},[40,293,294],{"class":57},"--blue-500",[40,296,108],{"class":50},[40,298,300,303,305,307,309,312],{"class":42,"line":299},15,[40,301,302],{"class":57},"  --color-primary-hover",[40,304,61],{"class":50},[40,306,99],{"class":64},[40,308,102],{"class":50},[40,310,311],{"class":57},"--blue-600",[40,313,108],{"class":50},[40,315,317,320,322,324,326,329],{"class":42,"line":316},16,[40,318,319],{"class":57},"  --color-bg",[40,321,61],{"class":50},[40,323,99],{"class":64},[40,325,102],{"class":50},[40,327,328],{"class":57},"--gray-100",[40,330,108],{"class":50},[40,332,334,337,339,341,343,346],{"class":42,"line":333},17,[40,335,336],{"class":57},"  --color-text",[40,338,61],{"class":50},[40,340,99],{"class":64},[40,342,102],{"class":50},[40,344,345],{"class":57},"--gray-900",[40,347,108],{"class":50},[40,349,351,354,356,358,360,363],{"class":42,"line":350},18,[40,352,353],{"class":57},"  --color-danger",[40,355,61],{"class":50},[40,357,99],{"class":64},[40,359,102],{"class":50},[40,361,362],{"class":57},"--red-500",[40,364,108],{"class":50},[40,366,368,371,373,375,377,380],{"class":42,"line":367},19,[40,369,370],{"class":57},"  --color-success",[40,372,61],{"class":50},[40,374,99],{"class":64},[40,376,102],{"class":50},[40,378,379],{"class":57},"--green-500",[40,381,108],{"class":50},[40,383,385],{"class":42,"line":384},20,[40,386,73],{"class":50},[40,388,390],{"class":42,"line":389},21,[40,391,80],{"emptyLinePlaceholder":79},[40,393,395],{"class":42,"line":394},22,[40,396,397],{"class":170},"\u002F* Layer 3: Component tokens — specific to UI elements *\u002F\n",[40,399,401,403],{"class":42,"line":400},23,[40,402,47],{"class":46},[40,404,51],{"class":50},[40,406,408,411,413,415,417,419],{"class":42,"line":407},24,[40,409,410],{"class":57},"  --button-bg",[40,412,61],{"class":50},[40,414,99],{"class":64},[40,416,102],{"class":50},[40,418,105],{"class":57},[40,420,108],{"class":50},[40,422,424,427,429,432],{"class":42,"line":423},25,[40,425,426],{"class":57},"  --button-text",[40,428,61],{"class":50},[40,430,431],{"class":64},"white",[40,433,67],{"class":50},[40,435,437,440,442,444],{"class":42,"line":436},26,[40,438,439],{"class":57},"  --card-bg",[40,441,61],{"class":50},[40,443,431],{"class":64},[40,445,67],{"class":50},[40,447,449,452,454,457,460,464,467,469,472,474,476,479,481,483,485,487,490],{"class":42,"line":448},27,[40,450,451],{"class":57},"  --card-shadow",[40,453,61],{"class":50},[40,455,456],{"class":64},"0",[40,458,459],{"class":64}," 1",[40,461,463],{"class":462},"szBVR","px",[40,465,466],{"class":64}," 3",[40,468,463],{"class":462},[40,470,471],{"class":64}," rgba",[40,473,102],{"class":50},[40,475,456],{"class":64},[40,477,478],{"class":50},", ",[40,480,456],{"class":64},[40,482,478],{"class":50},[40,484,456],{"class":64},[40,486,478],{"class":50},[40,488,489],{"class":64},"0.1",[40,491,108],{"class":50},[40,493,495],{"class":42,"line":494},28,[40,496,73],{"class":50},[10,498,499,500,502],{},"Primitive tokens should rarely appear outside the ",[22,501,47],{}," definition. Components reference semantic tokens, and semantic tokens reference primitives. This separation makes rebranding or theming a configuration change, not a refactor.",[14,504,506],{"id":505},"dark-mode-with-custom-properties","Dark Mode With Custom Properties",[10,508,509],{},"Custom properties make dark mode almost trivial. Override semantic tokens under your dark mode selector:",[31,511,513],{"className":33,"code":512,"language":35,"meta":36,"style":36},".dark {\n  --color-bg: var(--gray-900);\n  --color-text: var(--gray-100);\n  --color-primary: var(--blue-400);\n  --card-bg: var(--gray-800);\n  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n",[22,514,515,522,536,550,565,580,617],{"__ignoreMap":36},[40,516,517,520],{"class":42,"line":43},[40,518,519],{"class":46},".dark",[40,521,51],{"class":50},[40,523,524,526,528,530,532,534],{"class":42,"line":54},[40,525,319],{"class":57},[40,527,61],{"class":50},[40,529,99],{"class":64},[40,531,102],{"class":50},[40,533,345],{"class":57},[40,535,108],{"class":50},[40,537,538,540,542,544,546,548],{"class":42,"line":70},[40,539,336],{"class":57},[40,541,61],{"class":50},[40,543,99],{"class":64},[40,545,102],{"class":50},[40,547,328],{"class":57},[40,549,108],{"class":50},[40,551,552,554,556,558,560,563],{"class":42,"line":76},[40,553,58],{"class":57},[40,555,61],{"class":50},[40,557,99],{"class":64},[40,559,102],{"class":50},[40,561,562],{"class":57},"--blue-400",[40,564,108],{"class":50},[40,566,567,569,571,573,575,578],{"class":42,"line":83},[40,568,439],{"class":57},[40,570,61],{"class":50},[40,572,99],{"class":64},[40,574,102],{"class":50},[40,576,577],{"class":57},"--gray-800",[40,579,108],{"class":50},[40,581,582,584,586,588,590,592,594,596,598,600,602,604,606,608,610,612,615],{"class":42,"line":91},[40,583,451],{"class":57},[40,585,61],{"class":50},[40,587,456],{"class":64},[40,589,459],{"class":64},[40,591,463],{"class":462},[40,593,466],{"class":64},[40,595,463],{"class":462},[40,597,471],{"class":64},[40,599,102],{"class":50},[40,601,456],{"class":64},[40,603,478],{"class":50},[40,605,456],{"class":64},[40,607,478],{"class":50},[40,609,456],{"class":64},[40,611,478],{"class":50},[40,613,614],{"class":64},"0.3",[40,616,108],{"class":50},[40,618,619],{"class":42,"line":111},[40,620,73],{"class":50},[10,622,623,624,626,627,630,631,634],{},"When the ",[22,625,519],{}," class is applied to the ",[22,628,629],{},"\u003Chtml>"," element, every semantic token re-resolves to its dark-mode value. Components that reference ",[22,632,633],{},"var(--color-bg)"," automatically receive the dark background. No component code changes required.",[10,636,637,638,641],{},"This pattern works with ",[22,639,640],{},"@media (prefers-color-scheme: dark)"," as well:",[31,643,645],{"className":33,"code":644,"language":35,"meta":36,"style":36},"@media (prefers-color-scheme: dark) {\n  :root {\n    --color-bg: var(--gray-900);\n    --color-text: var(--gray-100);\n  }\n}\n",[22,646,647,655,662,677,692,697],{"__ignoreMap":36},[40,648,649,652],{"class":42,"line":43},[40,650,651],{"class":462},"@media",[40,653,654],{"class":50}," (prefers-color-scheme: dark) {\n",[40,656,657,660],{"class":42,"line":54},[40,658,659],{"class":46},"  :root",[40,661,51],{"class":50},[40,663,664,667,669,671,673,675],{"class":42,"line":70},[40,665,666],{"class":57},"    --color-bg",[40,668,61],{"class":50},[40,670,99],{"class":64},[40,672,102],{"class":50},[40,674,345],{"class":57},[40,676,108],{"class":50},[40,678,679,682,684,686,688,690],{"class":42,"line":76},[40,680,681],{"class":57},"    --color-text",[40,683,61],{"class":50},[40,685,99],{"class":64},[40,687,102],{"class":50},[40,689,328],{"class":57},[40,691,108],{"class":50},[40,693,694],{"class":42,"line":83},[40,695,696],{"class":50},"  }\n",[40,698,699],{"class":42,"line":91},[40,700,73],{"class":50},[10,702,703,704,707],{},"For sites using ",[22,705,706],{},"@nuxtjs\u002Fcolor-mode",", the module manages the class switching automatically.",[14,709,711],{"id":710},"color-format-considerations","Color Format Considerations",[10,713,714],{},"Custom properties store color values as strings. The format you choose affects what you can do with the value downstream:",[716,717,718,737],"table",{},[719,720,721],"thead",{},[722,723,724,728,731,734],"tr",{},[725,726,727],"th",{},"Format",[725,729,730],{},"Alpha Support",[725,732,733],{},"Composable",[725,735,736],{},"Example",[738,739,740,756,775,792,807],"tbody",{},[722,741,742,746,749,752],{},[743,744,745],"td",{},"Hex",[743,747,748],{},"Limited (8-digit)",[743,750,751],{},"No",[743,753,754],{},[22,755,24],{},[722,757,758,761,767,770],{},[743,759,760],{},"RGB",[743,762,763,764],{},"Yes, via ",[22,765,766],{},"rgba()",[743,768,769],{},"Yes",[743,771,772],{},[22,773,774],{},"rgb(59, 130, 246)",[722,776,777,780,785,787],{},[743,778,779],{},"HSL",[743,781,763,782],{},[22,783,784],{},"hsla()",[743,786,769],{},[743,788,789],{},[22,790,791],{},"hsl(217, 91%, 60%)",[722,793,794,797,800,802],{},[743,795,796],{},"OKLCH",[743,798,799],{},"Yes, native",[743,801,769],{},[743,803,804],{},[22,805,806],{},"oklch(0.62 0.19 264)",[722,808,809,812,815,817],{},[743,810,811],{},"Color-mix",[743,813,814],{},"Full",[743,816,769],{},[743,818,819],{},[22,820,821],{},"color-mix(in srgb, var(--color-primary) 80%, white)",[10,823,824],{},"If you need to adjust opacity dynamically, RGB or HSL formats work better than hex:",[31,826,828],{"className":33,"code":827,"language":35,"meta":36,"style":36},":root {\n  --color-primary-rgb: 59, 130, 246;\n}\n\n.overlay {\n  background-color: rgba(var(--color-primary-rgb), 0.5);\n}\n",[22,829,830,836,858,862,866,873,899],{"__ignoreMap":36},[40,831,832,834],{"class":42,"line":43},[40,833,47],{"class":46},[40,835,51],{"class":50},[40,837,838,841,843,846,848,851,853,856],{"class":42,"line":54},[40,839,840],{"class":57},"  --color-primary-rgb",[40,842,61],{"class":50},[40,844,845],{"class":64},"59",[40,847,478],{"class":50},[40,849,850],{"class":64},"130",[40,852,478],{"class":50},[40,854,855],{"class":64},"246",[40,857,67],{"class":50},[40,859,860],{"class":42,"line":70},[40,861,73],{"class":50},[40,863,864],{"class":42,"line":76},[40,865,80],{"emptyLinePlaceholder":79},[40,867,868,871],{"class":42,"line":83},[40,869,870],{"class":46},".overlay",[40,872,51],{"class":50},[40,874,875,877,879,882,884,886,888,891,894,897],{"class":42,"line":91},[40,876,94],{"class":64},[40,878,61],{"class":50},[40,880,881],{"class":64},"rgba",[40,883,102],{"class":50},[40,885,99],{"class":64},[40,887,102],{"class":50},[40,889,890],{"class":57},"--color-primary-rgb",[40,892,893],{"class":50},"), ",[40,895,896],{"class":64},"0.5",[40,898,108],{"class":50},[40,900,901],{"class":42,"line":111},[40,902,73],{"class":50},[10,904,905,906,909],{},"The modern ",[22,907,908],{},"color-mix()"," function eliminates the need for separate RGB variables:",[31,911,913],{"className":33,"code":912,"language":35,"meta":36,"style":36},".button:hover {\n  background-color: color-mix(in srgb, var(--color-primary) 85%, white);\n}\n",[22,914,915,922,962],{"__ignoreMap":36},[40,916,917,920],{"class":42,"line":43},[40,918,919],{"class":46},".button:hover",[40,921,51],{"class":50},[40,923,924,926,928,931,933,936,939,941,943,945,947,950,953,956,958,960],{"class":42,"line":54},[40,925,94],{"class":64},[40,927,61],{"class":50},[40,929,930],{"class":64},"color-mix",[40,932,102],{"class":50},[40,934,935],{"class":57},"in",[40,937,938],{"class":64}," srgb",[40,940,478],{"class":50},[40,942,99],{"class":64},[40,944,102],{"class":50},[40,946,105],{"class":57},[40,948,949],{"class":50},") ",[40,951,952],{"class":64},"85",[40,954,955],{"class":462},"%",[40,957,478],{"class":50},[40,959,431],{"class":64},[40,961,108],{"class":50},[40,963,964],{"class":42,"line":70},[40,965,73],{"class":50},[14,967,969],{"id":968},"fallback-values","Fallback Values",[10,971,972],{},"Custom properties support fallback values when a variable is not defined:",[31,974,976],{"className":33,"code":975,"language":35,"meta":36,"style":36},".badge {\n  color: var(--badge-color, var(--color-danger));\n}\n",[22,977,978,985,1010],{"__ignoreMap":36},[40,979,980,983],{"class":42,"line":43},[40,981,982],{"class":46},".badge",[40,984,51],{"class":50},[40,986,987,989,991,993,995,998,1000,1002,1004,1007],{"class":42,"line":54},[40,988,132],{"class":64},[40,990,61],{"class":50},[40,992,99],{"class":64},[40,994,102],{"class":50},[40,996,997],{"class":57},"--badge-color",[40,999,478],{"class":50},[40,1001,99],{"class":64},[40,1003,102],{"class":50},[40,1005,1006],{"class":57},"--color-danger",[40,1008,1009],{"class":50},"));\n",[40,1011,1012],{"class":42,"line":70},[40,1013,73],{"class":50},[10,1015,1016],{},"Use fallbacks for component tokens that may not always be defined. This keeps components functional even when a specific theme does not override the token.",[14,1018,1020],{"id":1019},"key-takeaways","Key Takeaways",[1022,1023,1024,1028,1031,1034,1037,1043],"ul",{},[1025,1026,1027],"li",{},"CSS custom properties centralize color definitions — change one value, update the entire theme",[1025,1029,1030],{},"Structure color tokens in three layers: primitive → semantic → component",[1025,1032,1033],{},"Dark mode becomes a selector-based variable override with zero component changes",[1025,1035,1036],{},"Choose RGB\u002FHSL over hex when you need composable alpha values",[1025,1038,1039,1040,1042],{},"Use ",[22,1041,908],{}," for dynamic color manipulation without JavaScript",[1025,1044,1045],{},"Always provide fallback values for optional component tokens",[14,1047,1049],{"id":1048},"related-guides","Related Guides",[1022,1051,1052,1059,1065],{},[1025,1053,1054],{},[1055,1056,1058],"a",{"href":1057},"\u002Fguides\u002Fhex-to-rgb-guide","Hex to RGB: Understanding Color Format Conversion",[1025,1060,1061],{},[1055,1062,1064],{"href":1063},"\u002Fguides\u002Fcolor-models-explained","Color Models Explained: RGB, HSL, HEX, and More",[1025,1066,1067],{},[1055,1068,1070],{"href":1069},"\u002Fguides\u002Fcss-color-values","CSS Color Values: A Complete Reference",[14,1072,1074],{"id":1073},"try-it-yourself","Try It Yourself",[10,1076,1077,1078,1082],{},"Convert hex colors to RGB for composable custom properties with our free ",[1055,1079,1081],{"href":1080},"\u002Ftools\u002Fhex-to-rgb","Hex to RGB"," converter. Enter any hex value and get RGB, HSL, and OKLCH formats ready for your design token system.",[1084,1085,1086],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":36,"searchDepth":54,"depth":54,"links":1088},[1089,1090,1091,1092,1093,1094,1095,1096],{"id":16,"depth":54,"text":17},{"id":156,"depth":54,"text":157},{"id":505,"depth":54,"text":506},{"id":710,"depth":54,"text":711},{"id":968,"depth":54,"text":969},{"id":1019,"depth":54,"text":1020},{"id":1048,"depth":54,"text":1049},{"id":1073,"depth":54,"text":1074},"2026-05-28","Use CSS custom properties to manage color values consistently — dynamic theming, dark mode, and design token systems with practical patterns.","md",{"immutable":79},"\u002Fguides\u002Fcss-custom-properties-color-values",{"title":5,"description":1098},"guides\u002Fcss-custom-properties-color-values","88JqNfJ8cc0OIgSKJ-nrnsVQCMVdy0c6kHQKuWcCY_Y",1780401332790]