@supra107 Good idea!
I did some work on a mod awhile ago that used a note from vivaldi://notes/ as a settings page for the mod, but it required JS and this API: https://lonmcgregor.github.io/VivaldiModdersAPI/OfficialApi/notes.html
If you wanted an easier method of toggling than editing the toolbar, you could co-opt the Search Field. Assuming you don't use it for search that is...
When you select a search engine from the dropdown, this placeholder attribute is updated to reflect your choice:
Image of devTools showing the placeholder attribute in the search field element
So with some fancy selectors, you can use that to toggle various CSS rules. Here is an example that changes a theme color:
Just set up empty search engines to match the different settings you want.
Togglable-CSS-demo.gif
The CSS:
/* Togglable CSS options */
#browser:has(.UrlBar-SearchField > input[placeholder$="Red"]) {
--colorAccentBg: red !important;
}
#browser:has(.UrlBar-SearchField > input[placeholder$="Green"]) {
--colorAccentBg: green !important;
}
#browser:has(.UrlBar-SearchField > input[placeholder$="Blue"]) {
--colorAccentBg: blue !important;
}
/* Shrink Search field to size of icon */
.UrlBar-SearchField {
min-width: 26px;
flex-basis: 26px;
border: unset;
background: unset;
/* Hide inner components of the Search Field, but keep the dropdown interactive */
& > *:not(.SearchEngineSelect-Icon):not(nav) {
display: none !important;
}
& .SearchEngineSelect-Icon {
opacity: 0;
}
}
/* Make a new icon to reflect the selected value */
#browser {
--customIconColor: var(--colorAccentBg);
}
.UrlBar-SearchField::before {
content: "";
position: absolute;
top: 3px;
left: 3px;
height: 20px;
width: 20px;
border-radius: 10px;
background-color: var(--customIconColor);
}