docs: use dark theme for devices that prefer dark theme #2337
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.
What I did
Here is a comparison of how this dark theme looks like compared to original theme on mobile
ing-lion-dark-light-theme-compare-mobile.webm
The same comparison for desktop (FLASHING warning)
ing-lion-dark-light-theme-compare-desktop.webm
Here is a video of this settings respecting the OS theme setting (FLASHING warning)
ing-lion-dark-light-theme-respect-os-settings.webm
Alternatives I tried/though of
@import url(./dark-theme.css);
. But the problem was I had to put the @import at the beginning of the file, and then the dark theme would lose its specifity and gets overriden by white background of body. Chose not to go with!important
for this minimal change and keep it simple for now. The benefit of moving to a separate file (later) would be that we can fine-tune all dark-theme-related styles in that file.This PR fixes #2336