Skip to content

Conversation

@dimitri-yatsenko
Copy link
Member

Summary

Adds automatic dark mode support for DataJoint table previews in Jupyter Lab/Notebook using CSS prefers-color-scheme media query.

Problem

Table previews were unreadable in Jupyter Lab dark mode because CSS was hardcoded for light themes (black text on white background).

Before (dark mode):

black on black

Solution

Added CSS media query that automatically detects dark mode preference:

@media (prefers-color-scheme: dark) {
    .Table tr:nth-child(odd) {
        background: #2d2d2d;
        color: #e0e0e0;
    }
    /* ... */
}

Dark mode colors:

Element Background Text
Table header #4a4a4a #ffffff
Odd rows #2d2d2d #e0e0e0
Even rows #3d3d3d #e0e0e0
Primary key - #bd93f9 (purple)
Borders #555555 -

Benefits

  • No JavaScript required - uses native CSS media query
  • Automatic detection - follows system/browser dark mode setting
  • No config changes - works out of the box
  • Backward compatible - light mode unchanged

Closes

🤖 Generated with Claude Code

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 <[email protected]>
@github-actions github-actions bot added bug Indicates an unexpected problem or unintended behavior enhancement Indicates new improvements labels Jan 9, 2026
@dimitri-yatsenko dimitri-yatsenko added this to the DataJoint 2.0 milestone Jan 9, 2026
@dimitri-yatsenko dimitri-yatsenko merged commit 38d0f94 into pre/v2.0 Jan 9, 2026
8 checks passed
@dimitri-yatsenko dimitri-yatsenko deleted the fix/1167 branch January 9, 2026 21:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Indicates an unexpected problem or unintended behavior enhancement Indicates new improvements

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants