Customize a dark color for the new tab "blank page"...
-
Good idea, although I have solved using the first speed dial empty page as New Tab, this allows me to customize it as I like
-
the problem with using the "start page" workaround is there is still the top bar in the way. so i would still prefer to use a custom dark blank page, for it to be as empty and clean as possible.
-
This is true, it would be desirable to be able to configure the Blank page in the same way. Later maybe, the poor developers sure already have enough dark circles
-
This would be fantastic. I'm positive about:blank is still loaded sometimes as I still see a whiteflash once in awhile. (Plus I'd just love to go back to about:blank being my home/newtab page instead of Start Page/Speed Dial.)
-
@TsunamiZ said above:
» there is still the top bar in the wayit can be hidden in
Settings > StartPage > Navigation = Hidelol, i knew this, but didnt know how to disable the folders and the plus icon - which u knew lol :smiling_face_with_open_mouth_closed_eyes:. i got helped regarding that here: start page customisation
-
I have been using it this way as workaround to have a dark about:blank. However, I just noticed that this workaround is no longer necessary, about:blank now has a dark version, so I went back to using that as the new tab page.
However, it seems that it is not controlled by Vivaldi's theme, but Chromium's theme, which is controlled by the OS's light or dark theme. So this is likely not due to a change by Vivaldi developers, but something that came from the Chromium base. Similarly I had noticed that chrome://settings/ and chrome://downloads/ have been getting dark modes as well, when I turned on OS's dark mode.
Still, I guess this request might be still valid for those who prefer to use light mode in the OS but dark mode in Vivaldi. And also for those on Linux: last I tried Chromium parts of Vivaldi didn't obey the OS dark theme (might be because, unlike Windows and Mac, there wasn't a binary light/dark choice reported to apps, but customizable themes which happened to be light or dark), but that might depend on the distro.
-
@debiedowner said in Customize a dark color for the new tab "blank page"...:
I have been using it this way as workaround to have a dark about:blank. However, I just noticed that this workaround is no longer necessary, about:blank now has a dark version, so I went back to using that as the new tab page.
You must've modified something else or be on a snapshot or something, because
about:blank
is most definitely not dark on the latest stable Windows build (3.6.2165.34 (Stable channel) (64-bit)
). My Windows theme is set to dark mode.Edit: A buddy also running the latest stable tested and confirmed the same situation as myself.
-
It's not due to any modification I did to Vivaldi: I just created a new profile with no customization and it had black about:blank.
But I now found out where the issue is: I am not using Windows 10's Dark Mode under Settings -> Personalization -> Colors, but instead the High Contrast Mode under Ease of Access to achieve system-wide dark theme (using the shortcut Alt+Shift+PrtScr).
I prefer the High Contrast Mode because Windows 10's new Dark Mode doesn't work with almost any of the applications that I use. It mainly only works with "modern" apps, which I don't use any. It doesn't even work with many Windows components, e.g. Task Manager, Control Panel, File dialogs... Windows actually has a powerful theming system that can actually modify all applications that correctly use inherited system colors, but for some reason they disabled it, except for the ugly High Contrast Mode they left alone as an accessibility feature.
It does create problems in some badly written programs that mix system and custom colors, which is presumably why Microsoft disabled it; but I am still disappointed that their solution was a half-baked Dark Mode that doesn't actually theme any programs. They could have added a compatibility layer to allow disabling dark theming for those problematic apps if they care about those, but instead they chose to punish well-written apps that obey Windows colors.
In any case, it depends on the programs one uses; in my case, even at its current state High Contrast Mode works much better than Dark Mode as a dark theme for the programs that I use. Using modern Dark Mode would cause blinding white screens whenever I switch to e.g. Everything search or qBittorrent or many other "legacy" apps that I use (and now add Vivaldi to the programs that work better with it), so I put up with its ugliness. (You can make it less ugly if you want to, using something like GreyEveTheme, but its still not pretty due to Microsoft deliberately limiting theming.)
In short, I was mistaken; about:blank isn't actually controlled by Chromium theme which is controlled by the OS's light or dark theme. But it somehow obeys system colors, so if you modify system colors (which is currently natively only possible using High Contrast Theme) about:blank is dark. So if you don't want to resort to the aforementioned workaround of emptying the start page (which has the disadvantage of not obeying Vivaldi theme, so you need to change between dark and light background color manually whenever you change themes), give High Contrast Mode a try, and hope that Microsoft reintroduces Windows theming one day so we don't have to resort to High Contrast Mode with its ugliness and problems.
-
@debiedowner I decided to have High Contrast Mode a quick look and that's gonna be a no from me haha – I appreciate you found out why your
about:blank
is dark though. Thanks for sharing that information. -
Decided to give this a shot with a CSS mod. I still think the blank start page is a better solution.
You can't change the actual page's background color, but you can cover it up with something else.
webview[src="about:blank"]::after { content: ""; position: absolute; left: 0; width: 100%; height: 100%; background-color: var(--colorBg); }
The pseudo element that is covering the page uses your theme's background color with
var(--colorBg)
, but you can change it to any color you want.Don't think this would solve any white flashing issues, but I haven't done enough testing.
-
@nomadic so far so good on whiteflash being gone, but further testing is definitely required. Thank you for this, even if it doesn't even 100% end up resolving it. It helps immensely already.
Edit: well, outside of websites that insist on loading a plain white background before anything else...but that's on those websites for being
shitbad. -
I went to settings and set "New tab page" to a custom URL, using just
javascript:void(0)
.With that, new tab pages are completely empty and have the background color of the chosen Vivaldi Theme.
(Tried on Ubuntu 21.04 and MacOS 10.14, both in Dark Mode.)
-
Apparently a drawback of the
javascript:
trick is that new tab pages won't open up with the location bar focused anymore, which might be due to some suppressed error.(Using
javascript:null
works the same as above, butjavascript:0
actually attempts a dereference (404:ing of course). It seems real "bookmarklets" here don't actually do anything, nordata:
URIs.)So I went with @nomadic's solution instead, which is much better than nothing (it does require "Allow for using CSS modifications" in
vivaldi://experiments/
). -
@niq I didn’t know about this alternative solution, but I wrote a mod for theming internal pages some time ago. Examples given are for the about page and the blank page
☛ https://forum.vivaldi.net/topic/57420/theme-internal-pages -
@luetage That's interesting! For this case I think the CSS mod is enough, but I'll keep those mods in mind if I need to do more intricate things! Thanks!
(I gather both CSS mods and JS mods are local tweaks that need to be done with care, might break with upgrades, and neither sync between installations.)
-
I agree that about:blank should oblige the Vivaldi theme!
In the meantime, you don't have to use about:blank as a New Tab Page. You can set it to any page. Open Notepad, paste this:
<html> <body style="background-color:#1d1e21"> </body> </html>
And save this file as
blank.html
toC:\Users\%USERNAME%\AppData\Local\Vivaldi\User Data\blank.html
(or any other location).Then simply set your New Tab Page to the above location.
Cheers
-
@dvincent You don’t change the blank page with that, you’re just creating a custom new tab page. Vivaldi has inbuilt CSS customization, so you can directly influence the blank page with code, e.g.:
webview[src="about:blank"]::after { content: ""; position: absolute; left: 0; width: 100%; height: 100%; background-image: linear-gradient( to bottom, transparent 50%, var(--colorBg) 50% ), linear-gradient(to right, var(--colorBgDark) 50%, var(--colorBg) 50%); background-size: 10px 10px, 10px 10px; }
edit: just saw that’s exactly what @nomadic wrote above, don’t know why people here try to reinvent the wheel, we got a native solution to the issue.
-
@luetage Well, as some wrote above, your solution requires toggling a flag and can produce white flashing, since the above code does not really change about:blank either, but just covers it up with an element. I haven't tested this myself, so I can not attest to the issue.
Meanwhile, if all one wants is a consistent dark color on his New Tab Page (as the OP @TsunamiZ and others in this thread do), he might just as well set his NTP to a true dark color of his choise. It's an easy hack, and I have provided an instruction so that anyone can achive the set goal regardless their technical skills.
It's not about reinventing the wheel, it's about finding the easiest and most reliable workaround (-;
-
No harm in providing another option. Always good to be poking around and coming up with new solutions.
@dvincent said in Customize a dark color for the new tab "blank page"...:
Well, as some wrote above, your solution requires toggling a flag and can produce white flashing
It doesn't produce white flashing; it was proposed as a solution to avoid white flashing, but I didn't think that it would fix that.
I also think Vivaldi's issue with white flashes was fixed, so not relevant anymore.
It's not about reinventing the wheel, it's about finding the easiest and most reliable workaround
@luetage and I are saying that we don't see why setting the start page to a blank static color isn't considered the true solution, as it is already natively available.
You can easily get a result just like this:
expand for image
Of course, now there is the settings cog, which didn't used to be there, but it is fairly unobtrusive.
And of course it can be hidden with a CSS modification. They aren't too difficult to add. About as difficult as making and saving an HTML file. Even requires about the same steps, just using
.css
instead..SpeedDialView-Settings-Button { display: none; }
-
@nomadic said in Customize a dark color for the new tab "blank page"...:
It doesn't produce white flashing; it was proposed as a solution to avoid white flashing, but I didn't think that it would fix that.
I also think Vivaldi's issue with white flashes was fixed, so not relevant anymore.Allright, I didn't know that. If there is no white flashing any longer, than your solution is even better, since it will respect the color of the selected theme automatically (-: I will try it out.