[{"data":1,"prerenderedAt":1145},["ShallowReactive",2],{"blog-article-/blog/theming-in-react":3,"blog-surround-/blog/theming-in-react":1136},{"id":4,"title":5,"body":6,"canonical":1122,"date":1123,"description":12,"extension":1124,"featured":1125,"image":1126,"meta":1127,"navigation":158,"ogImage":1128,"path":1129,"provider":1130,"published":158,"seo":1131,"stem":1132,"tags":1133,"url":1122,"__hash__":1135},"blog/blog/theming-in-react.md","Theming in React",{"type":7,"value":8,"toc":1110},"minimark",[9,13,20,23,26,29,32,37,52,131,134,142,198,207,243,271,335,338,363,367,372,389,394,510,515,518,522,527,545,553,627,630,645,703,706,718,733,749,753,758,805,808,878,882,885,949,953,956,1061,1065,1068,1106],[10,11,12],"p",{},"Theming is a fascinating topic and a really important one these days as more and more people add light and dark mode to their sites and companies change the theme of their site or part of their site on specific dates to celebrate occasions such as christmas, pride week etc.",[10,14,15],{},[16,17],"img",{"alt":18,"src":19},"color cards showing different colors and tones","https://images.unsplash.com/photo-1595446472721-4b7aa63a2bc7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",[10,21,22],{},"But where do we start when it comes to creating themes? It all starts with the designers. They are the ones who are creating the themes. Each theme should have a list of design tokens that show the theme colors, paddings, margins, fonts, etc. These tokens can be exported from tools such as Figma and then used in a theme component.",[10,24,25],{},"In this example I will show you how to do theming in React using Bit, however if you are not using Bit this will still work in any React app and you can install the one Bit component that we are using though npm or yarn. The Theme Provider component from teambit will convert these design tokens from JSON format to usable CSS variables without you having to do any extra work, which is kinda cool.",[10,27,28],{},"By using Bit we are making sure our components are fully independent and can be easily installed into any app. If you are not using Bit then you will need to change the import statements to use relative paths to your components. And if you are not using typescript then feel free to change the file extension to .jsx and ignore the schema which is just for type checking.",[10,30,31],{},"So lets get started with theming in React.",[33,34,36],"h2",{"id":35},"step-1-create-your-theme-provider-component","Step 1: Create your Theme Provider Component",[38,39,40,44],"ol",{},[41,42,43],"li",{},"Create a new theme provider component.",[41,45,46,47,51],{},"Add a ",[48,49,50],"code",{},"theme-schema.tsx"," file and include all types for your design tokens.",[53,54,59],"pre",{"className":55,"code":56,"language":57,"meta":58,"style":58},"language-js shiki shiki-themes github-light github-dark","export interface ThemeSchema {\n  myColorText?: string\n  myFontSize?: string\n  myBorderColor?: string\n  myBorderRadius?: string\n}\n","js","",[48,60,61,81,95,105,115,125],{"__ignoreMap":58},[62,63,66,70,73,77],"span",{"class":64,"line":65},"line",1,[62,67,69],{"class":68},"szBVR","export",[62,71,72],{"class":68}," interface",[62,74,76],{"class":75},"sScJk"," ThemeSchema",[62,78,80],{"class":79},"sVt8B"," {\n",[62,82,84,88,91],{"class":64,"line":83},2,[62,85,87],{"class":86},"s4XuR","  myColorText",[62,89,90],{"class":68},"?:",[62,92,94],{"class":93},"sj4cs"," string\n",[62,96,98,101,103],{"class":64,"line":97},3,[62,99,100],{"class":86},"  myFontSize",[62,102,90],{"class":68},[62,104,94],{"class":93},[62,106,108,111,113],{"class":64,"line":107},4,[62,109,110],{"class":86},"  myBorderColor",[62,112,90],{"class":68},[62,114,94],{"class":93},[62,116,118,121,123],{"class":64,"line":117},5,[62,119,120],{"class":86},"  myBorderRadius",[62,122,90],{"class":68},[62,124,94],{"class":93},[62,126,128],{"class":64,"line":127},6,[62,129,130],{"class":79},"}\n",[10,132,133],{},"Add a '?' to make the tokens optional so you can use tokens from the default theme as well as override any tokens the theme wants to change.",[38,135,136],{"start":97},[41,137,46,138,141],{},[48,139,140],{},"default-theme-tokens.tsx"," file which should include all design tokens and values for your default theme.",[53,143,147],{"className":144,"code":145,"language":146,"meta":58,"style":58},"language-Js shiki shiki-themes github-light github-dark","import { ThemeSchema } from './theme-schema';\n\nexport const defaultTheme: ThemeSchema = {\n  myColorBackground: '#ffffff',\n  myColorText: 'purple',\n  myFontSize: '26px',\n  myBorderColor: 'purple',\n  myBorderRadius: '5px',\n};\n","Js",[48,148,149,154,160,165,170,175,180,186,192],{"__ignoreMap":58},[62,150,151],{"class":64,"line":65},[62,152,153],{},"import { ThemeSchema } from './theme-schema';\n",[62,155,156],{"class":64,"line":83},[62,157,159],{"emptyLinePlaceholder":158},true,"\n",[62,161,162],{"class":64,"line":97},[62,163,164],{},"export const defaultTheme: ThemeSchema = {\n",[62,166,167],{"class":64,"line":107},[62,168,169],{},"  myColorBackground: '#ffffff',\n",[62,171,172],{"class":64,"line":117},[62,173,174],{},"  myColorText: 'purple',\n",[62,176,177],{"class":64,"line":127},[62,178,179],{},"  myFontSize: '26px',\n",[62,181,183],{"class":64,"line":182},7,[62,184,185],{},"  myBorderColor: 'purple',\n",[62,187,189],{"class":64,"line":188},8,[62,190,191],{},"  myBorderRadius: '5px',\n",[62,193,195],{"class":64,"line":194},9,[62,196,197],{},"};\n",[38,199,200],{"start":107},[41,201,202,203,206],{},"Install the ",[48,204,205],{},"ThemeProvider"," component from teambit.",[53,208,212],{"className":209,"code":210,"language":211,"meta":58,"style":58},"language-bash shiki shiki-themes github-light github-dark","bit install @teambit/base-react.theme.theme-provider\n// or\nnpm install @teambit/base-react.theme.theme-provider\n","bash",[48,213,214,226,234],{"__ignoreMap":58},[62,215,216,219,223],{"class":64,"line":65},[62,217,218],{"class":75},"bit",[62,220,222],{"class":221},"sZZnC"," install",[62,224,225],{"class":221}," @teambit/base-react.theme.theme-provider\n",[62,227,228,231],{"class":64,"line":83},[62,229,230],{"class":75},"//",[62,232,233],{"class":221}," or\n",[62,235,236,239,241],{"class":64,"line":97},[62,237,238],{"class":75},"npm",[62,240,222],{"class":221},[62,242,225],{"class":221},[38,244,245],{"start":117},[41,246,247,248,251,252,255,256,259,260,263,264,267,268,270],{},"Import the ",[48,249,250],{},"createTheme"," function from teambit's Theme Provider component and the ",[48,253,254],{},"defaultTheme"," from the ",[48,257,258],{},"default-theme-tokens"," file in your ",[48,261,262],{},"theme-provider.tsx"," file. Create your theme using the ",[48,265,266],{},"createTheme()"," function passing into it the ",[48,269,254],{}," as the value for theme.",[53,272,274],{"className":55,"code":273,"language":57,"meta":58,"style":58},"import { createTheme } from '@teambit/base-react.theme.theme-provider'\nimport { defaultTheme } from './default-theme-tokens'\n\nexport const Theme = createTheme({\n  theme: defaultTheme\n})\n",[48,275,276,290,302,306,325,330],{"__ignoreMap":58},[62,277,278,281,284,287],{"class":64,"line":65},[62,279,280],{"class":68},"import",[62,282,283],{"class":79}," { createTheme } ",[62,285,286],{"class":68},"from",[62,288,289],{"class":221}," '@teambit/base-react.theme.theme-provider'\n",[62,291,292,294,297,299],{"class":64,"line":83},[62,293,280],{"class":68},[62,295,296],{"class":79}," { defaultTheme } ",[62,298,286],{"class":68},[62,300,301],{"class":221}," './default-theme-tokens'\n",[62,303,304],{"class":64,"line":97},[62,305,159],{"emptyLinePlaceholder":158},[62,307,308,310,313,316,319,322],{"class":64,"line":107},[62,309,69],{"class":68},[62,311,312],{"class":68}," const",[62,314,315],{"class":93}," Theme",[62,317,318],{"class":68}," =",[62,320,321],{"class":75}," createTheme",[62,323,324],{"class":79},"({\n",[62,326,327],{"class":64,"line":117},[62,328,329],{"class":79},"  theme: defaultTheme\n",[62,331,332],{"class":64,"line":127},[62,333,334],{"class":79},"})\n",[10,336,337],{},"You supply the design tokens directly to the createTheme function and it does the rest for you to convert the tokens to usable css (both in modules and directly in your css).",[38,339,340],{"start":127},[41,341,342,343,350,351,356,357,362],{},"Add ",[344,345,349],"a",{"href":346,"rel":347},"https://bit.dev/learn-bit-react/theming/themes/theme-provider/~code/theme-provider.composition.tsx",[348],"nofollow","compositions",", ",[344,352,355],{"href":353,"rel":354},"https://bit.dev/learn-bit-react/theming/themes/theme-provider/~code/theme-provider.spec.tsx",[348],"tests"," and ",[344,358,361],{"href":359,"rel":360},"https://bit.dev/learn-bit-react/theming/themes/theme-provider/~code/theme-provider.docs.mdx",[348],"docs",".",[33,364,366],{"id":365},"step-2-use-your-theme-provider","Step 2: Use your Theme Provider",[38,368,369],{},[41,370,371],{},"Import the Theme from the ThemeProvider component you created.",[53,373,375],{"className":55,"code":374,"language":57,"meta":58,"style":58},"import { Theme } from '@learn-bit-react/theming.themes.theme-provider'\n",[48,376,377],{"__ignoreMap":58},[62,378,379,381,384,386],{"class":64,"line":65},[62,380,280],{"class":68},[62,382,383],{"class":79}," { Theme } ",[62,385,286],{"class":68},[62,387,388],{"class":221}," '@learn-bit-react/theming.themes.theme-provider'\n",[38,390,391],{"start":83},[41,392,393],{},"Wrap all components in the theme provider to see the theme applied to your components.",[53,395,397],{"className":55,"code":396,"language":57,"meta":58,"style":58},"import React from 'react'\nimport { Theme } from '@learn-bit-react/theming.themes.theme-provider'\nimport { Button } from '@learn-bit-react/theming.example.button'\n\nexport const MyApp = () => {\n  return (\n    \u003CTheme.ThemeProvider>\n      \u003CButton>Hello\u003C/Button>\n    \u003C/Theme.ThemeProvider>\n  )\n}\n",[48,398,399,411,421,433,437,456,464,475,490,499,505],{"__ignoreMap":58},[62,400,401,403,406,408],{"class":64,"line":65},[62,402,280],{"class":68},[62,404,405],{"class":79}," React ",[62,407,286],{"class":68},[62,409,410],{"class":221}," 'react'\n",[62,412,413,415,417,419],{"class":64,"line":83},[62,414,280],{"class":68},[62,416,383],{"class":79},[62,418,286],{"class":68},[62,420,388],{"class":221},[62,422,423,425,428,430],{"class":64,"line":97},[62,424,280],{"class":68},[62,426,427],{"class":79}," { Button } ",[62,429,286],{"class":68},[62,431,432],{"class":221}," '@learn-bit-react/theming.example.button'\n",[62,434,435],{"class":64,"line":107},[62,436,159],{"emptyLinePlaceholder":158},[62,438,439,441,443,446,448,451,454],{"class":64,"line":117},[62,440,69],{"class":68},[62,442,312],{"class":68},[62,444,445],{"class":75}," MyApp",[62,447,318],{"class":68},[62,449,450],{"class":79}," () ",[62,452,453],{"class":68},"=>",[62,455,80],{"class":79},[62,457,458,461],{"class":64,"line":127},[62,459,460],{"class":68},"  return",[62,462,463],{"class":79}," (\n",[62,465,466,469,472],{"class":64,"line":182},[62,467,468],{"class":79},"    \u003C",[62,470,471],{"class":93},"Theme.ThemeProvider",[62,473,474],{"class":79},">\n",[62,476,477,480,483,486,488],{"class":64,"line":188},[62,478,479],{"class":79},"      \u003C",[62,481,482],{"class":93},"Button",[62,484,485],{"class":79},">Hello\u003C/",[62,487,482],{"class":93},[62,489,474],{"class":79},[62,491,492,495,497],{"class":64,"line":194},[62,493,494],{"class":79},"    \u003C/",[62,496,471],{"class":93},[62,498,474],{"class":79},[62,500,502],{"class":64,"line":501},10,[62,503,504],{"class":79},"  )\n",[62,506,508],{"class":64,"line":507},11,[62,509,130],{"class":79},[511,512,514],"h3",{"id":513},"button-using-default-theme","Button using Default Theme",[10,516,517],{},"You can install and use the Button component from this demo as an example or create your own and add some styles to it using css variables.",[33,519,521],{"id":520},"step-3-create-a-dark-theme-component","Step 3: Create a Dark Theme Component",[38,523,524],{},[41,525,526],{},"Create a new theme component.",[53,528,530],{"className":209,"code":529,"language":211,"meta":58,"style":58},"bit create react themes/dark-theme\n",[48,531,532],{"__ignoreMap":58},[62,533,534,536,539,542],{"class":64,"line":65},[62,535,218],{"class":75},[62,537,538],{"class":221}," create",[62,540,541],{"class":221}," react",[62,543,544],{"class":221}," themes/dark-theme\n",[38,546,547],{"start":83},[41,548,46,549,552],{},[48,550,551],{},"dark-theme-tokens.tsx"," file with the design tokens and values you want to override from the default theme.",[53,554,556],{"className":55,"code":555,"language":57,"meta":58,"style":58},"import type { ThemeSchema } from '@learn-bit-react/theming.themes.theme-provider'\n\nexport const darkTheme: ThemeSchema = {\n  myColorBackground: '#000',\n  myColorText: 'red',\n  myBorderColor: 'red'\n}\n",[48,557,558,572,576,594,605,615,623],{"__ignoreMap":58},[62,559,560,562,565,568,570],{"class":64,"line":65},[62,561,280],{"class":68},[62,563,564],{"class":68}," type",[62,566,567],{"class":79}," { ThemeSchema } ",[62,569,286],{"class":68},[62,571,388],{"class":221},[62,573,574],{"class":64,"line":83},[62,575,159],{"emptyLinePlaceholder":158},[62,577,578,580,582,585,588,590,592],{"class":64,"line":97},[62,579,69],{"class":68},[62,581,312],{"class":68},[62,583,584],{"class":93}," darkTheme",[62,586,587],{"class":68},":",[62,589,76],{"class":75},[62,591,318],{"class":68},[62,593,80],{"class":79},[62,595,596,599,602],{"class":64,"line":107},[62,597,598],{"class":79},"  myColorBackground: ",[62,600,601],{"class":221},"'#000'",[62,603,604],{"class":79},",\n",[62,606,607,610,613],{"class":64,"line":117},[62,608,609],{"class":79},"  myColorText: ",[62,611,612],{"class":221},"'red'",[62,614,604],{"class":79},[62,616,617,620],{"class":64,"line":127},[62,618,619],{"class":79},"  myBorderColor: ",[62,621,622],{"class":221},"'red'\n",[62,624,625],{"class":64,"line":182},[62,626,130],{"class":79},[10,628,629],{},"Import the ThemeSchema for type checking.",[38,631,632],{"start":97},[41,633,247,634,637,638,255,641,644],{},[48,635,636],{},"Theme"," from the the theme provider component you just created as well as the ",[48,639,640],{},"darkTheme",[48,642,643],{},"dark-theme-tokens"," file.",[53,646,648],{"className":144,"code":647,"language":146,"meta":58,"style":58},"import React from 'react';\nimport { Theme } from '@learn-bit-react/theming.themes.theme-provider';\nimport { darkTheme } from './dark-theme-tokens';\n\nexport const DarkTheme = ({ children }) => {\n  return (\n    \u003CTheme.ThemeProvider overrides={darkTheme}>\n      {children}\n    \u003C/Theme.ThemeProvider>\n  );\n};\n",[48,649,650,655,660,665,669,674,679,684,689,694,699],{"__ignoreMap":58},[62,651,652],{"class":64,"line":65},[62,653,654],{},"import React from 'react';\n",[62,656,657],{"class":64,"line":83},[62,658,659],{},"import { Theme } from '@learn-bit-react/theming.themes.theme-provider';\n",[62,661,662],{"class":64,"line":97},[62,663,664],{},"import { darkTheme } from './dark-theme-tokens';\n",[62,666,667],{"class":64,"line":107},[62,668,159],{"emptyLinePlaceholder":158},[62,670,671],{"class":64,"line":117},[62,672,673],{},"export const DarkTheme = ({ children }) => {\n",[62,675,676],{"class":64,"line":127},[62,677,678],{},"  return (\n",[62,680,681],{"class":64,"line":182},[62,682,683],{},"    \u003CTheme.ThemeProvider overrides={darkTheme}>\n",[62,685,686],{"class":64,"line":188},[62,687,688],{},"      {children}\n",[62,690,691],{"class":64,"line":194},[62,692,693],{},"    \u003C/Theme.ThemeProvider>\n",[62,695,696],{"class":64,"line":501},[62,697,698],{},"  );\n",[62,700,701],{"class":64,"line":507},[62,702,197],{},[10,704,705],{},"Add the darkTheme to the overrides prop of the theme provider.",[38,707,708],{"start":107},[41,709,710,711,714,715,717],{},"Make sure your index file is exporting both the ",[48,712,713],{},"DarkTheme"," component as well as the ",[48,716,640],{}," tokens.",[53,719,721],{"className":144,"code":720,"language":146,"meta":58,"style":58},"export { DarkTheme } from './dark-theme';\nexport { darkTheme } from './dark-theme-tokens';\n",[48,722,723,728],{"__ignoreMap":58},[62,724,725],{"class":64,"line":65},[62,726,727],{},"export { DarkTheme } from './dark-theme';\n",[62,729,730],{"class":64,"line":83},[62,731,732],{},"export { darkTheme } from './dark-theme-tokens';\n",[38,734,735],{"start":117},[41,736,342,737,350,741,356,745,362],{},[344,738,349],{"href":739,"rel":740},"https://bit.dev/learn-bit-react/theming/themes/dark-theme/~code/dark-theme.composition.tsx",[348],[344,742,355],{"href":743,"rel":744},"https://bit.dev/learn-bit-react/theming/themes/dark-theme/~code/dark-theme.spec.tsx",[348],[344,746,361],{"href":747,"rel":748},"https://bit.dev/learn-bit-react/theming/themes/dark-theme/~code/dark-theme.docs.mdx",[348],[33,750,752],{"id":751},"step-4-use-your-theme-in-a-component","Step 4: Use your Theme in a Component",[38,754,755],{},[41,756,757],{},"Import the Theme from the ThemeProvider component you created as well as the DarkTheme and any components you want to render.",[53,759,761],{"className":55,"code":760,"language":57,"meta":58,"style":58},"import React from 'react'\nimport { Theme } from '@learn-bit-react/theming.themes.theme-provider'\nimport { DarkTheme } from '@learn-bit-react/theming.themes.dark-theme'\nimport { Button } from '@learn-bit-react/theming.example.button'\n",[48,762,763,773,783,795],{"__ignoreMap":58},[62,764,765,767,769,771],{"class":64,"line":65},[62,766,280],{"class":68},[62,768,405],{"class":79},[62,770,286],{"class":68},[62,772,410],{"class":221},[62,774,775,777,779,781],{"class":64,"line":83},[62,776,280],{"class":68},[62,778,383],{"class":79},[62,780,286],{"class":68},[62,782,388],{"class":221},[62,784,785,787,790,792],{"class":64,"line":97},[62,786,280],{"class":68},[62,788,789],{"class":79}," { DarkTheme } ",[62,791,286],{"class":68},[62,793,794],{"class":221}," '@learn-bit-react/theming.themes.dark-theme'\n",[62,796,797,799,801,803],{"class":64,"line":107},[62,798,280],{"class":68},[62,800,427],{"class":79},[62,802,286],{"class":68},[62,804,432],{"class":221},[10,806,807],{},"Wrap all components in the Theme Provider component and use the overrides prop to change the theme to darkTheme.",[53,809,811],{"className":55,"code":810,"language":57,"meta":58,"style":58},"export const MyApp = () => {\n  return (\n    \u003CTheme.ThemeProvider overrides={darkTheme}>\n      \u003CButton>Hello\u003C/Button>\n    \u003C/Theme.ThemeProvider>\n  )\n}\n",[48,812,813,829,835,850,862,870,874],{"__ignoreMap":58},[62,814,815,817,819,821,823,825,827],{"class":64,"line":65},[62,816,69],{"class":68},[62,818,312],{"class":68},[62,820,445],{"class":75},[62,822,318],{"class":68},[62,824,450],{"class":79},[62,826,453],{"class":68},[62,828,80],{"class":79},[62,830,831,833],{"class":64,"line":83},[62,832,460],{"class":68},[62,834,463],{"class":79},[62,836,837,839,841,844,847],{"class":64,"line":97},[62,838,468],{"class":79},[62,840,471],{"class":93},[62,842,843],{"class":75}," overrides",[62,845,846],{"class":68},"=",[62,848,849],{"class":79},"{darkTheme}>\n",[62,851,852,854,856,858,860],{"class":64,"line":107},[62,853,479],{"class":79},[62,855,482],{"class":93},[62,857,485],{"class":79},[62,859,482],{"class":93},[62,861,474],{"class":79},[62,863,864,866,868],{"class":64,"line":117},[62,865,494],{"class":79},[62,867,471],{"class":93},[62,869,474],{"class":79},[62,871,872],{"class":64,"line":127},[62,873,504],{"class":79},[62,875,876],{"class":64,"line":182},[62,877,130],{"class":79},[511,879,881],{"id":880},"button-with-dark-theme-applied","Button with Dark Theme applied",[10,883,884],{},"Use theme like a wrapper component You can alternatively use the component like this which will work exactly the same as the example above.",[53,886,888],{"className":55,"code":887,"language":57,"meta":58,"style":58},"export const MyApp = () => {\n  return (\n    \u003CDarkTheme>\n      \u003CButton>Dark Theme\u003C/Button>\n    \u003C/DarkTheme>\n  )\n}\n",[48,889,890,906,912,920,933,941,945],{"__ignoreMap":58},[62,891,892,894,896,898,900,902,904],{"class":64,"line":65},[62,893,69],{"class":68},[62,895,312],{"class":68},[62,897,445],{"class":75},[62,899,318],{"class":68},[62,901,450],{"class":79},[62,903,453],{"class":68},[62,905,80],{"class":79},[62,907,908,910],{"class":64,"line":83},[62,909,460],{"class":68},[62,911,463],{"class":79},[62,913,914,916,918],{"class":64,"line":97},[62,915,468],{"class":79},[62,917,713],{"class":93},[62,919,474],{"class":79},[62,921,922,924,926,929,931],{"class":64,"line":107},[62,923,479],{"class":79},[62,925,482],{"class":93},[62,927,928],{"class":79},">Dark Theme\u003C/",[62,930,482],{"class":93},[62,932,474],{"class":79},[62,934,935,937,939],{"class":64,"line":117},[62,936,494],{"class":79},[62,938,713],{"class":93},[62,940,474],{"class":79},[62,942,943],{"class":64,"line":127},[62,944,504],{"class":79},[62,946,947],{"class":64,"line":182},[62,948,130],{"class":79},[511,950,952],{"id":951},"multiple-themes","Multiple Themes",[10,954,955],{},"You can also use the default theme and have a part of your app be wrapped in a different theme.",[53,957,959],{"className":55,"code":958,"language":57,"meta":58,"style":58},"export const MyApp = () => {\n  return (\n    \u003CTheme.ThemeProvider>\n      \u003CButton>Default Theme\u003C/Button>\n      {/* A dark themed button inside a default theme */}\n      \u003CDarkTheme>\n        \u003CButton>Dark Theme\u003C/Button>\n      \u003C/DarkTheme>\n    \u003C/Theme.ThemeProvider>\n  )\n}\n",[48,960,961,977,983,991,1004,1015,1023,1036,1045,1053,1057],{"__ignoreMap":58},[62,962,963,965,967,969,971,973,975],{"class":64,"line":65},[62,964,69],{"class":68},[62,966,312],{"class":68},[62,968,445],{"class":75},[62,970,318],{"class":68},[62,972,450],{"class":79},[62,974,453],{"class":68},[62,976,80],{"class":79},[62,978,979,981],{"class":64,"line":83},[62,980,460],{"class":68},[62,982,463],{"class":79},[62,984,985,987,989],{"class":64,"line":97},[62,986,468],{"class":79},[62,988,471],{"class":93},[62,990,474],{"class":79},[62,992,993,995,997,1000,1002],{"class":64,"line":107},[62,994,479],{"class":79},[62,996,482],{"class":93},[62,998,999],{"class":79},">Default Theme\u003C/",[62,1001,482],{"class":93},[62,1003,474],{"class":79},[62,1005,1006,1009,1013],{"class":64,"line":117},[62,1007,1008],{"class":79},"      {",[62,1010,1012],{"class":1011},"sJ8bj","/* A dark themed button inside a default theme */",[62,1014,130],{"class":79},[62,1016,1017,1019,1021],{"class":64,"line":127},[62,1018,479],{"class":79},[62,1020,713],{"class":93},[62,1022,474],{"class":79},[62,1024,1025,1028,1030,1032,1034],{"class":64,"line":182},[62,1026,1027],{"class":79},"        \u003C",[62,1029,482],{"class":93},[62,1031,928],{"class":79},[62,1033,482],{"class":93},[62,1035,474],{"class":79},[62,1037,1038,1041,1043],{"class":64,"line":188},[62,1039,1040],{"class":79},"      \u003C/",[62,1042,713],{"class":93},[62,1044,474],{"class":79},[62,1046,1047,1049,1051],{"class":64,"line":194},[62,1048,494],{"class":79},[62,1050,471],{"class":93},[62,1052,474],{"class":79},[62,1054,1055],{"class":64,"line":501},[62,1056,504],{"class":79},[62,1058,1059],{"class":64,"line":507},[62,1060,130],{"class":79},[33,1062,1064],{"id":1063},"conclusion","Conclusion",[10,1066,1067],{},"And thats how you do theming in React. For more info on how the components work or to learn more on theming and React context check out:",[1069,1070,1071,1078,1085,1092,1099],"ul",{},[41,1072,1073],{},[344,1074,1077],{"href":1075,"rel":1076},"https://bit.dev/learn-bit-react/theming/readme",[348],"Theming in Bit",[41,1079,1080],{},[344,1081,1084],{"href":1082,"rel":1083},"https://bit.dev/learn-bit-react/theming/example/button",[348],"Example Button Component",[41,1086,1087],{},[344,1088,1091],{"href":1089,"rel":1090},"https://bit.dev/learn-bit-react/theming/themes/theme-provider",[348],"Theme Provider Component",[41,1093,1094,362],{},[344,1095,1098],{"href":1096,"rel":1097},"https://bit.dev/learn-bit-react/theming/themes/dark-theme",[348],"Dark Theme",[41,1100,1101],{},[344,1102,1105],{"href":1103,"rel":1104},"https://beta.reactjs.org/apis/usecontext",[348],"React Docs Theming",[1107,1108,1109],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":58,"searchDepth":83,"depth":83,"links":1111},[1112,1113,1116,1117,1121],{"id":35,"depth":83,"text":36},{"id":365,"depth":83,"text":366,"children":1114},[1115],{"id":513,"depth":97,"text":514},{"id":520,"depth":83,"text":521},{"id":751,"depth":83,"text":752,"children":1118},[1119,1120],{"id":880,"depth":97,"text":881},{"id":951,"depth":97,"text":952},{"id":1063,"depth":83,"text":1064},null,"2022-03-10","md",false,"photo-1595446472721-4b7aa63a2bc7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80",{},"https://images.unsplash.com/photo-1595446472721-4b7aa63a2bc7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80?fm=webp&fit=crop&q=80&w=480","/blog/theming-in-react","imgix",{"title":5,"description":12},"blog/theming-in-react",[1134],"react","O5ibwVd1h3akQEz73FdXt9dZc9WNYadbpy0ZgnHK4sQ",[1137,1141],{"title":1138,"path":1139,"stem":1140,"children":-1},"Testing iframes with Playwright","/blog/testing-iframes-with-playwright","blog/testing-iframes-with-playwright",{"title":1142,"path":1143,"stem":1144,"children":-1},"Learning about Developer Advocates","/blog/learning-about-developer-advocates","blog/learning-about-developer-advocates",1790839747572]