asdf

site/docs/pages/guides/themes.mdx

@@ -93,32 +93,47 @@ This is useful when you want to make adjustments to the appearance of the compon
 Define an entirely new look and feel for your application. 
 This gives you complete control over all aspects of the design, including colors, fonts, and other visual properties.
 
-Usage Options:
+#### Usage Options:
 
-Automatic Light/Dark Mode Switching:
-To automatically switch between light and dark versions of your custom theme:
+##### Automatic Light/Dark Mode Switching:
+- To automatically switch between light and dark versions of your custom theme:
 
 ```tsx twoslash
+// @noErrors:  2304 17008 1005
+<OnchainKitProvider
+  apiKey={process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY}
+  chain={base}
   config={{
     appearance: {
-      mode: 'auto', 
-      theme: 'custom',
+      mode: 'auto', // [!code focus]
+      theme: 'custom', // [!code focus]
     },
   }}
+>
 ```
 
-Single Theme Version:
-To use only one version of your custom theme at all times:
+##### Single Theme Version:
+- To use only one version of your custom theme at all times:
 
 ```tsx twoslash
+// @noErrors:  2304 17008 1005
+<OnchainKitProvider
+  apiKey={process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY}
+  chain={base}
   config={{
     appearance: {
-      mode: 'light', // or 'dark'
-      theme: 'custom',
+      mode: 'light', // [!code focus]
+      theme: 'custom', // [!code focus]
     },
-  }}
+  }} 
+>
 ```
 
+##### Defining a custom theme
+
+Use CSS variables to define your custom theme. 
+The class names must include the -light or -dark suffix, corresponding to the mode you're using:
+
 ```css
 @layer base {
   .custom-light {