white flash on dark mode on refreshing page

Question

the problem is when the dark mode is enabled, and the page is reloaded for some reason, there's a flicker of white background all over the page before it turns to be dark. It stays a fraction of a second. It just doesn't look professional. i Know there is already a similar answer i tried, but that one doesn't resolve my problem.

As you can see in the gif flicker

HTML

 
            
                
                    
                
                
                    
                        
                            
                                Home
                            
                        
                        
                            
                                About
                            
                        
                        
                            
                                Qualification
                            
                        

                        
                            
                                Portfolio
                            
                        
                        
                            
                                Contact

CSS Light

/*=============== BASE ===============*/

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    background-color: var(--body-color);
    font-size: var(--normal-font-size);
    font-family: var(--body-font);
    color: var(--text-color);
    margin: 0 0 var(--header-height) 0;
}

h1,
h2,
h3 {
    color: var(--title-color);
    font-weight: var(--font-semi-bold);
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

CSS dark

/*========== Variables Dark theme ==========*/

body.dark-theme {
    --title-color: hsl(var(--hue), 12%, 95%);
    --text-color: hsl(var(--hue), 12%, 75%);
    --body-color: hsl(var(--hue), 40%, 8%);
    --container-color: hsl(var(--hue), 24%, 12%);
}


/*========== Button Dark/Light ==========*/

.nav__btns {
    display: flex;
    align-items: center;
}

.change-theme {
    font-size: 1.25rem;
    color: var(--title-color);
    cursor: pointer;
    margin-right: var(--mb-2);
}

.change-theme:hover {
    color: var(--first-color);
}

JAVASCRIPT

/*==================== DARK LIGHT THEME ====================*/
const themeButton = document.getElementById('theme-button')
const darkTheme = 'dark-theme'
const iconTheme = 'uil-sun'

const selectedTheme = localStorage.getItem('selected-theme')
const selectedIcon = localStorage.getItem('selected-icon')

const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light'
const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'uil-moon' : 'uil-sun'

if (selectedTheme) {
    document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme)
    themeButton.classList[selectedIcon === 'uil-moon' ? 'add' : 'remove'](iconTheme)
}

themeButton.addEventListener('click', () => {
    document.body.classList.toggle(darkTheme)
    themeButton.classList.toggle(iconTheme)
    localStorage.setItem('selected-theme', getCurrentTheme())
    localStorage.setItem('selected-icon', getCurrentIcon())
})

fdomn-m · Accepted Answer

This is a common issue called FOUC - flash of unstyled content.

Caused by

Or, in other cases, by running the dark mode script inside doc.ready

What happens is that your page renders (with light style) and then, when the page has finished rendering, the defer script runs (just before DOMContentLoaded).

As the page has already been rendered, you see it with the light styles, until the js has a chance to add your dark-theme to the body tag.

This will have nothing to do with how long it takes to "parse"/"apply" the css, given the assumption that these too are in the then they will be applied before content is rendered; if this takes a long time then it will still be before the rest of the HTML is rendered (giving a blank page for that duration).

The solution is to run the js as soon as possible within the html document. eg:


   ... css and other js scripts


   
   ... rest of body

the script will run at the time it appears in the render process - before the unstyled content is rendered. So you never see the unstyled content.

Care needs to be taken, for example OPs code also sets a class and a click event on a button; that button won't exist yet.

white flash on dark mode on refreshing page

Answers (1)

Related Questions