Black table on light theme

[XueSheng-GIT]

Describe the bug
If light theme is chosen, tables are shown in black.

To Reproduce
Steps to reproduce the behavior:

1. Choose light theme
2. Open a markdown (text) file
3. Create a table

Expected behavior
Table should be "normally" visible (black lines/letters on white ground).

Screenshots

Client details:

• OS: Ubuntu 22.04
• Browser: Firefox
• Version: 106.0.2
• Device: Desktop

Server details

Text app version: 3.6.0

Operating system: Ubuntu 20.04

Web server: apache2 (2.4.54)

Database: mariadb (Ver 15.1 Distrib 10.3.34-MariaDB)

PHP version: 7.4.32

Nextcloud version: 25.0.1

[juliushaertl]

I cannot reproduce this, can you maybe check if this is some browser caching that still sticky to a dark version? Does it also happen when you try loading in a private browser window?

[XueSheng-GIT]

Just logged in with a different user on another client (PC) with private browsing (firefox). This time the theme defaulted to light.
Opening the markdown file, the table was shown correctly (white for the light theme). Closing the markdown file, changing the theme to dark and opening the markdown file again result now in the opposite isssue (white table on dark theme).

This is reproduceable for me and doesn't seem to be related to an old cache on the first view.
@juliushaertl Did you try to change the theme?

[juliushaertl]

How and where did you change the theme? I tried with the OS native dark/light mode on macOS and the table properly adjusts there.

[XueSheng-GIT]

I used the personal theme settings. It defaults to "system standard" and was manually changed to either light or dark.

[XueSheng-GIT]

Just tried to keep the "system standard" setting of the theme and changed light/dark within the windows settings and the table color changes as expected (don't have access to my Ubuntu PC right now to double check there). Thus it seems to be related to the "manual" light/dark setting within nextcloud.

[juliushaertl]

Interesting, I can reproduce this, looks like the browser is somehow not picking up the right value for the css variables, even though the original one has the correct color set:

[susnux]

This is not only related to firefox, but I can also reproduce this on chromium when setting the preferred color theme to dark but configuring nextcloud to use the light color theme.

[susnux]

After experiencing this issue also on the forms app, I finally found the reason for this and a fix 🥳

The problem is the css variable evaluation order. So in this case:

• HTML tag
  • defines --color-main-background for dark color theme (as requested by the browser)
  • defines --table-color-background to be the same as --color-main-background
• Body tag
  • redefines --color-main-background to match the theme (because data-theme-light is set on the body tag)
• Table tag
  • Uses --table-color-background which evaluates to HTML-Tag::--color-main-background and in the context it is set to dark instead of bright.

So the solution would be that the server sets data-theme-light on the HTML tag rather than the body tag.