Black-to-white flash when opening a New tab

[henyckma]

Connected to Issue https://github.com/zombieFox/nightTab/issues/60

Hello,

Everytime I open a new tab, the tab opens as a black page, and turns itself as the background color I previously selected. I have the white ascent theme, and its flashing everytime I open a new tab.

Here's the evidence in video. Thank you so much! screen-capture.webm.zip

[zombieFox]

Hi, I have some questions to help me understand what is happening.

1. Are you saying the white background I see behind the header and bookmarks is not reflecting the theme selection?
2. Do you have a custom background colour selected? (eg: from menu > background > custom colour)
3. What is the OS/Browser you are using and what version of each?

Please note that there is a point in time before any code from nightTab is loaded. This is when the browser renderes a new tab/window and will control what colour is shown. I have no way to control that as that is defined by the OS/browser.

Thanks.

[henyckma]

Hello, regarding of your questions:

1. No, the theme is working properly, I have an static white background.
2. Yes, but both of the options (custom and default theme background) has the same results, even if I have a wallpaper.
3. macOS Catalina 10.15.3 (19D76) / Latest Google Chrome Stable Version 79.0.3945.130 (Official Build) (64-bit)

Thank you so much.

[henyckma]

Found the issue.

I have only seen it on MacOS Catalina / Latest Chrome Stable. Windows 10 Latest Chrome Stable has not this issue.

I fixed it by changing the theme to this one: https://chrome.google.com/webstore/detail/material-dark-mkbhd/iiplegjeipnjdpgkeccfccnahofbckad

I dont usually use themes on Chrome, but I decided to test some themes. Apaprently, it is an issue of the themes on Chrome. I have tested 3 themes, here's the video of the result. (Maybe a fix is to update the Chrome theme to a certain background color?)

screen-capture (1).webm.zip

[zombieFox]

Thanks for sharing more videos, it really helps me gain a better understand of what is happening.

I think you are right. The browser theme may be chaning the default tab background colour before nightTab's code is loaded. In anycase it does appear to be unavoidable since the problem exists on the browsers/OS level.

Thanks, closing this issue.

[p5ydn0]

@Henyckma @zombieFox

I have the same problem. This problem is really annoying. Do you have a suitable solution in the end? If it can be solved, what is the solution?

Thank you very much for sharing.

[zombieFox]

@p5ydn0 What OS are you using? And does it support a dark theme system wide?

[p5ydn0]

@p5ydn0 What OS are you using? And does it support a dark theme system wide?

@zombieFox Thank you for your reply.

The environment I use is as follows:

• macOS 10.15.6
• Chrome 84.0.4147.89

Yes, the system supports dark themes.

Is there any effective solution to this problem in the current environment?

Thanks you very much.

[henyckma]

@p5ydn0 I fixed it by changing the theme to this one:

https://chrome.google.com/webstore/detail/material-dark-mkbhd/iiplegjeipnjdpgkeccfccnahofbckad

Can you please try it and check if that works to you as well? Seems to be an issue with the themes with Chrome on macOS

[p5ydn0]

@p5ydn0 I fixed it by changing the theme to this one:

https://chrome.google.com/webstore/detail/material-dark-mkbhd/iiplegjeipnjdpgkeccfccnahofbckad

Can you please try it and check if that works to you as well? Seems to be an issue with the themes with Chrome on macOS

@Henyckma Thank you for your help and reply.

I installed the theme plugin according to your method and restarted Chrome, but the problem still exists, the same as before.

@zombieFox I don’t know if I am the only one who has this problem or other people have similar feedback?

[zombieFox]

Investigating and testing for a week, here are my thoughts and ideas:

To help understand what is happening we need to be clear on a few things.

1. Opening a browser new tab/window has a colour defined by the the browser or OS before any nightTab (or any website really) code is parsed and rendered. This colour may only appear for a split second depending on how fast the browser renders the page (nightTab).
2. This colour can be defined by a browser theme.
3. This colour can be defined by the OS level light or dark theme, (if the OS supports it).
4. nightTab can not control this colour. It can only control the colour of the page when it is loaded and rendered by the browser.

nightTab v5.42.1, the current live addon/extension has an initial page colour of dark grey. Which should appear for a split second before the users nightTab theme is loaded. This was coded in to address the issue of a dark OS, browser window and nightTab theme showing a flash of white on load reported by many users. Which makes sense since nightTab is a dark themed new tab page addon/extension.

So if the user has a light theme OS and a light theme browser window and a light theme nightTab, a flash of dark grey could appear.

I can see this could be an issue for some so have been testing a new solution. A new solution has been added to better respect the OS level dark or light mode for that split second when nightTab is loaded and rendered. However, like before, there are still some scenarios when a flash of dark or light could appear depending on the users particular setup. After research and testing this issue I am of the opinion that there is no solutions which works for all. The best we can do is try to solve for as many scenarios as possible. So the new solution prefers-color-scheme media query (MDN docs on prefers-color-scheme) is used and will cover more scenarios than the current live version.

So, say the user has a light themed OS and browser window. nightTab will open, the media query will check using prefers-color-scheme and render white as the initial colour. Then the nightTab theme will load removing the white colour. The same will be true of a dark themed OS and browser. The prefers-color-scheme media query check will result in rendering black as the initial colour.

However, if the user has a light themed OS which does not support light or dark mode and browser window has a dark theme installed then the prefers-color-scheme media query will default to light and render white as the initial colour. In this scenario the only information nightTab has is that the OS is instructing "light theme". This is unfortunately unavoidable.

This change will be out in the next release.

[p5ydn0]

@zombieFox

Thank you for your reply and your efforts to this end. I will continue to use it and look forward to the next version. Hope the software gets better and better.