Random Theme Button
-
This mod adds custom functionality to a command chain button, switching to a random user theme on click. The same theme won't appear twice in a row. To implement follow instructions provided here, then
- Visit
vivaldi://settings/qc
and create a new command chain by clicking on the+
button - Chain Name:
Random Theme
. The default command is a delay of 1000, which does nothing and therefore fits the purpose perfectly - Open the toolbar editor (either right‐click an existing toolbar button and select »customize toolbar«, or type »customize toolbar« in quick commands)
- Inside the toolbar editor popup select »command chains« from the dropdown, find the »random theme« button and drag it to the toolbar of your choice
- Add following code to your custom Javascript file:
// Random Theme Button // version 2022.10.2 // https://forum.vivaldi.net/topic/34767/random-theme-button // Load a random theme when clicking a command chain button. (function randomTheme() { function 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 appendChild = Element.prototype.appendChild; Element.prototype.appendChild = function () { if (this.tagName === "BUTTON") { setTimeout( function () { if ( this.title === "Random Theme" && this.classList.contains("ToolbarButton-Button") ) { this.innerHTML = `<span><svg width="18" height="18" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px"><path d="M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6V160H352c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96h32V64c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H96c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6V416H352c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H96c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8h32V320c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z"/></svg></span>`; this.addEventListener("click", randomize); } }.bind(this, arguments[0]) ); } return appendChild.apply(this, arguments); }; })();
- Enjoy!
Notes
- A random theme will only be selected, when theme schedule in
vivaldi://settings/themes
is set to »no schedule« - Previously this mod added a custom button, nowadays we can add buttons native through command chains, which lets us move the button freely in the UI
- If you change the chain name in Vivaldi settings, you also need to make the same change in the Javascript code
- If you want to use this as keyboard shortcut instead of a button, use @LonM’s Keyboard Machine and add the
randomize
function from this mod
History
- 2019.2.0 Release
- 2022.2.0 Fix mod for new theme engine
- 2022.10.0 Use a command chain button
- 2022.10.2 Update icon, narrow trigger
- Visit
-
The R appears in my extensions, but nothing happens on click. I tried checking extension toggle in settings, nothing changes.
EDIT: Oh right "user" themes, not all the preinstalled ones. I got it. I only have 1 user theme, added one more, they switch each R click. -
@iAN-CooG Eh, good point. I initially implemented a break condition for people who have only one user theme installed, but your comment made me realise this isn't enough, someone could try this mod with zero user themes. Updated OP to take care of these special cases.
-
@luetage Cool
Would be possible to move the R in footer? (To avoid crowding the addressbar ^^,) -
@luetage There is already a shortcut to switch to the next theme (
Settings/Keyboard/View/Next Theme
, assign a shortcut).
BTW, the button R is displayed at the left of my address bar, not at right as in your screenshot (maybe, too much mods in the address bar…). -
@hlehyaric I never knew we had this shortcut… Well, then I'm glad I made it random. The other difference is that it only switches through user themes, I have a feeling few people actually use the premade themes unaltered. And yeah, the mod places the button directly in front of the extensions wrapper. If you set the order of elements in the address bar, then you have to set the order for the new button too. Should be a very easy fix, but as long as you don't do that, elements without any order set will display in front of elements with order.
@Hadden89 Yeah, that's possible, just insert it in the status bar and set the classlist to toolbar-small. You might also need to switch to a different font size and change the starting point for the text insertion a little.
-
@luetage I'll try to fix it myself.
-
@hlehyaric I can only help you provided you share your code. It's impossible to say what goes wrong with any certainty.
-
@luetage Why is the button in
div
? It'd be much easier for @hlehyaric to change the order without thediv
, or not? -
@potmeklecbohdan True, the div isn't needed. The reason is that I'm trying to stay as true as possible to Vivaldi's original coding – the other toolbar buttons are wrapped in a div too. Either removing the div, or moving the
.random
class of the button to the div will make it possible to set the order.e.g:
function randomTheme() { const adr = document.querySelector('.toolbar-addressbar.toolbar'); var div = document.createElement('div'); div.classList.add('random'); div.innerHTML = '<button class="button-toolbar" title="Random theme" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><text x="8.5" y="18" style="font-size: 14px; font-weight: bold;">R</text></svg></button>'; adr.insertBefore(div,document.querySelector('.toolbar-addressbar.toolbar > .extensions-wrapper')); document.querySelector('.random').addEventListener('click', randomize); };
-
@luetage Thanks a lot.
That's the code I'm using to reorder elements in address bar
.addressfield { order: 1; } .toolbar-addressbar.toolbar .toolbar { order: 3; } .searchfield { order: 2; margin-left: 5px; } .toolbar-addressbar.toolbar > .extensions-wrapper { order: 5; }
I tried to put the R button in position 4, between the toolbar and the extension wrapper, but I must admit I don't know what to select:
.random
,.button-toolbar.random
or something else (in fairness, I have no knowledge in CSS). -
@hlehyaric
.toolbar-addressbar.toolbar > div.random
(thediv
isn't needed), but only if you use version with thediv
that has classrandom
.@luetage are you sure about this line?
document.querySelector('.random').addEventListener('click', randomize);
Wouldn't be
button.random
better? -
@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.