Update dark mode section (#108)

<!-- If this pull request closes an issue, please mention the issue
number below -->
Closes # <!-- Issue # here -->

## 💸 TL;DR
<!-- What's the three sentence summary of purpose of the PR -->
The UI Simulator color scheme toggle temporarily forces the color scheme
of the webview dialog, overriding the user's reddit theme to enable the
dev to view their app in light and dark mode. This only works if the app
has colors set for dark mode. Previous docs version only provided an
example of doing this via CSS media query; this PR just adds an example
of using Tailwind's `dark` class, which is essentially the same thing,
but aligns more with our app templates.
(All our app templates should already have this dark class built in to
the basic UI, and devs will need to add it to all additional UI)

Also added a note that the color scheme toggle does not currently work
in Safari.


## 📜 Details
[Design Doc](<!-- insert Google Doc link here if applicable -->)

[Jira](<!-- insert Jira link if applicable -->)

<!-- Add additional details required for the PR: breaking changes,
screenshots, external dependency changes -->

## 🧪 Testing Steps / Validation
<!-- add details on how this PR has been tested, include reproductions
and screenshots where applicable -->

## ✅ Checks
<!-- Make sure your pr passes the CI checks and do check the following
fields as needed - -->
- [ ] CI tests (if present) are passing
- [ ] Adheres to code style for repo
- [ ] Contributor License Agreement (CLA) completed if not a Reddit
employee

<img width="488" height="718" alt="Screenshot 2026-05-13 at 11 16 29 AM"
src="https://github.com/user-attachments/assets/937b6ddd-7c10-4f1e-bd52-1ccb64c8660a"
/>

---------

Co-authored-by: Stacy <143668017+stacy-qqq@users.noreply.github.com>

Author: galactic-magpie

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
+
+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 while we work on a fix.
+:::
+
+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 while we work on a fix.
+:::
+
+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
+
+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 while we work on a fix.
+:::
 
 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" />
+```