Theme internal pages



  • This modification themes the vivaldi://about/ and about: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
    Screenshot from 2021-02-23 16-52-26.png Screenshot from 2021-02-23 16-52-04.png
    // Internal Page Theme
    // 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 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 or vivaldi://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.



  • Aw damnit, now i just gotta do these things too. Curse all you clever peeps!

    Gonna make mine... purple!



  • @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 as chrome-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 your advancedPanels.js that was already working fine without chrome-mod.js.



  • @Dancer18 I bet it's coz you used a boring colour...



  • @guigirl OK, bc I love you I will try purple instead of darkdarkblue. 😉

    EDIT:// Nope. Doesn't work either. What's about your mod?



  • @Dancer18 If that still fails, it's probably all @hlehyaric's fault.



  • @guigirl said in Theme internal pages:

    @Dancer18 If that still fails, it's probably all @hlehyaric's fault.

    Agree.



  • @guigirl It can't, naughty girl! Btw,I haven't tried this mod (I'm using an extension written by @Hadden89 to theme internal pages).



  • @hlehyaric said in Theme internal pages:

    using an extension

    Eeeeeek! Someone publicly confessed to using an extension in V. Quick - urgent - somebody call the V Police!



  • @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.

    @guigirl

    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 gimmick effect in the js but I must have forgotten something =3
    #logo img:hover {animation:spin 8s linear infinite;}



  • @hlehyaric Stockholm Syndromer.



  • @Hadden89 Fixed your error.

    #logo img:hover {animation:spin 8s linear infinite-improbability-drive;}



  • @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 😃



  • I appended the script text [verbatim] to the bottom of my /opt/vivaldi-snapshot/resources/vivaldi/custom.js and /opt/vivaldi/resources/vivaldi/custom.js, which already contain the successful https://forum.vivaldi.net/topic/26623/zoom-find-in-page-other-actions-in-web-panels?page=1 and https://forum.vivaldi.net/topic/33047/autosave-sessions-mod?page=1.

    This additional mod does not work in either of my V's ... ergo, i've obviously not done the doings correctly. I presume it needs its own dedicated JS file & separate entry in browser.html ... but if so, then why?



  • @guigirl Are you talking about @luetage's script?
    As I wrote above it doesn't work here.



  • @Dancer18 @guigirl

    @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.


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.