This repository has been archived by the owner on Nov 28, 2022. It is now read-only.
馃悰 Fixed flash of unstyled content appearing when toggling night mode #1818
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
closes #12396 We use two stylesheets ghost-light.css and ghost-dark.css for light mode and night mode respectively. The problem occurs when we disable the light stylesheet when we enable dark stylesheet, as there is a moment when there is no style applied This causes flash of unstyled content (or a big logo when users flip the night mode switch) Since the ghost-dark style is loaded after the ghost-light stylesheet, we only need to enable or disable the dark stylesheet. When the dark stylesheet is enabled, the light stylesheet will be overridden automatically by the browser. I could not find any performance implications on overriding styles. The only performance implication is around loading a new stylesheet which we already do.
馃悰 Fixed flash of unstyled content appearing when toggling night mode
|
Thanks @harshmaur |
|
Wow. Thanks @harshmaur |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
closes TryGhost/Ghost#12396
We use two stylesheets ghost-light.css and ghost-dark.css for light mode and night mode respectively.
The problem occurs when we disable the light stylesheet when we enable dark stylesheet, as there is a moment when there is no style applied
This causes flash of unstyled content (or a big logo when users flip the night mode switch)
Since the ghost-dark style is loaded after the ghost-light stylesheet, we only need to enable or disable the dark stylesheet.
When the dark stylesheet is enabled, the light stylesheet will be overridden automatically by the browser.
I could not find any performance implications on overriding styles. The only performance implication is around loading a new stylesheet
which we already do.
Got some code for us? Awesome 馃帄!
Please include a description of your change & check your PR against this list, thanks!
ember testfrom the repo root - will becore/clientif working from the submodule in Ghost).More info can be found by clicking the "guidelines for contributing" link above.