Refactor theme to background.
Apply the theme while the background is loading instead of the sidebar.
In combination with the use of an userChrome.css
to override the default panel loading colors, this avoids white flashes due to the background color used in the default theme when the extension loads or the sidebar opens if the current browser theme doesn't use the same.
When the button for opening the sidebar is clicked or the shortcut triggered, the current theme is loaded and the sidebar is opened at the same time. But the loading of the browser theme need time so isn't applied immediately, the default theme is displayed instead for a limited time but long enough to create the flash.
Now, the theme is loaded when the extension is loaded and theme is transmitted to sidebar.html
as an html parameters. It's the same for the custom css. sidebar.html
load as quickly as possible theme.js
which applies the nice browser theme.
For dark theme users:
Set toolkit.legacyUserProfileCustomizations.stylesheet
to true
in about:config
.
Add this in your userChrome.css
file.
/* ff 73.0.1 - tab center reborn: avoid white flashes when the
sidebar is opened */
@-moz-document url(chrome://browser/content/browser.xhtml) {
browser#sidebar {
background-color: #0c0c0d !important;
}
}
@-moz-document url(chrome://browser/content/webext-panels.xhtml) {
window#webextpanels-window,
window#webextpanels-window script:first-child,
browser#webext-panels-browser {
background-color: #0c0c0d !important;
}
/* the background color of this element cannot be overriden on the
linux version so its first item is used as placeholder element */
window#webextpanels-window script:first-child {
display: block;
height: 100vh;
}
stack#webext-panels-stack {
margin-top: -100vh;
}
}
/* userContent.css */
@-moz-document url-prefix("moz-extension://TCR-UUID/sidebar/sidebar.html") {
:root body {
--background: #0c0c0d;
}
}