From c8f21f23c4fa3722d946393532877e74295567cc Mon Sep 17 00:00:00 2001
From: Johannes Kasimir <johanneskasimir@gmail.com>
Date: Fri, 29 Sep 2023 14:02:40 +0200
Subject: [PATCH] fix: disable special colors when in vscode dark mode

---
 src/scitacean/_html_repr/_resources.py         | 10 ++++++++--
 src/scitacean/_html_repr/styles/attachment.css |  8 ++++----
 src/scitacean/_html_repr/styles/common.css     | 13 +++++++++++++
 src/scitacean/_html_repr/styles/dataset.css    | 10 +++++-----
 4 files changed, 30 insertions(+), 11 deletions(-)
 create mode 100644 src/scitacean/_html_repr/styles/common.css

diff --git a/src/scitacean/_html_repr/_resources.py b/src/scitacean/_html_repr/_resources.py
index 47e54aef..adbf5f9e 100644
--- 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
index 3941f526..1e9692e7 100644
--- 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(--cean-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(--cean-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(--cean-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(--cean-font-color2) !important;
 }
diff --git a/src/scitacean/_html_repr/styles/common.css b/src/scitacean/_html_repr/styles/common.css
new file mode 100644
index 00000000..0874b08a
--- /dev/null
+++ 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
index 2e115b44..43bd8695 100644
--- 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(--cean-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(--cean-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(--cean-font-color2);
 }
 
 .cean-missing-value,
@@ -136,7 +136,7 @@ details summary {
 }
 
 .cean-file-info-size {
-    color: var(--jp-content-font-color1);
+    color: var(--cean-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(--cean-font-color2) !important;
 }