Customize a dark color for the new tab "blank page"...
-
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.
-
@nomadic said in Customize a dark color for the new tab "blank page"...:
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.
A God among men! The start page sucks it lags bad AF I'll be spamming ctrl+T and nothing happens and then suddenly I get 5 start pages at once. Blank page doesn't do that but then I kept flashbanging myself with the white screen
-
if you want this feature added, be sure to upvote the first post here...
https://forum.vivaldi.net/topic/29218/customize-a-dark-color-for-the-new-tab-blank-page -
@BUMBEEN
@SUGARAT
@DVINCENT
@ANDREJSKUIDINS
@DOCTORG
@BORODA74
@JUANVASE
@PHILIA77
@BANGIRAS
@YASHPALGOYAL1304
@M4RTIN195
@LEGOBUILDER26
@AQM
@HADDEN89
@XNAAS
@VERYSIMPLENICK
@PATHDUCK
@MORGANWK
@DEBIEDOWNER
@LIBCUB
@CATWEAZLEthanks for upvoting. you might also want to upvote this related request...
https://forum.vivaldi.net/topic/88239/start-page-s-show-add-button-feature-show-the-small-one-but-hide-the-big-one -
@TsunamiZ Please do not notify-spam other users like you do here - it is rude and arrogant.
-
@dvincent another way would be writing that HTML directly in the address like
data:text/html;base64,PGh0bWw+PGhlYWQ+PHN0eWxlPmJvZHl7YmFja2dyb3VuZC1jb2xvcjojMWQxZTIxO308L3N0eWxlPjwvaGVhZD48Ym9keT48L2JvZHk+PC9odG1sPgo=