From da7d1f3a81564b6ec13156a6e7b8d74b98bd048e Mon Sep 17 00:00:00 2001
From: Jasmine Elkins <jasmine.elkins@reddit.com>
Date: Tue, 12 May 2026 17:05:41 -0400
Subject: [PATCH 1/5] update dark mode section

---
 docs/guides/tools/ui_simulator.mdx            | 33 +++++++++++++++++++
 versioned_docs/version-0.11/ui_simulator.mdx  | 33 +++++++++++++++++++
 .../guides/tools/ui_simulator.mdx             | 17 +++++++++-
 3 files changed, 82 insertions(+), 1 deletion(-)

diff --git a/docs/guides/tools/ui_simulator.mdx b/docs/guides/tools/ui_simulator.mdx
index e4e8176e..9d70bde3 100644
--- a/docs/guides/tools/ui_simulator.mdx
+++ b/docs/guides/tools/ui_simulator.mdx
@@ -84,3 +84,36 @@ 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.
+
+
+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..b46c8549 100644
--- a/versioned_docs/version-0.11/ui_simulator.mdx
+++ b/versioned_docs/version-0.11/ui_simulator.mdx
@@ -87,3 +87,36 @@ 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.
+
+
+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..68731530 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,13 @@ 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.
+
 
 Example of how to use a CSS media query to set different colors for light and dark mode:
 
@@ -84,3 +90,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

From b0acda32cc5a24c869b5c0c1480e46ad36b6a6b8 Mon Sep 17 00:00:00 2001
From: Jasmine Elkins <jasmine.elkins@reddit.com>
Date: Wed, 13 May 2026 11:14:18 -0400
Subject: [PATCH 2/5] add safari limitation note

---
 docs/guides/tools/ui_simulator.mdx                        | 3 +++
 versioned_docs/version-0.11/ui_simulator.mdx              | 3 +++
 versioned_docs/version-0.12/guides/tools/ui_simulator.mdx | 3 +++
 3 files changed, 9 insertions(+)

diff --git a/docs/guides/tools/ui_simulator.mdx b/docs/guides/tools/ui_simulator.mdx
index 9d70bde3..d84bd1bb 100644
--- a/docs/guides/tools/ui_simulator.mdx
+++ b/docs/guides/tools/ui_simulator.mdx
@@ -90,6 +90,9 @@ Example of how to use a CSS media query to set different colors for light and da
 
 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:
 
diff --git a/versioned_docs/version-0.11/ui_simulator.mdx b/versioned_docs/version-0.11/ui_simulator.mdx
index b46c8549..b833c53c 100644
--- a/versioned_docs/version-0.11/ui_simulator.mdx
+++ b/versioned_docs/version-0.11/ui_simulator.mdx
@@ -93,6 +93,9 @@ Example of how to use a CSS media query to set different colors for light and da
 
 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:
 
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 68731530..cd97c9d2 100644
--- a/versioned_docs/version-0.12/guides/tools/ui_simulator.mdx
+++ b/versioned_docs/version-0.12/guides/tools/ui_simulator.mdx
@@ -72,6 +72,9 @@ Remember: Mobile users are your primary audience. If it works well on mobile, it
 
 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:
 

From daddf2942b939daf847362a32e2d59f7cdaf7af6 Mon Sep 17 00:00:00 2001
From: Jasmine Elkins <jasmine.elkins@reddit.com>
Date: Wed, 13 May 2026 11:16:22 -0400
Subject: [PATCH 3/5] fix

---
 docs/guides/tools/ui_simulator.mdx                        | 2 +-
 versioned_docs/version-0.11/ui_simulator.mdx              | 2 +-
 versioned_docs/version-0.12/guides/tools/ui_simulator.mdx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/guides/tools/ui_simulator.mdx b/docs/guides/tools/ui_simulator.mdx
index d84bd1bb..1fe79df2 100644
--- a/docs/guides/tools/ui_simulator.mdx
+++ b/docs/guides/tools/ui_simulator.mdx
@@ -91,7 +91,7 @@ Example of how to use a CSS media query to set different colors for light and da
 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.
+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:
diff --git a/versioned_docs/version-0.11/ui_simulator.mdx b/versioned_docs/version-0.11/ui_simulator.mdx
index b833c53c..5a2f42f0 100644
--- a/versioned_docs/version-0.11/ui_simulator.mdx
+++ b/versioned_docs/version-0.11/ui_simulator.mdx
@@ -94,7 +94,7 @@ Example of how to use a CSS media query to set different colors for light and da
 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.
+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:
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 cd97c9d2..eb130280 100644
--- a/versioned_docs/version-0.12/guides/tools/ui_simulator.mdx
+++ b/versioned_docs/version-0.12/guides/tools/ui_simulator.mdx
@@ -73,7 +73,7 @@ Remember: Mobile users are your primary audience. If it works well on mobile, it
 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.
+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:

From 9d8ed6f09b60b8f1e6b827a979ecce1e3bbdef05 Mon Sep 17 00:00:00 2001
From: Stacy <143668017+stacy-qqq@users.noreply.github.com>
Date: Thu, 14 May 2026 13:46:48 -0700
Subject: [PATCH 4/5] Update heading to lowercase for consistency

---
 docs/guides/tools/ui_simulator.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/guides/tools/ui_simulator.mdx b/docs/guides/tools/ui_simulator.mdx
index 1fe79df2..7e6057cd 100644
--- a/docs/guides/tools/ui_simulator.mdx
+++ b/docs/guides/tools/ui_simulator.mdx
@@ -86,7 +86,7 @@ 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
+# 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.
 
@@ -119,4 +119,4 @@ Example of how to use Tailwind's `dark:` class:
 
 /* After: Light + dark mode */
 <div className="bg-white dark:bg-black text-black dark:text-white" />
-```
\ No newline at end of file
+```

From 3dfcc6382346b5a5a2dc0e4867cb0a33686a9c18 Mon Sep 17 00:00:00 2001
From: Stacy <143668017+stacy-qqq@users.noreply.github.com>
Date: Thu, 14 May 2026 13:47:45 -0700
Subject: [PATCH 5/5] Updated heading for consistency

Updated the heading to lowercase for consistency and clarity.
---
 versioned_docs/version-0.12/guides/tools/ui_simulator.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 eb130280..6e4b7937 100644
--- a/versioned_docs/version-0.12/guides/tools/ui_simulator.mdx
+++ b/versioned_docs/version-0.12/guides/tools/ui_simulator.mdx
@@ -68,7 +68,7 @@ Always test your app in mobile view first to validate that all critical features
 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
+# 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.
 
@@ -101,4 +101,4 @@ Example of how to use Tailwind's `dark:` class:
 
 /* After: Light + dark mode */
 <div className="bg-white dark:bg-black text-black dark:text-white" />
-```
\ No newline at end of file
+```