diff --git a/apps/www/.vitepress/config.mts b/apps/www/.vitepress/config.mts
index 11573b64..42998819 100644
--- a/apps/www/.vitepress/config.mts
+++ b/apps/www/.vitepress/config.mts
@@ -17,6 +17,9 @@ export default defineConfig({
     ['link', { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' }],
     ['link', { rel: 'manifest', href: '/site.webmanifest' }],
 
+    ['meta', { name: 'theme-color', media: '(prefers-color-scheme: light)', content: 'white' }],
+    ['meta', { name: 'theme-color', media: '(prefers-color-scheme: dark)', content: 'black' }],
+
     ['meta', { name: 'creator', content: 'radix-vue' }],
     ['meta', { name: 'theme-color', content: '#41b883' }],
     ['meta', { name: 'og:type', content: 'website' }],
diff --git a/apps/www/.vitepress/theme/styles/themes.css b/apps/www/.vitepress/theme/styles/themes.css
index 1dc18cb9..49194d9c 100644
--- a/apps/www/.vitepress/theme/styles/themes.css
+++ b/apps/www/.vitepress/theme/styles/themes.css
@@ -1,3 +1,11 @@
+html {
+  color-scheme: light;
+}
+
+html.dark {
+  color-scheme: dark;
+}
+
 .theme-zinc {
   --background: 0 0% 100%;
   --foreground: 240 10% 3.9%;