/    Sign up×
Community /Pin to ProfileBookmark

How to manage themes without flickering?

Copy linkTweet thisAlerts:
Mar 08.2020

I am trying to add themes dynamically to a site.
For testing purpose I store the theme value in localStore.theme
and set the theme in the body tag

[upl-image-preview url=https://www.webdeveloper.com/assets/files/2020-03-08/1583654667-389923-image.png]
It seems to work, but for a few milliseconds the theme is gone and “flicker”

The theme is set on load

“`
window.onload = function() {
alert(localStorage.theme) /* to show the flicker */
document.body.dataset.theme = localStorage.theme
/* if no theme reset to classic*/
if (localStorage.theme === null) {
window.localStorage.setItem(‘theme’, “classic”);
}
}
“`

—–> Live: http://94.237.92.101:3030/myprefs

I have tried to move the theme to the html tag, but I cannot figure out how do this dynamically:

`<html data-theme=”classic” lang=”en”> `

My question is how to avoid the flickering during reload of the page?
(Note that the cache may reduce the flicker after a while)

to post a comment
HTMLJavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@sibertauthorMar 08.2020 — ["How to add theme without flickering?","How to manage themes without flickering?"]
Copy linkTweet thisAlerts:
@SempervivumMar 08.2020 — Try to use the event DOMContentLoaded:

https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

It will fire earlier.

Or simply place your javascript at the end of the body, right before the closing </body>:
&lt;script&gt;
alert(localStorage.theme) /* to show the flicker */
document.body.dataset.theme = localStorage.theme
/* if no theme reset to classic*/
if (localStorage.theme === null) {
window.localStorage.setItem('theme', "classic");
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@sibertauthorMar 08.2020 — > @Sempervivum#1615869 [https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event](https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event)

> It will fire earlier.

> Or simply place your javascript at the end of the body, right before the closing </body>:

The DOMLoader reduce the flicker, but there is still a flicker. And I got an error message:

DevTools failed to parse SourceMap: chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.preload.js.map

nav.js:44 [Violation] 'DOMContentLoaded' handler took 442ms

http://127.0.0.1:3030/posts

How do I avoid flickering completely?
Copy linkTweet thisAlerts:
@SempervivumMar 08.2020 — I tested the site from your initial posting and it works fine: Reload without flickering. Have you fixed this issue in the meantime?
Copy linkTweet thisAlerts:
@sibertauthorMar 09.2020 — > @Sempervivum#1615882 I tested the site from your initial posting and it works fine: Reload without flickering. Have you fixed this issue in the meantime?

I am using "DOMContentLoaded" now which reduce the flickering. But it still is some flickering on one page that loads 500 records from database. At least using Chrome.

http://94.237.92.101:3030/posts
×

Success!

Help @sibert spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.26,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...