Logo loader video has white background also in dark mode

[lorumic]

Issue Summary

When dark mode is selected for admin-x, the logo-loader.mp4 video is played when loading pages (e.g. the settings page), but this video has a white background, making it look like this:

Two possible solutions:

• Converting the MP4 to a GIF/WEBP/APNG so that you have transparency support. (recommended)
• Add a dedicated logo-loader-dark.mp4 file, where the video has the same dark background as the page. (less future-proof)

Steps to Reproduce

1. Open admin-x.
2. Switch to dark mode.
3. Open settings page - on first load, it shows the loader for a fraction of a second.
4. See the loader with the white background over the dark background of the page.

Ghost Version

5.69.2

Node.js Version

v18.18.2

How did you install Ghost?

From source (Ubuntu)

Database type

MySQL 5.7

Browser & OS version

Google Chrome 118.0.5993.70, Ubuntu

Relevant log / error output

No response

Code of Conduct

• [X] I agree to be friendly and polite to people in this repository

[Adarsh6xutz]

@kevinansfield I think it require some input as we can not just change the background of loader to dark because loader itself is dark in color

[lorumic]

Right, but I see there is already a couple of nice darkmode-compatible logos in the README of the GitHub repo, here and here. I guess one of these could be used as a base to build the new animation?

[lalitkumawat1m]

Hello team, I want to work on this issue please assign to me

[github-actions[bot]]

Our bot has automatically marked this issue as stale because there has not been any activity here in some time.

The issue will be closed soon if there are no further updates, however we ask that you do not post comments to keep the issue open if you are not actively working on a PR.

We keep the issue list minimal so we can keep focus on the most pressing issues. Closed issues can always be reopened if a new contributor is found. Thank you for understanding 🙂