[Bug] Theme switches to light even when dark is set about new-tab HOT 4 OPEN

Thanks for the bug report. I've got a few questions to try to narrow down the cause:

1. Is it FOUC (flash of unstyled content), where the page is white but just for a moment? Or is it persistent?
2. If it's FOUC, is there anything that might be slowing down the initial page load? Are there some other extensions that load first? Is it a slow system and/or a slow HHD?
3. If it's persistent, does the theme load properly when you refresh the page?
4. Is it the light theme or the base styles without a theme?
5. Does it only occur on the first new tab page or also when you reload the page and/or open more new tab pages?

I'm the same as you and prefer a dark theme. Anything white hurts the eyes when browsing at night! Especially sudden unexpected flashes.

It used to happen before where when loading the page it would flash white first before the theme was loaded. More recently I rewrote the theme loader to be synchronous and to load the theme before the page is actually rendered.

Under the hood, the way it currently works is there's a base set of styles that make up most of the CSS. These base styles are inline in the HTML so they will always load regardless. Then there are the themes which are small CSS that set some variables (CSS custom properties) and provide minor tweaks. The user's chosen theme (stored with the chrome.storage.local API and defaults to light) is loaded into localStorage when the theme is changed in the settings or when the extension is updated (via a background script). On a new tab page load we get the theme from localStorage and inject it into a <style> tag.

This theme loading strategy is a bit complex since a theme needs to be pre-loaded and then injected, but it does allow for a lot of power around theming. User customisable themes would be possible for example (it's not a feature now but something I'd like to add in future).

from new-tab.

1. It is persistent among other tabs and when i close the browser.
2. There is no page slowdown
3. When I refresh the page the theme does not load properly and just stay on light theme while the settings clearly say dark theme.
4. For now I can't clearly see the difference between light and without style.
5. It persists across reloads, browser restarts or when i open up a new tab.

For now I will update to the latest git commit to see if the issue persists. Will close after 30 days if it's gone.

from new-tab.

Thank you for the info 🙂

I ran into what might be the same issue and fixed it in #1349. Although what you reported may be a different issue, since you mentioned the light theme is being loaded instead of your chosen theme (and not "no theme"). Closing the issue for now as there's a chance the bug is fixed, but please reopen if you encounter it again.

The bug I saw was in essence a race condition between the browser's HTML parser + DOM constructor, and inserting textContent into the theme <style> node. This extension omits all unnecessary tags in newtab.html, so the browser adds any implicit standard HTML tags automatically. If that happened at exactly the same time as setting the style node textContent, it inserted text into unexpected parts of the document, breaking the DOM and theme. This could cause page to load with "no theme".

The fix creates the a style node and inserts it in the DOM dynamically, which should prevent the race condition. The theme loader is a little larger but overall the performance is actually better!

from new-tab.

I'm reopening the issue as I've observed the same thing happening. My fix didn't work as expected.

from new-tab.