Repository navigation
Jupyterlab shows tables in black on black #1167
Description
Activity
@CBroz1 what would you suggest for a better solution?
I can see a few possible paths...
- Determine theme and adjust html accordingly. Discussion
- Pros: maintains status quo for light-mode users
- Cons: maintenance burden of front-end variance
- Defer rendering to pandas html, which already adjusts for theme.
- Pros: offloads maintenance to another package, no additional dependencies
- Cons:
- mismatch across versions
- may require deprecation timeline for html in case someone uses this for other tools
- minor edits to show primary keys and table header
- Add a config option that determines the html displayed
- Pros: maintains status quo, no interface changes, minimal work
- Cons: Additional config line item
Example Pandas adjustment for primary keys
import pandas as pd from IPython.display import display data = { 'id': [1, 2, 3], 'name': ['Alice', 'Bob', 'Charlie'], 'age': [24, 27, 22], 'email': ['alice@example.com', 'bob@example.com', 'charlie@example.com'] } df = pd.DataFrame(data) primary_key_cols = ['id', 'name'] def style_primary_keys(df, primary_key_cols): styled_cols = {col: f"*{col}" if col in primary_key_cols else col for col in df.columns} df = df.rename(columns=styled_cols) return df styled_df = style_primary_keys(df, primary_key_cols) display(styled_df.style)
I don't think 1 is worth the additional maintenance burden. 2 may be the most long-term solution, but 3 is an easier short-term solution. I lean toward 2.
Has anybody worked on that?
Screenshot (dj vers 0.14.3)
Has anybody worked on that?
Not that I'm aware of. I still edit the HTML of my installs for each env
Thanks @CBroz1 - could you provide a mini-tutorial here on how to do that?
Sure -
- Clone this repo, do an editable install within your conda environment
cd /your/path/for/local/files git clone https://github.com/datajoint/datajoint-python/ cd ./datajoint-python conda activate your_env pip install -e .
- Edit the preview file to change the hex codes (e.g.,
#A0A0A0) of thecssvariable withinrepr_htmlhere, save the result in/you/path/for/local/files/datajoint-python/datajoint/preview.py
My `css` variable
See variables at the top. Picking colors may be easier with a color picker VSCode extension
<style type="text/css"> :root { /* Variables: */ --my-background-dark: #282a36; --my-background-light: #44475a; --my-foreground: #f8f8f2; --my-lines: #6272a4; --my-highlight: #bd93f9; } .Table{ border-collapse:collapse; background-color: var(--my-background-dark); color: var(--my-background-light); } .Table th{ /* Table Header */ background: var(--my-background-dark); color: var(--my-background-dark); padding: 4px; border: var(--my-lines) 1px solid; text-align: center; } .Table td{ /* Table Data */ padding:4px; border:var(--my-lines) 1px solid; font-size:100%; } .Table tr:nth-child(odd){ /* Table Row, Odd */ background: var(--my-background-light); color: var(--my-foreground); } .Table tr:nth-child(even){ /* Table Row, Even */ color: var(--my-foreground); background: var(--my-background-dark); } /* Tooltip container */ .djtooltip { } /* Tooltip text */ .djtooltip .djtooltiptext { visibility: hidden; width: 120px; background-color: var(--my-background-light); color: var(--my-foreground); text-align: center; padding: 5px 0; border: 1px solid var(--my-lines); border-radius: 6px; /* Position the tooltip text - see examples below! */ position: absolute; z-index: 1; } #primary { font-weight: bold; color: var(--my-highlight); } #nonprimary { font-weight: normal; color: var(--my-foreground); } /* Show the tooltip text when you mouse over the tooltip container */ .djtooltip:hover .djtooltiptext { visibility: visible; } </style>
Based on dracula theme, using this color scheme
- Restart the kernel of your jupyter instance to see the effects
Thanks so much @CBroz1 !
... I wish this was configurable somehow as part of dj.config (light dark switch) @dimitri-yatsenko
- added a commit that references this issue
on Jan 9, 2026 - added a commit that references this issue
on Jan 9, 2026 Fixed in #1315
In Jupyterlab table previews are suddenly unreadable in dark and dark-high-contrast themes. I am not sure what happened here, but I seem not to be able to revert it to showing the font in white. This might be a jupyter lab issue and not a datajoint issue.
OS: Mac OS
Jupyter lab: Version 4.2.4
Datajoint python: Version 0.14.1