From 9403a0dd08407f082ec22d7ee635c5d30047b532 Mon Sep 17 00:00:00 2001
From: aadee <49238500+aadeexyz@users.noreply.github.com>
Date: Thu, 2 Jan 2025 16:27:43 -0500
Subject: [PATCH] Added a step to add `:root[class~="dark"]` to globals.css for
 next js

Dark mode styles aren't applied if `:root[class~="dark"]` is not added to `globals.css`.
---
 apps/www/content/docs/dark-mode/next.mdx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/apps/www/content/docs/dark-mode/next.mdx b/apps/www/content/docs/dark-mode/next.mdx
index 741d8494654..68a0217340a 100644
--- a/apps/www/content/docs/dark-mode/next.mdx
+++ b/apps/www/content/docs/dark-mode/next.mdx
@@ -6,6 +6,16 @@ description: Adding dark mode to your next app.
 ## Dark mode
 
 <Steps>
+### Modify your tailwind.css file
+
+Add `:root[class~="dark"]` to your globals.css file. This will allow you to use the `dark` class on your html element to apply dark mode styles.
+
+```css {2} title="app/globals.css"
+.dark,
+:root[class~="dark"] {
+  ...;
+}
+```
 
 ### Install next-themes