Update dark mode section

docs/guides/tools/ui_simulator.mdx

@@ -84,3 +84,39 @@ Example of how to use a CSS media query to set different colors for light and da
   }
 }
 ```
+
+
+# Adding Dark Mode Support to Your Devvit App
+
+Devvit webviews automatically receive the user's color scheme preference (light or dark) from the Reddit app. To make your app respond to these changes, you need to add dark mode styles using either a CSS media query or Tailwind's `dark:` variant.
+
+:::info
+Note: the UI simulator color scheme toggle does not currently work in Safari. This is a known issue due to browser limitations. Please use a Chrome-based browser to access this functionality.
+:::
+
+Example of how to use a CSS media query to set different colors for light and dark mode:
+
+```css
+/* Light mode (default) */
+:root {
+  --bg-color: #ffffff;
+  --text-color: #000000;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-color: #000000;
+    --text-color: #ffffff;
+  }
+}
+```
+
+Example of how to use Tailwind's `dark:` class:
+```tsx
+/* Before: Only light mode */
+<div className="bg-white text-black" />
+
+/* After: Light + dark mode */
+<div className="bg-white dark:bg-black text-black dark:text-white" />
+```

versioned_docs/version-0.11/ui_simulator.mdx

@@ -87,3 +87,39 @@ Example of how to use a CSS media query to set different colors for light and da
   }
 }
 ```
+
+
+# Adding Dark Mode Support to Your Devvit App
+
+Devvit webviews automatically receive the user's color scheme preference (light or dark) from the Reddit app. To make your app respond to these changes, you need to add dark mode styles using either a CSS media query or Tailwind's `dark:` variant.
+
+:::info
+Note: the UI simulator color scheme toggle does not currently work in Safari. This is a known issue due to browser limitations. Please use a Chrome-based browser to access this functionality.
+:::
+
+Example of how to use a CSS media query to set different colors for light and dark mode:
+
+```css
+/* Light mode (default) */
+:root {
+  --bg-color: #ffffff;
+  --text-color: #000000;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-color: #000000;
+    --text-color: #ffffff;
+  }
+}
+```
+
+Example of how to use Tailwind's `dark:` class:
+```tsx
+/* Before: Only light mode */
+<div className="bg-white text-black" />
+
+/* After: Light + dark mode */
+<div className="bg-white dark:bg-black text-black dark:text-white" />
+```

versioned_docs/version-0.12/guides/tools/ui_simulator.mdx

@@ -65,7 +65,16 @@ Always test your app in mobile view first to validate that all critical features
    - Test all new features in mobile view before desktop
    - Verify both dark and light mode appearances
 
-Remember: Mobile users are your primary audience. If it works well on mobile, it will likely work well everywhere else.
+Remember: Mobile users are your primary audience. If it works well on mobile, it will likely work well everywhere else.  
+
+
+# Adding Dark Mode Support to Your Devvit App
+
+Devvit webviews automatically receive the user's color scheme preference (light or dark) from the Reddit app. To make your app respond to these changes, you need to add dark mode styles using either a CSS media query or Tailwind's `dark:` variant.
+
+:::info
+Note: the UI simulator color scheme toggle does not currently work in Safari. This is a known issue due to browser limitations. Please use a Chrome-based browser to access this functionality.
+:::
 
 Example of how to use a CSS media query to set different colors for light and dark mode:
 
@@ -84,3 +93,12 @@ Example of how to use a CSS media query to set different colors for light and da
   }
 }
 ```
+
+Example of how to use Tailwind's `dark:` class:
+```tsx
+/* Before: Only light mode */
+<div className="bg-white text-black" />
+
+/* After: Light + dark mode */
+<div className="bg-white dark:bg-black text-black dark:text-white" />
+```