fix: disable special colors when in vscode dark mode

SciCatProject · Oct 6, 2023 · 0e42c26 · 0e42c26
1 parent 8536a83
commit 0e42c26
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 18 deletions.
diff --git a/docs/release-notes.rst b/docs/release-notes.rst
@@ -47,6 +47,7 @@ Bugfixes
 ~~~~~~~~
 
 * Fields of derived datasets are no longer initialized when downloading raw datasets and vice versa.
+* Consistent table styling implemented for Jupyter notebooks in browser and vscode for both dark and light themes.
 
 Deprecations
 ~~~~~~~~~~~~

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
@@ -1,10 +1,10 @@
 tr.cean-header {
-    border-bottom: 2px solid var(--jp-layout-color3);
+    border-bottom: 2px solid var(--cean-layout-color-border);
 }
 
 .jp-RenderedHTMLCommon tbody tr.cean-header:hover {
     /* disable hover color in table header */
-    background: var(--jp-layout-color0);
+    background: var(--cean-layout-color-background);
 }
 
 .cean-attachment .cean-info-line {
@@ -42,7 +42,7 @@ tr.cean-header {
 }
 
 td.cean-field-type {
-    color: var(--jp-content-font-color2);
+    color: var(--cean-font-color-field-type);
 }
 
 .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-color-field-description);
 }
 
 .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-color-empty);
 }
 
 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-lock-fill) !important;
 }
diff --git a/src/scitacean/_html_repr/styles/common.css b/src/scitacean/_html_repr/styles/common.css
@@ -0,0 +1,59 @@
+/* 'data-theme=light/dark' attribute is commonly used to toggle dark/light theme */
+html[data-theme="light"] {
+    --cean-font-color-field-type: rgba(0, 0, 0, 0.54);
+    --cean-font-color-field-description: rgba(0, 0, 0, 0.87);
+    --cean-font-color-file-info-size: rgba(0, 0, 0, 0.87);
+    --cean-font-color-empty: rgba(0, 0, 0, 0.54);
+    --cean-lock-fill: rgba(0, 0, 0, 0.54);
+    --cean-error-color: #b71c1c;
+    --cean-layout-color-border: #bdbdbd;
+    --cean-layout-color-background: white;
+}
+
+html[data-theme="dark"] {
+    --cean-font-color-field-type: rgba(255, 255, 255, 0.54);
+    --cean-font-color-field-description: rgba(255, 255, 255, 0.87);
+    --cean-font-color-file-info-size: rgba(255, 255, 255, 0.87);
+    --cean-font-color-empty: rgba(255, 255, 255, 0.54);
+    --cean-lock-fill: rgba(255, 255, 255, 0.54);
+    --cean-error-color: #d32f2f;
+    --cean-layout-color-border: #616161;
+    --cean-layout-color-background: #111;
+}
+
+/* 'data-jp-theme' is Jupyter's way of toggling dark/light theme */
+body[data-jp-theme-light="true"],
+body[data-jp-theme-light="false"] {
+  --cean-font-color-field-type: var(--jp-content-font-color2);
+  --cean-font-color-field-description: var(--jp-content-font-color1);
+  --cean-font-color-file-info-size: var(--jp-content-font-color1);
+  --cean-font-color-empty: var(--jp-content-font-color2);
+  --cean-lock-fill: var(--jp-content-font-color2);
+  --cean-error-color: var(--jp-error-color0);
+  --cean-layout-color-border: var(--jp-layout-color3);
+  --cean-layout-color-background: var(--jp-layout-color0);
+}
+
+/* 'data-vscode-theme' is vscodes way of toggling dark/light theme */
+body[data-vscode-theme-kind="vscode-dark"],
+body[data-vscode-theme-kind="vscode-light"] {
+  --cean-error-color: var(--vscode-editorError-foreground);
+  --cean-layout-color-border: var(--vscode-editorWidget-border);
+  --cean-layout-color-background: var(--vscode-editorWidget-background);
+}
+
+body[data-vscode-theme-kind="vscode-dark"] {
+  --cean-font-color-field-type: rgba(204, 204, 204, 0.54);
+  --cean-font-color-field-description: rgba(204, 204, 204, 0.87);
+  --cean-font-color-file-info-size: rgba(204, 204, 204, 0.87);
+  --cean-font-color-empty: rgba(204, 204, 204, 0.54);
+  --cean-lock-fill: rgba(204, 204, 204, 0.54);
+}
+
+body[data-vscode-theme-kind="vscode-light"] {
+  --cean-font-color-field-type: rgba(59, 59, 59, 0.54);
+  --cean-font-color-field-description: rgba(59, 59, 59, 0.87);
+  --cean-font-color-file-info-size: rgba(59, 59, 59, 0.87);
+  --cean-font-color-empty: rgba(59, 59, 59, 0.54);
+  --cean-lock-fill: rgba(59, 59, 59, 0.54);
+}
diff --git a/src/scitacean/_html_repr/styles/dataset.css b/src/scitacean/_html_repr/styles/dataset.css
@@ -15,12 +15,12 @@
 }
 
 tr.cean-header {
-    border-bottom: 2px solid var(--jp-layout-color3);
+    border-bottom: 2px solid var(--cean-layout-color-border);
 }
 
 .jp-RenderedHTMLCommon tbody tr.cean-header:hover {
     /* disable hover color in table header */
-    background: var(--jp-layout-color0);
+    background: var(--cean-layout-color-background);
 }
 
 .cean-info-line {
@@ -61,7 +61,7 @@ tr.cean-header {
 }
 
 td.cean-field-type {
-    color: var(--jp-content-font-color2);
+    color: var(--cean-font-color-field-type);
 }
 
 .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-color-field-description);
 }
 
 .cean-field-value:hover span,
@@ -85,13 +85,13 @@ td.cean-field-description {
 }
 
 .cean-empty-field {
-    color: var(--jp-content-font-color2);
+    color: var(--cean-font-color-empty);
 }
 
 .cean-missing-value,
 .cean-error {
-    border-left: var(--jp-error-color1) 4px solid !important;
-    border-right: var(--jp-error-color1) 4px solid !important;
+    border-left: var(--cean-error-color) 4px solid !important;
+    border-right: var(--cean-error-color) 4px solid !important;
 }
 
 table.cean-dataset {
@@ -109,7 +109,7 @@ table.cean-dataset {
     /* Jupyter's default space after a table */
     margin-bottom: 1em;
 
-    border-top: 2px solid var(--jp-layout-color3);
+    border-top: 2px solid var(--cean-layout-color-border);
 }
 
 /* Position the summary table directly under the regular table */
@@ -136,7 +136,7 @@ details summary {
 }
 
 .cean-file-info-size {
-    color: var(--jp-content-font-color1);
+    color: var(--cean-font-color-file-info-size);
 }
 
 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-lock-fill) !important;
 }