diff --git a/assets/css/main.css b/assets/css/main.css
index df3e97120..00b6a166e 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -40,15 +40,10 @@ body {
   overflow-y: scroll;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background: $dt('color.white');
-  color: $dt('color.gray.800');
-  font-family: $dt('font.sans');
+  background-color: $dt('docus.body.backgroundColor');
+  color: $dt('docus.body.color');
+  font-family: $dt('docus.body.fontFamily');
   min-width: $dt('size.xs');
-
-  @dark {
-    background: $dt('color.black');
-    color: $dt('color.gray.200');
-  }
 }
 
 .docus-scrollbars {
diff --git a/tokens.config.ts b/tokens.config.ts
index d371bbf36..37f609cb2 100644
--- a/tokens.config.ts
+++ b/tokens.config.ts
@@ -84,7 +84,18 @@ export default defineTheme({
         '@studioIcon material-symbols:docs'
       ]
     },
-    header: { 
+    body: {
+      backgroundColor: {
+        initial: '{color.white}',
+        dark: '{color.black}'
+      },
+      color: {
+        initial: '{color.gray.800}',
+        dark: '{color.gray.200}'
+      },
+      fontFamily: '{font.sans}',
+    },
+    header: {
       height: '64px',
       logo: {
         height: {