Random Theme Button
-
@potmeklecbohdan Many many thanks, it works (I mean: I'm able to make it work )
I gave you one point, I can't give you more, though you (and @luetage) deserve one thousand. Once again, a big thank you for your help and your time and sharing your knowledge. -
@potmeklecbohdan The button has a class of
.random
, for selecting an element that's enough. No point in writing down anything more in this case. -
@luetage So it doesn't add (or try to add) the event also to the
div
?Edit: Sorry, I didn't read it all. So it adds the event only to the
div
, is it correct? -
@hlehyaric said:
@potmeklecbohdan Many many thanks, it works (I mean: I'm able to make it work )
Nice.
I gave you one point, I can't give you more, though you (and @luetage) deserve one thousand. Once again, a big thank you for your help and your time and sharing your knowledge.
Me and luetage, but except me I wouldn't know CSS very good without him, LonM and others I can't remember now.
-
@potmeklecbohdan The div and the button elements have the same size, doesn't matter where the event listener is being added.
-
@luetage OK, thanks for explaining it.
-
Mod updated for latest snapshot and with new icon.
-
Good day. Can I add a change of icons to the mod, that is, I click on one and another appears? For example: I click on the day icon, then night appears and vice versa.
-
@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