Theme internal pages
-
This modification themes the
vivaldi://about/
andabout:blank
pages with native colors. Credits to @gazugafan2, I stole their code to retrieve the color variables. And of course credits to @tam710562 for restoring the chrome.tabs methods — this mod wouldn’t have been possible otherwise.pic1 pic2 // Internal Page Theme // version 2021.9.0 // https://forum.vivaldi.net/topic/57420/theme-internal-pages // Injects CSS into the internal pages vivaldi://about and about:blank, uses // native theme colors. Relies on chrome.tabs restore method // ☛ https://forum.vivaldi.net/topic/57191/restore-methods-for-chrome-tabs (function () { function intpages(id, page) { const bg = document.documentElement.style.getPropertyValue("--colorBg"); const bgdark = document.documentElement.style.getPropertyValue("--colorBgDark"); const fg = document.documentElement.style.getPropertyValue("--colorFg"); const fgintense = document.documentElement.style.getPropertyValue("--colorFgIntense"); const hi = document.documentElement.style.getPropertyValue("--colorHighlightBg"); if (page === "chrome://version/") { var sendit = ` html { background-image: linear-gradient(to bottom, transparent 50%, ${bg} 50%), linear-gradient(to right, ${bgdark} 50%, ${bg} 50%) !important; background-size: 10px 10px, 10px 10px !important; } .label, #company { color: ${fgintense}; font-size: 0.9em !important; } .version, #slogan { color: ${fg} !important; font-size: 0.85em !important; } .version, #useragent { font-family: unset !important; } #copyright { font-size: 0.8em !important; } a { color: ${hi}; } `; } else if (page === "about:blank") { var sendit = ` body { background-image: linear-gradient(to bottom, transparent 50%, ${bg} 50%), linear-gradient(to right, ${bgdark} 50%, ${bg} 50%); background-size: 10px 10px, 10px 10pt; } `; } chrome.tabs.insertCSS(id, { code: sendit }); } chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) { if ( changeInfo.url === "chrome://version/" || changeInfo.title === "About Version" || changeInfo.url === "about:blank" ) { intpages(tabId, changeInfo.url); } }); })();
Change the CSS part of the mod to design the pages to your own liking, the possibilities are endless; and please share the results!
The mod isn’t perfect. An already open page won’t react to theme switches and a reload of a page will restore Vivaldi’s original design. All flaws, but they are minor, since most of us open the about‐page from the menu and close it again. But I’m open to suggestions of course. Other internal pages can be themed the same way, e.g.
vivaldi://gpu
orvivaldi://flags
. I hope you have some fun with this. -
First update, found out that the
about:blank
page can be automatically themed too with this code. White pages be gone. -
@luetage I installed the script and it worked just 1x, then the pages are white again.
Tried it in Vivaldi stable without any luck.
What could be wrong?
Why did it work 1x in snapshot?I copied the code, named it
theme-mod.js
and saved it to/opt/vivaldi-snapshot/resources/vivaldi/
.
I also copied @tam710562's code for restore chrome.tabs and saved it aschrome-mod.js
into the same folder.
I added them to the list in browser.html where 2 other userscripts are already listed. One of them youradvancedPanels.js
that was already working fine withoutchrome-mod.js
. -
@guigirl OK, bc I love you I will try purple instead of darkdarkblue.
EDIT:// Nope. Doesn't work either. What's about your mod?
-
@guigirl said in Theme internal pages:
@Dancer18 If that still fails, it's probably all @hlehyaric's fault.
Agree.
-
-
@hlehyaric You hovered the vivaldi logo in the about page?
@luetage If I presume correctly, this mod could be extended for almost any chrome://** page with internal vars, which is pretty cool and is all bundled in a single js -
@Hadden89 said in Theme internal pages:
You hovered the vivaldi logo in the about page?
Tbh, no. I'm using this page in a panel and I can't see the logo.
Someone publicly confessed to using an extension in V.
It's a homemade extension, written by a community member. It's a complete different thing.
-
@hlehyaric I tried to add this to replicate the
gimmickeffect in the js but I must have forgotten something =3
#logo img:hover {animation:spin 8s linear infinite;}
-
@hlehyaric Fun fact: That extension was born as an experiment to theme only the non material design
vivaldi://extensions
as suggested by an other user -
-
@tam710562 said in Restore Methods for chrome.tabs:
Note: Be sure to launch this code before any other mods.
(me adding: any other mods that need it)
-
@potmeklecbohdan said in Theme internal pages:
@tam710562 said in Restore Methods for chrome.tabs:
Note: Be sure to launch this code before any other mods.
(me adding: any other mods that need it)
In my first try in snapshot I saw it too late. But in stable I launched his code before the new one of @luetage . Although there were 2 other js-scripts.
How fix that? I deleted the user script-entries in
browser.html
, restarted the browser, added the chrome.tabs - script again and later the other scripts.
But that didn't work obviously. -
@Dancer18 I only have a single javascript file and I just put the restore methods at the bottom. It will be read before any functions trigger and that’s good enough. Haven’t tested with a separate file. Maybe try just this mod with the restore methods and check whether it works. Also make sure to open the about page in a new tab. Another way to test is setting the new tab page to blank and and clicking the new tab button in the address bar.
-
@Hadden89 Only about and blank is implemented,
vivaldi://gpu/
is tested and it themes. It should theoretically work on any of the internal pages, but I’m not sure. -
@luetage Ok, done. And the test works! But it only works when I set the start-page and new tab options to either
about:blank
orvivaldi:about
.When I have my speeddial startpage and new tab and type in the 2 URLs, I get white background.
-
@Dancer18 As said, they have to open in a new tab. Press
shift‐
oralt-enter
(depending on your settings) to open an address in a new tab and it will work.And yeah, I just looked at the script again, the restore methods have to be in the same file, it won’t work otherwise. You can use a javascript minifier and simply put the one‐liner on bottom of every file in which one of the methods is in use.
-
@luetage I put all my 4 mod-js into 1
custom.js
. That works.
Why have we to pressalt-enter
to get the dark view? Will you change the code later to get it done withenter
? -
@Dancer18 I haven’t looked at a solution yet, but it would involve adding more listeners. Again: you just have to remember it has to open in a new tab, not in the same tab. I have my bookmarks set to open in a new tab by default. Quick commands bookmarks open in a new tab by default and menu entries will likewise open in a new tab. It just depends on your settings.
shift‐
oralt‐enter
just reverses your setting. Instead of opening in the same tab, it will open in a new tab and vice versa, has nothing to do with this mod, it’s just inbuilt Vivaldi functionality. -
@luetage said in Theme internal pages:
I have my bookmarks set to open in a new tab by default.
Me too. Yes, via bookmarks it's just fine for me.