Random Theme Button
-
@luetage I just discovered that you updated this mod, thanks for this.
How to move this random theme button down to this status bar as shown in my screenshot? -
This mod combines both buttons, how to customize this mod to work with Random Theme Button version 2022.2.0 fix mod for new theme engine?
(function () { // ============================================================================================================ // Hibernate Background Tabs Status Bar Button Mod and Random Theme Button by luetage // - made by nomadic on the Vivaldi Forums // ============================================================================================================ function combinedStatusBarButtons() { // Config ------------ // 0 is farthest left on the status bar's right grouping of buttons // keep adding 1 to the variable to move it over to the left. const HIBERNATE_BTN_POSITION = -1; const RANDOMTHEME_BTN_POSITION = -2; // ------------------- // if they are equal, defaults to random theme button first const RANDOMTHEME_BTN_IS_ADDED_FIRST = RANDOMTHEME_BTN_POSITION > HIBERNATE_BTN_POSITION ? false : true; // ################################ START Hibernate Button Functions ################################ function hibernateBackgroundTabs() { vivaldi.windowPrivate.getCurrentId((currentWindowId) => { chrome.tabs.query({ windowType: "normal" }, (tabs) => { tabs.forEach((tab) => { if (tab.windowId === currentWindowId && tab.active) return; chrome.tabs.discard(tab.id); }); }); }); } // shamelessly modified from @luetage's "Random Theme Button Mod" because I am lazy function addHibernateButton(callback) { let div = document.createElement("div"); div.classList.add("button-toolbar", "hibernate"); div.innerHTML = '<button draggable="true" tabindex="-1" title="Hibernate Background Tabs" type="button"><span><svg width="12" height="13" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><path d="M24.46.65c.1 0 .2.1.18.22l-.04.08-.06.2-.3.74-1.51 3.77-.34.85-.1.28-.04.06v.05h.16l.32-.05 2.17-.36c.15 0 .27-.04.35-.06h.26l.06.14c.11.55.2 1.12.27 1.7l-.02.02a1.36 1.36 0 01-.4.13l-3.48.6-3.6.59-.23.04h-.08a.24.24 0 01-.14-.06.16.16 0 01-.02-.08v-.16l.28-.71L19.4 5.5l.6-1.46.19-.45.04-.12v-.06h-.02V3.4h-.12c-.79.12-1.58.24-2.39.4l-.33.06h-.26l-.08-.12c-.1-.46-.2-.9-.25-1.36l-.04-.2v-.08l.02-.06a.4.4 0 01.06-.06l.15-.06.54-.11 3.11-.54 2.69-.43.83-.14.23-.04zm-7.61 4.06c.12-.01.21.06.25.2V5l-.04.22c0 .2-.06.5-.11.9l-.64 4.5-.15.99-.04.32v.11h.02v.04h.06l.07-.06.36-.13 1.1-.48 1.15-.5.37-.15.1-.04h.16c.04 0 .06.04.12.1.27.6.51 1.16.75 1.76 0 0 0 .04-.04.06a1.52 1.52 0 01-.4.23l-6.43 2.8-.88.38c-.1.04-.2.06-.24.1l-.08.02h-.02c-.06.02-.14 0-.16-.04a.16.16 0 01-.06-.08l.61-4.74c.1-.67.2-1.28.24-1.73l.08-.52.02-.13v-.1l-.02.04v-.04h-.02l-.02.02c-.02 0-.06 0-.1.04l-.31.14-2.17.9-.34.16-.12.04h-.16c-.03 0-.07-.04-.11-.1l-.4-.79-.33-.8-.02-.07v-.1l.06-.07.13-.1.56-.28a211.5 211.5 0 016.86-2.96l.26-.08.06-.04h.02zm-.71 7.32l-.02.02h.02zm-5.35 0c.14 0 .26.14.26.32l-.02.12-.08.25-2.57 8.15v.1l-.02.02v.04h.08l.14-.02.45-.12 3.63-.87h.2c.04.04.08.08.12.18l.6 2.25-.03.08-.06.06a1.93 1.93 0 01-.55.23c-.65.2-2.01.54-4.8 1.23l-4.92 1.2-.34.08H2.8l-.04.02a.34.34 0 01-.2-.08.2.2 0 01-.05-.12v-.24l.31-1.02 2.1-6.6.19-.66.06-.18v-.1H5.1l-.12.04-.43.1-1.42.36-1.44.35-.48.1-.13.02H.85l-.12-.16c-.2-.63-.35-1.24-.51-1.87 0-.12-.04-.2-.06-.28v-.2a.55.55 0 01.1-.1l.2-.1.74-.19a295.7 295.7 0 018-2.01l1.14-.28.31-.06.1-.02h.02z"/></svg><span></button>'; // positon the button based on the config let elBefore = document.querySelector(".StatusInfo"); for (let i = 0; i < HIBERNATE_BTN_POSITION; i++) { } document.querySelector(".toolbar-statusbar").insertBefore(div, elBefore); document.querySelector(".hibernate button svg").style = "width: 14px; height: 14px;"; document.querySelector(".hibernate").addEventListener("click", hibernateBackgroundTabs); callback(); } // ################################ END Hibernate Button Functions ################################ // ################################ START Random Theme Button Functions ################################ function randomizeTheme() { chrome.storage.local.get( { THEMES_USER: "", THEME_CURRENT: "", }, function (rd) { var userThemes = rd.THEMES_USER; var currentTheme = rd.THEME_CURRENT; if (userThemes.length > 1) { while (random === undefined || random.name === currentTheme) { var random = userThemes[Math.floor(Math.random() * userThemes.length)]; } chrome.storage.local.set({ THEME_CURRENT: random.name, BROWSER_COLOR_ACCENT_BG: random.colors.accentBg, BROWSER_COLOR_BG: random.colors.baseBg, BROWSER_COLOR_FG: random.colors.baseFg, BROWSER_COLOR_HIGHLIGHT_BG: random.colors.highlightBg, TABCOLOR_BEHIND_TABS: random.settings.accentOnWindow, USE_TABCOLOR: random.settings.accentFromPage, BORDER_RADIUS: random.settings.borderRadius, USE_TAB_TRANSPARENT_TABS: random.settings.tabsTransparent, }); } else { console.log("Please create additional themes in vivaldi://settings/themes."); } } ); } function addRandomThemeButton(callback) { let div = document.createElement("div"); div.classList.add("button-toolbar", "random"); div.innerHTML = '<button draggable="true" tabindex="-1" title="Random theme" type="button"><span><svg width="12" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M666 481q-60 92-137 273-22-45-37-72.5t-40.5-63.5-51-56.5-63-35-81.5-14.5h-224q-14 0-23-9t-9-23v-192q0-14 9-23t23-9h224q250 0 410 225zm1126 799q0 14-9 23l-320 320q-9 9-23 9-13 0-22.5-9.5t-9.5-22.5v-192q-32 0-85 .5t-81 1-73-1-71-5-64-10.5-63-18.5-58-28.5-59-40-55-53.5-56-69.5q59-93 136-273 22 45 37 72.5t40.5 63.5 51 56.5 63 35 81.5 14.5h256v-192q0-14 9-23t23-9q12 0 24 10l319 319q9 9 9 23zm0-896q0 14-9 23l-320 320q-9 9-23 9-13 0-22.5-9.5t-9.5-22.5v-192h-256q-48 0-87 15t-69 45-51 61.5-45 77.5q-32 62-78 171-29 66-49.5 111t-54 105-64 100-74 83-90 68.5-106.5 42-128 16.5h-224q-14 0-23-9t-9-23v-192q0-14 9-23t23-9h224q48 0 87-15t69-45 51-61.5 45-77.5q32-62 78-171 29-66 49.5-111t54-105 64-100 74-83 90-68.5 106.5-42 128-16.5h256v-192q0-14 9-23t23-9q12 0 24 10l319 319q9 9 9 23z"/></svg><span></button>'; // positon the button based on the config let elBefore = document.querySelector(".StatusInfo"); for (let i = 0; i < RANDOMTHEME_BTN_POSITION; i++) { } document.querySelector(".toolbar-statusbar").insertBefore(div, elBefore); document.querySelector(".random button svg").style = "width: 14px; height: 14px;"; document.querySelector(".random").addEventListener("click", randomizeTheme); callback(); } // ################################ END Random Theme Button Functions ################################ // Re-add the buttons after exiting fullscreen let browser = document.getElementById("browser"); let oldState = browser.classList.contains("fullscreen") || browser.classList.contains("minimal-ui"); let browserObserver = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { if (mutation.attributeName == "class") { let isFullscreen = mutation.target.classList.contains("fullscreen") || mutation.target.classList.contains("minimal-ui"); if (oldState !== isFullscreen) { oldState = isFullscreen; if (!isFullscreen) { if (RANDOMTHEME_BTN_IS_ADDED_FIRST) addRandomThemeButton(addHibernateButton); else addHibernateButton(addRandomThemeButton); } } } }); }); browserObserver.observe(browser, { attributes: true }); // initially add the buttons depending on orders given if (RANDOMTHEME_BTN_IS_ADDED_FIRST) addRandomThemeButton(addHibernateButton); else addHibernateButton(addRandomThemeButton); } let intervalID = setInterval(() => { const browser = document.getElementById("browser"); if (browser) { clearInterval(intervalID); combinedStatusBarButtons(); } }, 300); })(); /* ========================================================================================================================================================================================================================================================================== */
-
@stardepp Just needed to change the
randomizeTheme()
function.I also cleaned up some stuff and allowed it to survive status bar toggling.
New JS
(function () { // ============================================================================================================ // Hibernate Background Tabs Status Bar Button Mod and Random Theme Button by luetage // - made by nomadic on the Vivaldi Forums // ============================================================================================================ function combinedStatusBarButtons() { // Config ------------ // Lower number will be displayed first const HIBERNATE_BTN_POSITION = 2; const RANDOMTHEME_BTN_POSITION = 1; // ------------------- // if they are equal, defaults to random theme button first const RANDOMTHEME_BTN_IS_ADDED_FIRST = RANDOMTHEME_BTN_POSITION > HIBERNATE_BTN_POSITION ? false : true; // ################################ START Hibernate Button Functions ################################ function hibernateBackgroundTabs() { vivaldi.windowPrivate.getCurrentId((currentWindowId) => { chrome.tabs.query({ windowType: "normal" }, (tabs) => { tabs.forEach((tab) => { if (tab.windowId === currentWindowId && tab.active) return; chrome.tabs.discard(tab.id); }); }); }); } // shamelessly modified from @luetage's "Random Theme Button Mod" because I am lazy function addHibernateButton(callback) { const elBefore = document.querySelector(".StatusInfo"); if (!elBefore) return; const div = document.createElement("div"); div.classList.add("button-toolbar", "hibernate"); div.innerHTML = ` <button draggable="true" tabindex="-1" title="Hibernate Background Tabs" type="button"> <span> <svg width="12" height="13" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"> <path d="M24.46.65c.1 0 .2.1.18.22l-.04.08-.06.2-.3.74-1.51 3.77-.34.85-.1.28-.04.06v.05h.16l.32-.05 2.17-.36c.15 0 .27-.04.35-.06h.26l.06.14c.11.55.2 1.12.27 1.7l-.02.02a1.36 1.36 0 01-.4.13l-3.48.6-3.6.59-.23.04h-.08a.24.24 0 01-.14-.06.16.16 0 01-.02-.08v-.16l.28-.71L19.4 5.5l.6-1.46.19-.45.04-.12v-.06h-.02V3.4h-.12c-.79.12-1.58.24-2.39.4l-.33.06h-.26l-.08-.12c-.1-.46-.2-.9-.25-1.36l-.04-.2v-.08l.02-.06a.4.4 0 01.06-.06l.15-.06.54-.11 3.11-.54 2.69-.43.83-.14.23-.04zm-7.61 4.06c.12-.01.21.06.25.2V5l-.04.22c0 .2-.06.5-.11.9l-.64 4.5-.15.99-.04.32v.11h.02v.04h.06l.07-.06.36-.13 1.1-.48 1.15-.5.37-.15.1-.04h.16c.04 0 .06.04.12.1.27.6.51 1.16.75 1.76 0 0 0 .04-.04.06a1.52 1.52 0 01-.4.23l-6.43 2.8-.88.38c-.1.04-.2.06-.24.1l-.08.02h-.02c-.06.02-.14 0-.16-.04a.16.16 0 01-.06-.08l.61-4.74c.1-.67.2-1.28.24-1.73l.08-.52.02-.13v-.1l-.02.04v-.04h-.02l-.02.02c-.02 0-.06 0-.1.04l-.31.14-2.17.9-.34.16-.12.04h-.16c-.03 0-.07-.04-.11-.1l-.4-.79-.33-.8-.02-.07v-.1l.06-.07.13-.1.56-.28a211.5 211.5 0 016.86-2.96l.26-.08.06-.04h.02zm-.71 7.32l-.02.02h.02zm-5.35 0c.14 0 .26.14.26.32l-.02.12-.08.25-2.57 8.15v.1l-.02.02v.04h.08l.14-.02.45-.12 3.63-.87h.2c.04.04.08.08.12.18l.6 2.25-.03.08-.06.06a1.93 1.93 0 01-.55.23c-.65.2-2.01.54-4.8 1.23l-4.92 1.2-.34.08H2.8l-.04.02a.34.34 0 01-.2-.08.2.2 0 01-.05-.12v-.24l.31-1.02 2.1-6.6.19-.66.06-.18v-.1H5.1l-.12.04-.43.1-1.42.36-1.44.35-.48.1-.13.02H.85l-.12-.16c-.2-.63-.35-1.24-.51-1.87 0-.12-.04-.2-.06-.28v-.2a.55.55 0 01.1-.1l.2-.1.74-.19a295.7 295.7 0 018-2.01l1.14-.28.31-.06.1-.02h.02z"/> </svg> <span> </button> `; // positon the button based on the config document.querySelector(".toolbar-statusbar").insertBefore(div, elBefore); document.querySelector(".hibernate button svg").style = "width: 14px; height: 14px;"; document.querySelector(".hibernate").addEventListener("click", hibernateBackgroundTabs); if (typeof callback === "function") callback(); } // ################################ END Hibernate Button Functions ################################ // ################################ START Random Theme Button Functions ################################ function randomizeTheme() { vivaldi.prefs.get("vivaldi.themes.current", (current) => { vivaldi.prefs.get("vivaldi.themes.user", (collection) => { if (collection.length > 1) { let rd = ""; while (rd === "" || rd.id === current) { rd = collection[Math.floor(Math.random() * collection.length)]; } vivaldi.prefs.set({ path: "vivaldi.themes.current", value: rd.id }); } else { console.log("Please create additional themes in vivaldi://settings/themes"); } }); }); } function addRandomThemeButton(callback) { const elBefore = document.querySelector(".StatusInfo"); if (!elBefore) return; const div = document.createElement("div"); div.classList.add("button-toolbar", "random"); div.innerHTML = ` <button draggable="true" tabindex="-1" title="Random theme" type="button"> <span> <svg width="12" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"> <path d="M666 481q-60 92-137 273-22-45-37-72.5t-40.5-63.5-51-56.5-63-35-81.5-14.5h-224q-14 0-23-9t-9-23v-192q0-14 9-23t23-9h224q250 0 410 225zm1126 799q0 14-9 23l-320 320q-9 9-23 9-13 0-22.5-9.5t-9.5-22.5v-192q-32 0-85 .5t-81 1-73-1-71-5-64-10.5-63-18.5-58-28.5-59-40-55-53.5-56-69.5q59-93 136-273 22 45 37 72.5t40.5 63.5 51 56.5 63 35 81.5 14.5h256v-192q0-14 9-23t23-9q12 0 24 10l319 319q9 9 9 23zm0-896q0 14-9 23l-320 320q-9 9-23 9-13 0-22.5-9.5t-9.5-22.5v-192h-256q-48 0-87 15t-69 45-51 61.5-45 77.5q-32 62-78 171-29 66-49.5 111t-54 105-64 100-74 83-90 68.5-106.5 42-128 16.5h-224q-14 0-23-9t-9-23v-192q0-14 9-23t23-9h224q48 0 87-15t69-45 51-61.5 45-77.5q32-62 78-171 29-66 49.5-111t54-105 64-100 74-83 90-68.5 106.5-42 128-16.5h256v-192q0-14 9-23t23-9q12 0 24 10l319 319q9 9 9 23z"/> </svg> <span> </button> `; // positon the button based on the config document.querySelector(".toolbar-statusbar").insertBefore(div, elBefore); document.querySelector(".random button svg").style = "width: 14px; height: 14px;"; document.querySelector(".random").addEventListener("click", randomizeTheme); if (typeof callback === "function") callback(); } // ################################ END Random Theme Button Functions ################################ // Re-add the buttons after exiting fullscreen const browser = document.getElementById("browser"); let oldState = browser.classList.contains("fullscreen") || browser.classList.contains("minimal-ui"); const browserObserver = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { if (mutation.attributeName == "class") { const isFullscreen = mutation.target.classList.contains("fullscreen") || mutation.target.classList.contains("minimal-ui"); if (oldState !== isFullscreen) { oldState = isFullscreen; if (!isFullscreen) { if (RANDOMTHEME_BTN_IS_ADDED_FIRST) addRandomThemeButton(addHibernateButton); else addHibernateButton(addRandomThemeButton); } } } }); }); browserObserver.observe(browser, { attributes: true }); // Re-add the buttons after toggling the status bar visibility const footer = document.querySelector("footer"); const footerObserver = new MutationObserver(function (mutations) { for (const { addedNodes } of mutations) { for (const node of addedNodes) { if (node.classList.contains("toolbar-statusbar")) { if (RANDOMTHEME_BTN_IS_ADDED_FIRST) addRandomThemeButton(addHibernateButton); else addHibernateButton(addRandomThemeButton); } } } }); footerObserver.observe(footer, { childList: true }); // initially add the buttons depending on orders given if (RANDOMTHEME_BTN_IS_ADDED_FIRST) addRandomThemeButton(addHibernateButton); else addHibernateButton(addRandomThemeButton); } const intervalID = setInterval(() => { const browser = document.getElementById("browser"); if (browser) { clearInterval(intervalID); combinedStatusBarButtons(); } }, 300); })();
-
@nomadic Works very well, thanks again, I'm excited how you always manage to fix broken mods.
-
Just installed this, and I love it!
One very minor quibble: I can't get the button to move from the end of the URL bar. Personally, I prefer to have my all my buttons centered between the address and search boxes.
-
@fred8615 The buttons we inject arenโt native, therefore they cannot be moved like normal buttons. You have to define the placement with Javascript. In the case of this mod the button is placed after the address field, and if it exists, after the search field. If you remove the search field definition from the mod and clean the ยปifยซ statement, the button should display between address and search field.
-
@luetage I wouldn't have the first clue about how to "clean up" the "if" statement, so I'll just live with it.
-
(function () { let randomize = () => { vivaldi.prefs.get("vivaldi.themes.current", (current) => { vivaldi.prefs.get("vivaldi.themes.user", (collection) => { if (collection.length > 1) { let rd = ""; while (rd === "" || rd.id === current) { rd = collection[Math.floor(Math.random() * collection.length)]; } vivaldi.prefs.set({ path: "vivaldi.themes.current", value: rd.id }); } else { console.log( "Please create additional themes in vivaldi://settings/themes" ); } }); }); }; let randomTheme = (adr) => { const check = document.querySelector(".vm-random"); if (!check) { const div = document.createElement("div"); div.innerHTML = '<button class="ToolbarButton-Button" title="Random theme" tabindex="0"><svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="m 14.936132,10.137092 c -0.53285,-0.53249 -1.41225,-0.15587 -1.41225,0.59766 v 1.69152 h -1.69047 L 5.4096224,3.8612218 c -0.21131,-0.28174 -0.54588,-0.45079 -0.90158,-0.45079 h -3.38094 c -0.62301007,0 -1.12698005752,0.50362 -1.12698005752,1.12698 0,0.62336 0.50396998752,1.12698 1.12698005752,1.12698 h 2.81745 l 6.4237896,8.5650502 c 0.2113,0.28527 0.54588,0.45079 0.90158,0.45079 h 2.2529 v 1.68836 c 0,0.75332 0.91075,1.13121 1.4436,0.59871 l 2.78575,-2.81675 c 0.33059,-0.33059 0.33059,-0.86601 0,-1.19636 z m -3.10272,-4.4727002 h 1.68941 v 1.69153 c 0,0.7533102 0.9111,1.1301502 1.41225,0.59765 l 2.78576,-2.81675 c 0.33059,-0.33073 0.33052,-0.86601 -5e-5,-1.19636 l -2.78575,-2.81674 c -0.53285,-0.53249996 -1.4436,-0.15464996 -1.4436,0.5987 v 1.68801 h -2.22151 c -0.35429,0 -0.68887,0.16729 -0.90123,0.45114 l -1.4231696,1.89791 1.3770296,1.87713 z M 3.9445524,12.426272 h -2.81745 c -0.62301007,0 -1.12698005752,0.50397 -1.12698005752,1.12698 0,0.62301 0.50396998752,1.12698 1.12698005752,1.12698 h 3.38094 c 0.35429,0 0.68886,-0.16728 0.90123,-0.45114 l 1.42281,-1.8972 -1.40837,-1.87783 z"/></svg></button>'; div.classList.add("button-toolbar", "vm-random"); adr.parentNode.insertBefore(div, adr.nextSibling); document.querySelector(".vm-random button svg").style = "width: 18px; height: 18px;"; document.querySelector(".vm-random").addEventListener("click", randomize); } }; let appendChild = Element.prototype.appendChild; Element.prototype.appendChild = function () { if (arguments[0].tagName === "DIV") { setTimeout( function () { if (this.classList.contains("UrlBar-AddressField")) { randomTheme(this); } }.bind(this, arguments[0]) ); } return appendChild.apply(this, arguments); }; })();
-
@fred8615 By the way, I forgot about somethingโฆ I made this mod before the introduction of the custom toolbars and buttons. These days you can simply create a command chain, use the default command (delay 1000) and give it a name (e.g. Random Theme). In the custom toolbar popup select command chains and place the button between address bar and search field. In your custom CSS you can change the buttonโs SVG icon to the icon we use in this mod and then the even listener can be adjusted to trigger when this button is being clicked. This way we get a native button, which can be moved around freely with a custom action.
-
@luetage Two things:
1: I'm afraid I need you to go into a lot more detail on how to do that. Total newbie when it comes to modding Vivaldi. Or at least point me in the proper directions.
2: I've discovered another minor problem. I prefer to have my Vivaldi UI at 70% to have more screen space. My extensions were shrunk with it, but after installing this mod, they won't display correctly unless I use 100% UI size. Would this fix that too, if I can figure it out? It's certainly not a deal breaker, but it would be nice.
-
@fred8615 Iโve switched this mod over to use a command chain button. See original post for new code and instructions. Let me know whether it works.
-
@luetage Works perfectly! Solved both of my issues.
Thank you so much.
-
@luetage Thanks for updating this mod, works very reliably. And the big advantage is that you can pin the Random Theme button anywhere.