tqt
/
Ghost-Admin
mirror of https://github.com/TryGhost/Ghost-Admin.git
1
0
Fork 0
Code Issues Releases Wiki Activity

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

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 3cd0d7993c
commit 90343a5dc8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 0 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
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);
});
}
});