Merge pull request #8823 from OpenMined/dark-mode-tables

feat: add dark mode support for tables in jupyter and vscode

packages/syft/src/syft/assets/css/style.css

@@ -1,15 +1,18 @@
-body[data-jp-theme-light="false"] {
+body[data-jp-theme-light="false"],
+body.vscode-dark {
   --primary-color: #111111;
   --secondary-color: #212121;
   --tertiary-color: #cfcdd6;
   --button-color: #111111;
+  --colors-black: #ffffff;
 }
 
 body {
   --primary-color: #ffffff;
   --secondary-color: #f5f5f5;
   --tertiary-color: #000000de;
   --button-color: #d1d5db;
+  --colors-black: #17161d;
 }
 
 .header-1 {
@@ -19,7 +22,7 @@ body {
   line-height: 100%;
   leading-trim: both;
   text-edge: cap;
-  color: #17161d;
+  color: var(--colors-black);
 }
 
 .header-2 {
@@ -29,7 +32,7 @@ body {
   line-height: 100%;
   leading-trim: both;
   text-edge: cap;
-  color: #17161d;
+  color: var(--colors-black);
 }
 
 .header-3 {
@@ -49,7 +52,7 @@ body {
   line-height: 100%;
   leading-trim: both;
   text-edge: cap;
-  color: #17161d;
+  color: var(--colors-black);
 }
 
 .paragraph {
@@ -561,36 +564,3 @@ body {
 .syft-widget li a:hover {
   background-color: #c2def0;
 }
-
-.tabulator .tabulator-row .tabulator-cell {
-  border-right: 1px solid #e0e0e0;
-  background-color: var(--primary-color);
-}
-
-.tabulator .tabulator-row .tabulator-cell {
-  white-space: normal;
-  overflow-wrap: break-word;
-}
-
-.tabulator .tabulator-header .tabulator-col {
-  background-color: var(--secondary-color);
-  border-right: 1px solid #e0e0e0;
-  border-top: 1px solid #e0e0e0;
-}
-
-.tabulator .tabulator-header .tabulator-col:first-child {
-  border-left: 1px solid #e0e0e0;
-}
-
-.tabulator-row .tabulator-cell.tabulator-row-header {
-  background-color: var(--secondary-color);
-  border-right: 2px solid #e0e0e0;
-}
-
-.tabulator .tabulator-row .tabulator-cell:first-child {
-  border-left: 1px solid #e0e0e0;
-}
-
-.tabulator .tabulator-footer {
-  border-top: none;
-}

packages/syft/src/syft/assets/js/table.js

@@ -1,7 +1,7 @@
 TABULATOR_SRC =
   "https://unpkg.com/[email protected]/dist/js/tabulator.min";
 TABULATOR_CSS =
-  "https://unpkg.com/[email protected]/dist/css/tabulator_materialize.min.css";
+  "https://cdn.jsdelivr.net/gh/openmined/pysyft/packages/syft/src/syft/assets/css/tabulator_pysyft.min.css";
 
 document.querySelectorAll(".escape-unfocus").forEach((input) => {
   input.addEventListener("keydown", (event) => {

packages/syft/src/syft/util/notebook_ui/components/tabulator_template.py

@@ -100,7 +100,7 @@ def build_tabulator_table(obj: Any) -> str | None:
 
         table_template = env.get_template("table.jinja2")
         tabulator_js = load_js("tabulator.min.js")
-        tabulator_css = load_css("tabulator_materialize.min.css")
+        tabulator_css = load_css("tabulator_pysyft.min.css")
         js = load_js("table.js")
         css = load_css("style.css")
 

packages/syft/src/syft/util/notebook_ui/styles.py

@@ -12,7 +12,6 @@
 JS_DOWNLOAD_FONTS = f"""
 <script>
 function addStyleSheet(fileName) {{
-
   var head = document.head;
   var link = document.createElement("link");