diff --git a/packages/react/src/_com.css b/packages/react/src/_com.css
index e7c2b13..069549b 100644
--- a/packages/react/src/_com.css
+++ b/packages/react/src/_com.css
@@ -23,8 +23,6 @@
   --diff-add-widget-color--: #ffffff;
   --diff-empty-content--: #fafafa;
   --diff-hunk-content-color--: #777777;
-
-  color: black;
 }
 
 .diff-style-root .diff-line-syntax-raw *,
@@ -54,10 +52,20 @@
   --diff-add-widget-color--: #ffffff;
   --diff-empty-content--: #161b22;
   --diff-hunk-content-color--: #9298a0;
+}
 
+[data-theme="dark"] [data-state="diff"],
+[data-theme="dark"] [data-state="plain"],
+[data-theme="dark"] [data-state="hunk"] {
   color: white;
 }
 
+[data-theme="light"] [data-state="diff"],
+[data-theme="light"] [data-state="plain"],
+[data-theme="light"] [data-state="hunk"] {
+  color: black;
+}
+
 [data-theme="dark"] .diff-line-syntax-raw * {
   color: var(--diff-view-dark, inherit);
   font-weight: var(--diff-view-dark-font-weight, inherit);
@@ -172,14 +180,6 @@ td {
   display: flow-root;
 }
 
-.diff-line-extend-wrapper * {
-  color: initial;
-}
-
-.diff-line-widget-wrapper * {
-  color: initial;
-}
-
 /* Multi-select styles for line range selection */
 .diff-multi-select-active.diff-line-new-num,
 .diff-multi-select-active.diff-line-old-num,
diff --git a/packages/solid/src/_com.css b/packages/solid/src/_com.css
index e7c2b13..069549b 100644
--- a/packages/solid/src/_com.css
+++ b/packages/solid/src/_com.css
@@ -23,8 +23,6 @@
   --diff-add-widget-color--: #ffffff;
   --diff-empty-content--: #fafafa;
   --diff-hunk-content-color--: #777777;
-
-  color: black;
 }
 
 .diff-style-root .diff-line-syntax-raw *,
@@ -54,10 +52,20 @@
   --diff-add-widget-color--: #ffffff;
   --diff-empty-content--: #161b22;
   --diff-hunk-content-color--: #9298a0;
+}
 
+[data-theme="dark"] [data-state="diff"],
+[data-theme="dark"] [data-state="plain"],
+[data-theme="dark"] [data-state="hunk"] {
   color: white;
 }
 
+[data-theme="light"] [data-state="diff"],
+[data-theme="light"] [data-state="plain"],
+[data-theme="light"] [data-state="hunk"] {
+  color: black;
+}
+
 [data-theme="dark"] .diff-line-syntax-raw * {
   color: var(--diff-view-dark, inherit);
   font-weight: var(--diff-view-dark-font-weight, inherit);
@@ -172,14 +180,6 @@ td {
   display: flow-root;
 }
 
-.diff-line-extend-wrapper * {
-  color: initial;
-}
-
-.diff-line-widget-wrapper * {
-  color: initial;
-}
-
 /* Multi-select styles for line range selection */
 .diff-multi-select-active.diff-line-new-num,
 .diff-multi-select-active.diff-line-old-num,
diff --git a/packages/svelte/src/_com.css b/packages/svelte/src/_com.css
index 43782f8..d47f72b 100644
--- a/packages/svelte/src/_com.css
+++ b/packages/svelte/src/_com.css
@@ -23,8 +23,6 @@
 	--diff-add-widget-color--: #ffffff;
 	--diff-empty-content--: #fafafa;
 	--diff-hunk-content-color--: #777777;
-
-	color: black;
 }
 
 .diff-style-root .diff-line-syntax-raw *,
@@ -54,10 +52,20 @@
 	--diff-add-widget-color--: #ffffff;
 	--diff-empty-content--: #161b22;
 	--diff-hunk-content-color--: #9298a0;
+}
 
+[data-theme='dark'] [data-state='diff'],
+[data-theme='dark'] [data-state='plain'],
+[data-theme='dark'] [data-state='hunk'] {
 	color: white;
 }
 
+[data-theme='light'] [data-state='diff'],
+[data-theme='light'] [data-state='plain'],
+[data-theme='light'] [data-state='hunk'] {
+	color: black;
+}
+
 [data-theme='dark'] .diff-line-syntax-raw * {
 	color: var(--diff-view-dark, inherit);
 	font-weight: var(--diff-view-dark-font-weight, inherit);
@@ -172,14 +180,6 @@ td {
 	display: flow-root;
 }
 
-.diff-line-extend-wrapper * {
-	color: initial;
-}
-
-.diff-line-widget-wrapper * {
-	color: initial;
-}
-
 /* Multi-select styles for line range selection */
 .diff-multi-select-active.diff-line-new-num,
 .diff-multi-select-active.diff-line-old-num,
diff --git a/packages/vue/src/_com.css b/packages/vue/src/_com.css
index e7c2b13..069549b 100644
--- a/packages/vue/src/_com.css
+++ b/packages/vue/src/_com.css
@@ -23,8 +23,6 @@
   --diff-add-widget-color--: #ffffff;
   --diff-empty-content--: #fafafa;
   --diff-hunk-content-color--: #777777;
-
-  color: black;
 }
 
 .diff-style-root .diff-line-syntax-raw *,
@@ -54,10 +52,20 @@
   --diff-add-widget-color--: #ffffff;
   --diff-empty-content--: #161b22;
   --diff-hunk-content-color--: #9298a0;
+}
 
+[data-theme="dark"] [data-state="diff"],
+[data-theme="dark"] [data-state="plain"],
+[data-theme="dark"] [data-state="hunk"] {
   color: white;
 }
 
+[data-theme="light"] [data-state="diff"],
+[data-theme="light"] [data-state="plain"],
+[data-theme="light"] [data-state="hunk"] {
+  color: black;
+}
+
 [data-theme="dark"] .diff-line-syntax-raw * {
   color: var(--diff-view-dark, inherit);
   font-weight: var(--diff-view-dark-font-weight, inherit);
@@ -172,14 +180,6 @@ td {
   display: flow-root;
 }
 
-.diff-line-extend-wrapper * {
-  color: initial;
-}
-
-.diff-line-widget-wrapper * {
-  color: initial;
-}
-
 /* Multi-select styles for line range selection */
 .diff-multi-select-active.diff-line-new-num,
 .diff-multi-select-active.diff-line-old-num,