Random Theme Button
-
@pajav50234 Yeah, you could make a night/day switch instead of randomizing themes. But wouldn’t it be better to use scheduled theming for this purpose instead? Switches automatically as often as you want at any time of day to any theme you choose.
-
@luetage I've already thought about it. Automation is convenient, of course, but the weather at home is constantly changing and I have to adapt to it. Sometimes I need a light theme and sometimes a dark one) Your mod is perfect for this, only now I was wondering how to change the icon when I click on it. But I am missing the JS skill. I think so)
-
@pajav50234 I understand, nothing wrong with having a manual way with click support and visual indication. But currently you could only have a maximum of 2 user themes saved in Vivaldi for this to work, one light and one dark to switch between them. If that’s enough for you, I just implement a night/day icon and that shall be it.
-
@luetage Sure. That would be cool. This is what I'm talking about. :smiling_face_with_open_mouth:
-
Following code should work out fine. You can save as many themes as you want, but for the toggle to work there has to be one theme called
NIGHT
and one theme calledDAY
. The button will switch between them, but won’t change icon when you change the themes by any other means. This could obviously be improved to work in all circumstances, but would need more effort too./* Day‐Night Switch */ function changeTheme() { chrome.storage.local.get({ 'THEMES_USER': '', 'THEME_CURRENT': '' }, function(go) { var userThemes = go.THEMES_USER; var currentTheme = go.THEME_CURRENT; if (userThemes.length > 1) { if (currentTheme === 'NIGHT') { var index = userThemes.findIndex(x => x.name === 'DAY'); } else { var index = userThemes.findIndex(x => x.name === 'NIGHT'); } chrome.storage.local.set({ 'THEME_CURRENT': userThemes[index].name, 'BROWSER_COLOR_ACCENT_BG': userThemes[index].colors.accentBg, 'BROWSER_COLOR_BG': userThemes[index].colors.baseBg, 'BROWSER_COLOR_FG': userThemes[index].colors.baseFg, 'BROWSER_COLOR_HIGHLIGHT_BG': userThemes[index].colors.highlightBg, 'userThemes[index]': userThemes[index].settings.accentOnWindow, 'USE_TABCOLOR': userThemes[index].settings.accentFromPage, 'BORDER_RADIUS': userThemes[index].settings.borderRadius, 'USE_TAB_TRANSPARENT_TABS': userThemes[index].settings.tabsTransparent }); console.log('thats not good not good'); daynight(); } else { console.log('Please create additional themes in vivaldi://settings/themes.'); } }); }; function daynight() { chrome.storage.local.get({ 'THEME_CURRENT': '' }, function(setup) { var currentTheme = setup.THEME_CURRENT; if (!document.querySelector('.daynight')) { var div = document.createElement('div'); div.classList.add('button-toolbar', 'daynight'); document.querySelector('.toolbar-addressbar').insertBefore(div,document.querySelector('.toolbar-extensions')); document.querySelector('.daynight').addEventListener('click', changeTheme); } var changeDiv = document.querySelector('.daynight'); if (currentTheme === 'NIGHT') { changeDiv.innerHTML = '<button class="" title="Switch to Day theme" tabindex="0"><svg width="12" height="12" viewBox="0 0 550 550" xmlns="http://www.w3.org/2000/svg"><path d="M279.135 512c78.756 0 150.982-35.804 198.844-94.775 28.27-34.831-2.558-85.722-46.249-77.401-82.348 15.683-158.272-47.268-158.272-130.792 0-48.424 26.06-92.292 67.434-115.836 38.745-22.05 28.999-80.788-15.022-88.919A257.936 257.936 0 0 0 279.135 0c-141.36 0-256 114.575-256 256 0 141.36 114.576 256 256 256zm0-464c12.985 0 25.689 1.201 38.016 3.478-54.76 31.163-91.693 90.042-91.693 157.554 0 113.848 103.641 199.2 215.252 177.944C402.574 433.964 344.366 464 279.135 464c-114.875 0-208-93.125-208-208s93.125-208 208-208z"/></svg></button>'; } else { changeDiv.innerHTML = '<button class="" title="Switch to Night theme" tabindex="0"><svg width="12" height="12" viewBox="0 0 550 550" xmlns="http://www.w3.org/2000/svg"><path d="M494.2 221.9l-59.8-40.5 13.7-71c2.6-13.2-1.6-26.8-11.1-36.4-9.6-9.5-23.2-13.7-36.2-11.1l-70.9 13.7-40.4-59.9c-15.1-22.3-51.9-22.3-67 0l-40.4 59.9-70.8-13.7C98 60.4 84.5 64.5 75 74.1c-9.5 9.6-13.7 23.1-11.1 36.3l13.7 71-59.8 40.5C6.6 229.5 0 242 0 255.5s6.7 26 17.8 33.5l59.8 40.5-13.7 71c-2.6 13.2 1.6 26.8 11.1 36.3 9.5 9.5 22.9 13.7 36.3 11.1l70.8-13.7 40.4 59.9C230 505.3 242.6 512 256 512s26-6.7 33.5-17.8l40.4-59.9 70.9 13.7c13.4 2.7 26.8-1.6 36.3-11.1 9.5-9.5 13.6-23.1 11.1-36.3l-13.7-71 59.8-40.5c11.1-7.5 17.8-20.1 17.8-33.5-.1-13.6-6.7-26.1-17.9-33.7zm-112.9 85.6l17.6 91.2-91-17.6L256 458l-51.9-77-90.9 17.6 17.6-91.2-76.8-52 76.8-52-17.6-91.2 91 17.6L256 53l51.9 76.9 91-17.6-17.6 91.1 76.8 52-76.8 52.1zM256 152c-57.3 0-104 46.7-104 104s46.7 104 104 104 104-46.7 104-104-46.7-104-104-104zm0 160c-30.9 0-56-25.1-56-56s25.1-56 56-56 56 25.1 56 56-25.1 56-56 56z"/></svg></button>'; } document.querySelector('.daynight button svg').style = 'width: 14px; height: 14px;'; }) }; setTimeout(function wait() { const browser = document.getElementById('browser'); if (browser) { daynight(); } else { setTimeout(wait, 300); } }, 300)
-
@luetage Thank you so much! It is wonderful. Simple and convenient)
-
@luetage Thanks buddy, it works like a charm
-
@luetage Since the Vivaldi team modernized the theme settings, the "Random Theme" modification no longer works.
Friendly question: Could you fix this modification?
Here is the code:
(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 Themes aren’t saved to local storage anymore. I’m gonna take a look at it.
-
@luetage Took a quick look and looks like the prefs
vivaldi.themes.user
andvivaldi.themes.system
hold them and it might be able to be set withvivaldi.themes.current
. -
-
@luetage Haha, yep, shouldn't have tried to point out the obvious to the themes master
-
New version available in OP. Had to rewrite the thing, too much has changed over the last 3 years.
-
@luetage It isn't working on my end with 5.1.2567.49 on Windows 10.
Looks like
vivaldi.themes.current
is one of those prefs that can only be used forget
and notset
.Does it work for you?
-
@nomadic Works for me, have you tried it on snapshot?
-
@luetage Just tried with 5.2.2581.4 and still not working. Maybe it is specific to Windows? Might try in a Linux VM later.
Also ran the relevant commands through the console and the theme still didn't change. The current value is being set to the id of the new theme, but not even restarting the browser invokes a change in appearance to the new theme.
Console test
-
@nomadic Hmm, no idea. In the old version I had to set each color manually because the change didn’t work on its own. Don’t think the separate colors are even in the preferences file nowadays.
-
I have two profiles, home and work. I found a custom.js file to change themes on click, and also modded it to change the theme every hour. This works fine on the home profile. I can click the button or wait an hour, and the theme will change. However, in the work profile, the button shows up, but nothing happens. Tried debugging, and everything seems to be happening fine, it's just the theme doesn't update.
I thought it might be only calling the home user, but it doesn't change the theme on the home profile either, just nothing happens. Any insights would be much appreciated, thanks!
The entire script is below. I have a fee
// Random Theme Button // version 2022.2.0 // https://forum.vivaldi.net/topic/34767/random-theme-button // Adds a button to the UrlBar, which will load a random user created theme on click. (function () { let randomize = () => { console.log("Importing themes..."); vivaldi.prefs.get("vivaldi.themes.current", (current) => { vivaldi.prefs.get("vivaldi.themes.user", (collection) => { console.log({collection}) if (collection.length > 1) { let rd = ""; while (rd === "" || rd.id === current) { rd = collection[Math.floor(Math.random() * collection.length)]; } console.log(rd.id) console.log(current) try { vivaldi.prefs.set({ path: "vivaldi.themes.current", value: rd.id }); } catch(err){ console.log(err) } } else { console.log( "Please create additional themes in vivaldi://settings/themes" ); } }); }); }; setInterval(randomize, 3600000); let randomTheme = (adr) => { const check = document.querySelector(".vm-random"); if (!check) { const src = document.querySelector(".UrlBar-SearchField"); 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"); let target = ""; if (src) target = src; else target = adr; target.parentNode.insertBefore(div, target.nextSibling); document.querySelector(".vm-random button svg").style = "width: 18px; height: 18px;"; document.querySelector(".vm-random").addEventListener("click", randomize); } }; var 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); }; })();
-
@oranges Please post problems with the mod in the according topic. The link to the topic is in the code. You added a single line with an interval which triggers the function and seemingly messed up formatting and mixed tabs and spaces for good measure. Please make sure to use a proper text editor.
The call should probably be made from within the appendchild function, but it does work nevertheless. Either way, even without the interval the mod fails on a different profile without error. Not sure what’s going wrong, I might have a look at it.
-
love this!