Jupyterlab shows tables in black on black

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

The html table style is defined here, hardcoded for light themes. Not ideal, but running an editable install would allow you to adjust these values

@CBroz1

@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

@CBroz1

Thanks @CBroz1 - could you provide a mini-tutorial here on how to do that?

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 the css variable within repr_html here, 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

@CBroz1

Thanks so much @CBroz1 !

... I wish this was configurable somehow as part of dj.config (light dark switch) @dimitri-yatsenko

fix: add dark mode support for table previews in Jupyter (#1167)

fix: add dark mode support for table previews in Jupyter (#1167) (#1315)

Fixed in #1315

Navigation Menu

Repository navigation

Jupyterlab shows tables in black on black #1167

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Jupyterlab shows tables in black on black #1167

Description

Activity

CBroz1 commented on Aug 20, 2024

dimitri-yatsenko commented on Aug 21, 2024

CBroz1 commented on Aug 21, 2024

horsto commented on Jan 16, 2025

CBroz1 commented on Jan 17, 2025

horsto commented on Jan 17, 2025

CBroz1 commented on Jan 17, 2025

horsto commented on Jan 17, 2025

dimitri-yatsenko commented on Jan 9, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions