fix: Add VS Code specific CSS variables for proper dark mode support

Author: shuoweil

bigframes/display/table_widget.css

@@ -26,7 +26,10 @@
 
 .bigframes-widget .footer {
 	align-items: center;
-	color: var(--colab-primary-text-color, var(--jp-ui-font-color0, black));
+	color: var(
+		--colab-primary-text-color,
+		var(--jp-ui-font-color0, var(--vscode-editor-foreground, black))
+	);
 	display: flex;
 	font-family:
 		"-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", sans-serif;
@@ -70,14 +73,17 @@
 
 .bigframes-widget table {
 	border-collapse: collapse;
-	color: var(--colab-primary-text-color, var(--jp-ui-font-color0, black));
+	color: var(
+		--colab-primary-text-color,
+		var(--jp-ui-font-color0, var(--vscode-editor-foreground, black))
+	);
 	text-align: left;
 }
 
 .bigframes-widget th {
 	background-color: var(
 		--colab-primary-surface-color,
-		var(--jp-layout-color0, white)
+		var(--jp-layout-color0, var(--vscode-editor-background, white))
 	);
 	padding: 0;
 	position: sticky;
@@ -149,20 +155,23 @@
 .bigframes-widget td.row-hover {
 	background-color: var(
 		--colab-hover-surface-color,
-		var(--jp-layout-color2, #f5f5f5)
+		var(--jp-layout-color2, var(--vscode-list-hoverBackground, #f5f5f5))
 	);
 }
 
 @media (prefers-color-scheme: dark) {
 	.bigframes-widget .footer,
 	.bigframes-widget table {
-		color: var(--colab-primary-text-color, var(--jp-ui-font-color0, white));
+		color: var(
+			--colab-primary-text-color,
+			var(--jp-ui-font-color0, var(--vscode-editor-foreground, white))
+		);
 	}
 
 	.bigframes-widget th {
 		background-color: var(
 			--colab-primary-surface-color,
-			var(--jp-layout-color0, #383838)
+			var(--jp-layout-color0, var(--vscode-editor-background, #383838))
 		);
 	}
 
@@ -180,7 +189,7 @@
 	.bigframes-widget td.row-hover {
 		background-color: var(
 			--colab-hover-surface-color,
-			var(--jp-layout-color2, #444)
+			var(--jp-layout-color2, var(--vscode-list-hoverBackground, #444))
 		);
 	}
 }