Avoid flash between dark and light

[montanaflynn]

Currently every page loads the dark header and then turns to light, causing a flash. It would be better if it could somehow avoid that.

[DennisSnijder]

We are looking into this at the moment. Thanks for reporting 👍

[Daiz]

With the userscript version you can avoid the flash by adding // @run-at document-start to the metadata block. Tested to work at least with latest Chrome and TamperMonkey.

(To be honest, I think it'd be better to offer this project only as a userscript to begin with - most people probably don't want to install a whole extension for something as simple as this, and userscripts are way more portable out of the box.)

[Daiz]

Also, the extra class removal will likely stop working sooner rather than later, so should make a copy of all the relevant styling now before it's gone.

[DennisSnijder]

@Daiz I will start looking into completely changing the styling instead of simply removing the class.

[kinncj]

@DennisSnijder -> Github Light v0.3.0.zip

[cnbeining]

My fault. @Daiz he made his point.

[Crecket]

The flash is caused because the script first checks local storage if the extension is enabled or not most likely

[patrykcieszkowski]

@Crecket if you're right, then I doubt there is any way to bypass this state.

[Crecket]

I tried to disable the local storage check and it is definitely caused by this. Perhaps we can change it so it removes the class by default (which is pretty much unnoticeable) and only adds it back when the extension's 'enabled' option is set to false. #19

[Crecket]

21

[Andrews54757]

@DennisSnijder I discovered something, when I ported your extension's css to stylus, this didn't happen. It didn't flash.

stylus: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne/related

Css I used:

.header {
    color: #333;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e5e5e5
}

.header-search-scope {
   color: rgb(64, 120, 192);
   background-color: rgb(237, 242, 249);
   border-color: rgb(198, 215, 236);
}

.read-only-mode-banner {
    background-color: #f8e45f;
    border-bottom-color: #f6dc2e
}

.header-logo-invertocat, .header-logo-wordmark {
    color: #555
}

.notification-indicator .mail-status {
    color: #fff;
    background-image: -webkit-linear-gradient(#1cafff, #0086ce);
    background-image: linear-gradient(#1cafff, #0086ce);
    border: 2px solid #f3f3f3
}

.notification-indicator:hover .mail-status {
    background-color: #4078c0
}

.header-search-scope {
    font-size: inherit;
    color: #767676 !important;
    border-right: 1px solid #eee !important;
}

.scoped-search .form-control.focus .header-search-scope {
    color: #4078c0;
    background-color: #edf2f9;
    border-color: #c6d7ec
}

.header-nav-link {
    color: #555
}
.header-logo-invertocat:hover, .header-logo-wordmark:hover,
.header-nav-link:hover, .header-nav-link:focus {
    color: #4078c0
}

.header-nav-link:hover .dropdown-caret, .header-nav-link:focus .dropdown-caret {
    border-top-color: #4078c0
}

.header-search {
    font-size: 14px
}

.header-search-wrapper {
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
    border: 1px solid #ddd;
    font-size: 14px;
    min-height: 0;
}

.header-search-wrapper.focus {
    background: #fff;
    border-color: #51a7e8;
    outline: none;
    color: inherit;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(81, 167, 232, .5);
}

.header-search-scope {
    font-size: 12px;
    line-height: inherit;
    min-height: 0;
}

.header-search-input {
    min-height: 26px;
}

.header-search-input::-webkit-input-placeholder,
.header-search-input::placeholder {
    color: rgba(0,0,0,.5)
}

.form-control {
    color: #333 !important;
    background-color: #fff !important;
}

*::-webkit-input-placeholder {
    color: #767676 !important;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: #767676 !important;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: #767676 !important;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: #767676 !important;
}