From 8989eb1af3a82ad8904d697365b264e05b4aad38 Mon Sep 17 00:00:00 2001
From: Dimitri Yatsenko <dimitri.yatsenko@gmail.com>
Date: Thu, 8 Jan 2026 21:36:24 -0600
Subject: [PATCH] fix: add dark mode support for table previews in Jupyter
 (#1167)

Add CSS media query for prefers-color-scheme: dark to automatically
adapt table preview styling to dark mode environments.

Dark mode colors:
- Table header: #4a4a4a background
- Odd rows: #2d2d2d background, #e0e0e0 text
- Even rows: #3d3d3d background, #e0e0e0 text
- Primary key: #bd93f9 (purple accent)
- Borders: #555555

Uses browser-native dark mode detection - no JavaScript or config needed.
Light mode styling remains unchanged for backward compatibility.

Fixes #1167

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/datajoint/preview.py | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/datajoint/preview.py b/src/datajoint/preview.py
index 5cecc3898..ddff041f2 100644
--- a/src/datajoint/preview.py
+++ b/src/datajoint/preview.py
@@ -164,6 +164,34 @@ def get_html_display_value(tup, name, idx):
         .djtooltip:hover .djtooltiptext {
             visibility: visible;
         }
+
+        /* Dark mode support */
+        @media (prefers-color-scheme: dark) {
+            .Table th{
+                background: #4a4a4a; color: #ffffff; border:#555555 1px solid;
+            }
+            .Table td{
+                border:#555555 1px solid;
+            }
+            .Table tr:nth-child(odd){
+                background: #2d2d2d;
+                color: #e0e0e0;
+            }
+            .Table tr:nth-child(even){
+                background: #3d3d3d;
+                color: #e0e0e0;
+            }
+            .djtooltip .djtooltiptext {
+                background-color: #555555;
+                color: #ffffff;
+            }
+            #primary {
+                color: #bd93f9;
+            }
+            #nonprimary {
+                color: #e0e0e0;
+            }
+        }
     </style>
     """
     head_template = """<div class="djtooltip">