Added automatic dark mode to the widget #135
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
A lot of pages nowadays respect the CSS
prefers-color-scheme
attribute to change the colors of the website automatically based on the users browser or system settings.As the widget didn't have any CSS logic to respect that and looked quite ugly with the dark mode I added some CSS to make the widget also look good if the user requests the dark mode of a page.
I also adjusted the existing background a bit so that we don't have white-on-white for a normal page.
This is how it will look in dark mode (
prefers-color-scheme: dark
):And this is how it will look in light mode (
prefers-color-scheme: light
):Note that the links are blue as well if not visited before.
If you have any suggestions feel free to write comments.