From d6146a947541299b724c892f21da44c81a57e2ae Mon Sep 17 00:00:00 2001
From: Emmanuel Salomon <emmanuel.salomon@gmail.com>
Date: Tue, 24 Sep 2024 07:13:43 +0200
Subject: [PATCH] Theme with body class instead of document element (#32)

---
 app.vue                        |  2 +-
 assets/css/themes.css          | 24 ++++++++++++------------
 components/ThemeCustomizer.vue |  6 +++---
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/app.vue b/app.vue
index b83d1d2e..175b5ff0 100644
--- a/app.vue
+++ b/app.vue
@@ -33,7 +33,7 @@ useSeoMeta({
 });
 
 useServerHead({
-  htmlAttrs: {
+  bodyAttrs: {
     class: themeClass.value,
     style: `--radius: ${radius.value}rem;`,
   },
diff --git a/assets/css/themes.css b/assets/css/themes.css
index c95dfa66..d332f11e 100644
--- a/assets/css/themes.css
+++ b/assets/css/themes.css
@@ -39,7 +39,7 @@ html.dark {
     --radius: 0.5rem;
 }
 
-.theme-zinc.dark {
+.dark .theme-zinc {
     --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;
 
@@ -103,7 +103,7 @@ html.dark {
     --radius: 0.5rem;
 }
 
-.theme-slate.dark {
+.dark .theme-slate {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
 
@@ -167,7 +167,7 @@ html.dark {
     --radius: 0.5rem;
 }
 
-.theme-stone.dark {
+.dark .theme-stone {
     --background: 20 14.3% 4.1%;
     --foreground: 60 9.1% 97.8%;
 
@@ -231,7 +231,7 @@ html.dark {
     --radius: 0.5rem;
 }
 
-.theme-gray.dark {
+.dark .theme-gray {
     --background: 224 71.4% 4.1%;
     --foreground: 210 20% 98%;
 
@@ -295,7 +295,7 @@ html.dark {
     --radius: 0.5rem;
 }
 
-.theme-neutral.dark {
+.dark .theme-neutral {
     --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
 
@@ -359,7 +359,7 @@ html.dark {
     --radius: 0.5rem;
 }
 
-.theme-red.dark {
+.dark .theme-red {
     --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
 
@@ -423,7 +423,7 @@ html.dark {
     --radius: 0.5rem;
 }
 
-.theme-rose.dark {
+.dark .theme-rose {
     --background: 20 14.3% 4.1%;
     --foreground: 0 0% 95%;
 
@@ -487,7 +487,7 @@ html.dark {
     --radius: 0.5rem;
 }
 
-.theme-orange.dark {
+.dark .theme-orange {
     --background: 20 14.3% 4.1%;
     --foreground: 60 9.1% 97.8%;
 
@@ -551,7 +551,7 @@ html.dark {
     --radius: 0.5rem;
 }
 
-.theme-green.dark {
+.dark .theme-green {
     --background: 20 14.3% 4.1%;
     --foreground: 0 0% 95%;
 
@@ -615,7 +615,7 @@ html.dark {
     --radius: 0.5rem;
 }
 
-.theme-blue.dark {
+.dark .theme-blue {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
 
@@ -679,7 +679,7 @@ html.dark {
     --radius: 0.5rem;
 }
 
-.theme-yellow.dark {
+.dark .theme-yellow {
     --background: 20 14.3% 4.1%;
     --foreground: 60 9.1% 97.8%;
 
@@ -743,7 +743,7 @@ html.dark {
     --radius: 0.5rem;
 }
 
-.theme-violet.dark {
+.dark .theme-violet {
     --background: 224 71.4% 4.1%;
     --foreground: 210 20% 98%;
 
diff --git a/components/ThemeCustomizer.vue b/components/ThemeCustomizer.vue
index 733a2a36..78f152b8 100644
--- a/components/ThemeCustomizer.vue
+++ b/components/ThemeCustomizer.vue
@@ -110,14 +110,14 @@ watch(radius, () => {
 });
 
 function setClassTheme() {
-  document.documentElement.classList.remove(
+  document.body.classList.remove(
     ...allColors.map(color => `theme-${color}`),
   );
-  document.documentElement.classList.add(themeClass.value);
+  document.body.classList.add(themeClass.value);
 }
 
 function setStyleRadius() {
-  document.documentElement.style.setProperty('--radius', `${radius.value}rem`);
+  document.body.style.setProperty('--radius', `${radius.value}rem`);
 }
 
 function backgroundColor(color: Color) {