fix: disable special colors when in vscode dark mode

SciCatProject · Sep 29, 2023 · 88908e2 · 88908e2
1 parent 8536a83
commit 88908e2
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 11 deletions.
diff --git a/src/scitacean/_html_repr/_resources.py b/src/scitacean/_html_repr/_resources.py
@@ -62,16 +62,22 @@ def attachment_field_repr_template() -> Template:
     return Template(_read_text("attachment_field_repr.html.template", "templates"))
 
 
+@lru_cache(maxsize=1)
+def common_style() -> str:
+    sheet = _preprocess_style(_read_text("common.css", "styles"))
+    return f"<style>{sheet}</style>"
+
+
 @lru_cache(maxsize=1)
 def dataset_style() -> str:
     sheet = _preprocess_style(_read_text("dataset.css", "styles"))
-    return f"<style>{sheet}</style>"
+    return f"{common_style()}<style>{sheet}</style>"
 
 
 @lru_cache(maxsize=1)
 def attachment_style() -> str:
     sheet = _preprocess_style(_read_text("attachment.css", "styles"))
-    return f"<style>{sheet}</style>"
+    return f"{common_style()}<style>{sheet}</style>"
 
 
 @lru_cache()

diff --git a/src/scitacean/_html_repr/styles/attachment.css b/src/scitacean/_html_repr/styles/attachment.css
@@ -42,7 +42,7 @@ tr.cean-header {
 }
 
 td.cean-field-type {
-    color: var(--jp-content-font-color2);
+    color: var(--sca-font-color2);
 }
 
 .cean-field-value {
@@ -56,7 +56,7 @@ td.cean-field-type {
 }
 
 td.cean-field-description {
-    color: var(--jp-content-font-color1);
+    color: var(--sca-font-color1);
 }
 
 .cean-field-value:hover span,
@@ -66,7 +66,7 @@ td.cean-field-description {
 }
 
 .cean-empty-field {
-    color: var(--jp-content-font-color2);
+    color: var(--sca-font-color2);
 }
 
 table.cean-attachment-table {
@@ -108,5 +108,5 @@ details summary {
 .cean-lock path {
     /* Override the color used in the SVG.
        This requires there to be only a single fill color. */
-    fill: var(--jp-content-font-color2) !important;
+    fill: var(--sca-font-color2) !important;
 }
diff --git a/src/scitacean/_html_repr/styles/common.css b/src/scitacean/_html_repr/styles/common.css
@@ -0,0 +1,13 @@
+:root {
+  --cean-font-color0: var(--jp-content-font-color0);
+  --cean-font-color1: var(--jp-content-font-color1);
+  --cean-font-color2: var(--jp-content-font-color2);
+  --cean-font-color3: var(--jp-content-font-color3);
+}
+
+body.vscode-dark {
+  --cean-font-color0: var(--vscode-editor-foreground);
+  --cean-font-color1: var(--vscode-editor-foreground);
+  --cean-font-color2: var(--vscode-editor-foreground);
+  --cean-font-color3: var(--vscode-editor-foreground);
+}
diff --git a/src/scitacean/_html_repr/styles/dataset.css b/src/scitacean/_html_repr/styles/dataset.css
@@ -61,7 +61,7 @@ tr.cean-header {
 }
 
 td.cean-field-type {
-    color: var(--jp-content-font-color2);
+    color: var(--sca-font-color2);
 }
 
 .cean-field-value {
@@ -75,7 +75,7 @@ td.cean-field-type {
 }
 
 td.cean-field-description {
-    color: var(--jp-content-font-color1);
+    color: var(--sca-font-color1);
 }
 
 .cean-field-value:hover span,
@@ -85,7 +85,7 @@ td.cean-field-description {
 }
 
 .cean-empty-field {
-    color: var(--jp-content-font-color2);
+    color: var(--sca-font-color2);
 }
 
 .cean-missing-value,
@@ -136,7 +136,7 @@ details summary {
 }
 
 .cean-file-info-size {
-    color: var(--jp-content-font-color1);
+    color: var(--sca-font-color1);
 }
 
 table.cean-files,
@@ -180,5 +180,5 @@ table.cean-metadata {
 .cean-lock path {
     /* Override the color used in the SVG.
        This requires there to be only a single fill color. */
-    fill: var(--jp-content-font-color2) !important;
+    fill: var(--sca-font-color2) !important;
 }