feat: add more css variables to control text color (#187)

otakustay · Feb 19, 2023 · f4d6fe8 · f4d6fe8
1 parent d01c4d4
commit f4d6fe8
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -277,14 +277,23 @@ The basic theme of `react-diff-view` is simply "picked" from github, with some a
     --diff-text-color: initial;
     --diff-font-family: Consolas, Courier, monospace;
     --diff-selection-background-color: #b3d7ff;
+    --diff-selection-text-color: var(--diff-text-color);;
     --diff-gutter-insert-background-color: #d6fedb;
+    --diff-gutter-insert-text-color: var(--diff-text-color);
     --diff-gutter-delete-background-color: #fadde0;
+    --diff-gutter-delete-text-color: var(--diff-text-color);
     --diff-gutter-selected-background-color: #fffce0;
+    --diff-gutter-selected-text-color: var(--diff-text-color);
     --diff-code-insert-background-color: #eaffee;
+    --diff-code-insert-text-color: var(--diff-text-color);
     --diff-code-delete-background-color: #fdeff0;
+    --diff-code-delete-text-color: var(--diff-text-color);
     --diff-code-insert-edit-background-color: #c0dc91;
+    --diff-code-insert-edit-text-color: var(--diff-text-color);
     --diff-code-delete-edit-background-color: #f39ea2;
+    --diff-code-delete-edit-text-color: var(--diff-text-color);
     --diff-code-selected-background-color: #fffce0;
+    --diff-code-selected-text-color: var(--diff-text-color);
     --diff-omit-gutter-line-color: #cb2a1d;
 }
 ```

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -3,14 +3,23 @@
     --diff-text-color: initial;
     --diff-font-family: Consolas, Courier, monospace;
     --diff-selection-background-color: #b3d7ff;
+    --diff-selection-text-color: var(--diff-text-color);;
     --diff-gutter-insert-background-color: #d6fedb;
+    --diff-gutter-insert-text-color: var(--diff-text-color);
     --diff-gutter-delete-background-color: #fadde0;
+    --diff-gutter-delete-text-color: var(--diff-text-color);
     --diff-gutter-selected-background-color: #fffce0;
+    --diff-gutter-selected-text-color: var(--diff-text-color);
     --diff-code-insert-background-color: #eaffee;
+    --diff-code-insert-text-color: var(--diff-text-color);
     --diff-code-delete-background-color: #fdeff0;
+    --diff-code-delete-text-color: var(--diff-text-color);
     --diff-code-insert-edit-background-color: #c0dc91;
+    --diff-code-insert-edit-text-color: var(--diff-text-color);
     --diff-code-delete-edit-background-color: #f39ea2;
+    --diff-code-delete-edit-text-color: var(--diff-text-color);
     --diff-code-selected-background-color: #fffce0;
+    --diff-code-selected-text-color: var(--diff-text-color);
     --diff-omit-gutter-line-color: #cb2a1d;
 }
 
@@ -24,6 +33,7 @@
 
 .diff::selection {
     background-color: var(--diff-selection-background-color);
+    color: var(--diff-selection-text-color);
 }
 
 .diff td {
@@ -51,10 +61,12 @@
 
 .diff-gutter-insert {
     background-color: var(--diff-gutter-insert-background-color);
+    color: var(--diff-gutter-insert-text-color);
 }
 
 .diff-gutter-delete {
     background-color: var(--diff-gutter-delete-background-color);
+    color: var(--diff-gutter-delete-text-color);
 }
 
 .diff-gutter-omit {
@@ -63,6 +75,7 @@
 
 .diff-gutter-selected {
     background-color: var(--diff-gutter-selected-background-color);
+    color: var(--diff-gutter-selected-text-color);
 }
 
 .diff-code {
@@ -79,22 +92,27 @@
 
 .diff-code-insert {
     background-color: var(--diff-code-insert-background-color);
+    color: var(--diff-code-insert-text-color);
 }
 
 .diff-code-insert .diff-code-edit {
     background-color: var(--diff-code-insert-edit-background-color);
+    color: var(--diff-code-insert-edit-text-color);
 }
 
 .diff-code-delete {
     background-color: var(--diff-code-delete-background-color);
+    color: var(--diff-code-delete-text-color);
 }
 
 .diff-code-delete .diff-code-edit {
     background-color: var(--diff-code-delete-edit-background-color);
+    color: var(--diff-code-delete-edit-text-color);
 }
 
 .diff-code-selected {
     background-color: var(--diff-code-selected-background-color);
+    color: var(--diff-code-selected-text-color);
 }
 
 .diff-widget-content {