Automatically Adjust Document Preview to Match Dark/Light Theme

How to use GitHub

• Please use the 👍 reaction to show that you are interested into the same feature.
• Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
• Subscribe to receive notifications on status change and new comments.

Is your feature request related to a problem? Please describe.

At night, I often find myself blinded when navigating the Files app or viewing document previews (e.g., .txt, .md, .odt, .odg, .odp, etc.). These previews are displayed with a bright white background, which clashes with the dark theme and can be harsh on the eyes.

Describe the solution you'd like

I'd like to see an automatic adjustment of the preview area to better match the Nextcloud theme, particularly for dark mode. This would greatly reduce visual discomfort when working at night.

Describe alternatives you've considered

There are a few approaches that come to mind:

• Option 1: Use what's already applied in the "Models" folder
  Whatever method is used to render document previews in the "Models" folder already looks better in dark mode—though I’m not sure what triggers it. If that could be applied consistently and automatically, it might be the cleanest solution. It inverts black and white and do not change the colors.

• Workaround 1: Use a semi-transparent, saturated preview (CSS-based)
  This wouldn't be a full dark theme preview, but it softens the blinding white without altering the content too much. The preview appears grayish and less aggressive to the eyes.

This can be done with css:

.files-list__row-icon-preview {
  opacity: 0.75; /* 75% opaque = 25% transparent */
  filter: saturate(1.5); /* Increase color intensity */
}

• Workaround 2: CSS filter to invert colors + hue/contrast correction
  This approach doesn’t preserve original colors perfectly, but it works very well for text and gives an impression of the original image colors. Here’s a CSS example:

.files-list__row-icon-preview {
  filter: invert(1) hue-rotate(180deg) brightness(1.1) contrast(0.85) saturate(1.1);
}

Sadly, Workaround 1 & 2 also affect the photos...

Additional context

Thank you for considering this enhancement!

No source files or tests are named. Start by locating the Files app document-preview rendering and its theme handling, then compare the existing Models-folder behavior with the proposed CSS filters across text documents, office previews, and photos. Done should mean previews adapt to dark and light themes without making photo previews unusable.