Add a dark mode to table reports

[rouk1]

Problem Description

Table report only has a light theme.

Feature Description

The implementation could be in three parts:

• extract all colors to css variables
• use the created variables everywhere
• create a new set of variables (a dark theme), for a first round dark mode could be current color with inverted luminance
• use a media query to switch between variables sets

Implementation could look like:

@media (prefers-color-scheme: dark) {
  :host {
    /* backgrounds */
    --color-background-primary: #1a1a1a;
    --color-background-secondary: #222;
    --color-background-plots: #121212;

    /* text */
    --color-text-primary: #fff;
    --color-text-secondary: #a2a2a2;

    /* shadow */
    --color-shadow: rgb(0 0 0/58%);
  }
}

@media (prefers-color-scheme: light) {
  :host {
    /* backgrounds */
    --color-background-primary: #fff;
    --color-background-secondary: #fafafb;
    --color-background-plots: #fdfdfd;

    /* text */
    --color-text-primary: #2f3037;
    --color-text-secondary: #616271;

    /* shadow */
    --color-shadow: rgb(0 0 0/19%);
  }
}

Note

Naming css variables is always tricky, my proposal is to use a consistent pattern: --what-where-variation-interactivity
what could be colors for now but may scale to sizes
where defines in which css rules the variable should be used (background for background, text for font color, ...)
variation values may be variable according to context a title may not have exactly the same color as a subtitle for example
interactivity value on hover for example

Alternative Solutions

No response

Additional Context

No response

[jeromedockes]

Thanks a lot for opening this @rouk1 ! Your plan sounds great. I'm looking forward to having someone who knows what they are doing (as opposed to me 😅 ) improve the display part of the reports :)

after the dark mode was mentioned in the skore issue I had started a branch (which was not ready for a PR yet) so just in case there's some information in that I opened #1166

for a first round dark mode could be current color with inverted luminance

that sounds good, though note not much thought has gone into the current colors so once everything is organized with a reasonable set of variables we can also redefine all colors for both modes.

Naming css variables is always tricky, my proposal is to use a consistent pattern: --what-where-variation-interactivity

Indeed that part is rather chaotic in the tablereport ATM...