Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

🐛 Fixed flash of unstyled content appearing when toggling night mode (#1818)

Browse source 
closes https://github.com/TryGhost/Ghost/issues/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.
This commit is contained in:
Harsh Maur 2021-01-12 15:15:33 +05:30 • committed by GitHub
parent 88e12089bd
commit 78513b7998
1 changed files with 0 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ghost/admin/app/services/feature.js
View file

@ -126,11 +126,9 @@ export default Service.extend({
return this.lazyLoader.loadStyle('dark', 'assets/ghost-dark.css', true).then(() => {
$('link[title=dark]').prop('disabled', !nightShift);
$('link[title=light]').prop('disabled', nightShift);
}).catch(() => {
//TODO: Also disable toggle from settings and Labs hover
$('link[title=dark]').prop('disabled', true);
$('link[title=light]').prop('disabled', false);
});
}
});