diff --git a/docs/guides/tools/ui_simulator.mdx b/docs/guides/tools/ui_simulator.mdx
index e4e8176e..1fe79df2 100644
--- a/docs/guides/tools/ui_simulator.mdx
+++ b/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 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" />
+```
\ No newline at end of file
diff --git a/versioned_docs/version-0.11/ui_simulator.mdx b/versioned_docs/version-0.11/ui_simulator.mdx
index 1b14397f..5a2f42f0 100644
--- a/versioned_docs/version-0.11/ui_simulator.mdx
+++ b/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" />
+```
\ No newline at end of file
diff --git a/versioned_docs/version-0.12/guides/tools/ui_simulator.mdx b/versioned_docs/version-0.12/guides/tools/ui_simulator.mdx
index e4e8176e..eb130280 100644
--- a/versioned_docs/version-0.12/guides/tools/ui_simulator.mdx
+++ b/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 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" />
+```
\ No newline at end of file