Theme Interface plus
-
To celebrate the release of the latest snapshot and the new/old ability to import and export themes, this mod adds following functionality to the new interface:
- Hide system themes
- Sort user themes alphabetically
- Move each theme individually (disable schedule before moving, only the selected theme can be moved)
- Expand themes overview to full width
Caution: Works only when you check »Open Settings in a Tab« in
vivaldi://settings/appearance/
. I hope some of you might find it usefulThis is a Javascript modification, instructions on how to install and maintain it can be found here ☛ https://forum.vivaldi.net/topic/10549/modding-vivaldi
// Theme Interface plus // version 2022.5.0 // https://forum.vivaldi.net/post/531981 // Adds functionality to toggle system themes, sort user themes alphabetically, // move themes individually and expand the overview, to Vivaldi’s settings page. (function themeInterfacePlus() { function toggle(init) { const css = document.getElementById("vm-tip-css"); if ( (systemDefault === 0 && init === 1) || (systemDefault === 1 && init !== 1) ) { if (!css) { vivaldi.prefs.get("vivaldi.themes.current", (current) => { vivaldi.prefs.get("vivaldi.themes.system", (sys) => { let index = sys.findIndex((x) => x.id === current); const hide = document.createElement("style"); hide.id = "vm-tip-css"; hide.innerHTML = ` .ThemePreviews > div:nth-child(-n + ${sys.length}):not(:nth-child(${index + 1})) { display: none; } `; document.getElementsByTagName("head")[0].appendChild(hide); }); }); } systemDefault = 0; } else { if (css) css.parentNode.removeChild(css); systemDefault = 1; } } function sort() { vivaldi.prefs.get("vivaldi.themes.user", (collection) => { collection.sort((a, b) => { return a.name.localeCompare(b.name); }); vivaldi.prefs.set({ path: "vivaldi.themes.user", value: collection }); }); } function move(dir) { vivaldi.prefs.get("vivaldi.themes.current", (current) => { vivaldi.prefs.get("vivaldi.themes.user", (collection) => { let index = collection.findIndex((x) => x.id === current); if (index > -1 && dir === "right") { if (index === collection.length - 1) { collection.unshift(collection.splice(index, 1)[0]); } else { let fromI = collection[index]; let toI = collection[index + 1]; collection[index + 1] = fromI; collection[index] = toI; } } else if (index > -1 && dir !== "right") { if (index === 0) { collection.push(collection.splice(index, 1)[0]); } else { let fromI = collection[index]; let toI = collection[index - 1]; collection[index - 1] = fromI; collection[index] = toI; } } else return; vivaldi.prefs.set({ path: "vivaldi.themes.user", value: collection }); }); }); } function expand(opt) { const view = document.querySelector(".TabbedView"); if (opt === 1 || expansion === 0) { view.style.maxWidth = "unset"; expansion = 1; } else if (opt === 0) { view.style.maxWidth = "660px"; } else { view.style.maxWidth = "660px"; expansion = 0; } } const goUI = { buttons: [ // text, function ["Toggle", toggle], ["Sort", sort], ["\u{25C2}", move], ["\u{25B8}", () => move("right")], ["\u{FF3B}\u{FF3D}", expand], ], load: () => { const footer = document.querySelector(".TabbedView-Footer"); const link = document.querySelector(".TabbedView-Footer a"); if (!footer.classList.contains("vm-tip-footer")) { footer.classList.add("vm-tip-footer"); goUI.buttons.forEach((button) => { let b = document.createElement("input"); b.type = "button"; b.value = button[0]; footer.insertBefore(b, link); b.addEventListener("click", button[1]); }); } if (expansion === 1) expand(1); }, }; function mi5(mutations) { mutations.forEach((mutation) => { mutation.addedNodes.forEach((node) => { if ( node.classList.contains("TabbedView-Content") && document.querySelector(".ThemePreviews") ) { goUI.load(); } else { if (expansion === 1) expand(0); } }); }); } let systemDefault = 0; // set to »1« to display system themes by default let expansion = 0; // set to »1« for the maximum number of themes per row by default const settingsUrl = "chrome-extension://mpognobbkildjkofajifpdfhcoklimli/components/settings/settings.html?path="; toggle(1); chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { if (changeInfo.url === `${settingsUrl}themes`) { goUI.load(); const view = document.querySelector(".TabbedView"); new MutationObserver(mi5).observe(view, { childList: true }); } }); })();
History
- 2021.11.0 Release
- 2021.11.3 Persistent system themes toggle
- 2021.11.4 Toggle works with CSS for smooth operation
- 2021.11.5 Simplified move function
- 2021.11.6 Always show active theme, allow themes to move continuously
- 2021.11.7 Add option to expand themes to full width
- 2021.11.8 Fix system theme toggle
- 2022.4.0 Cleanup
- 2022.5.0 Fix button HTML
-
@luetage
サーモン LOL
What a good taste naming! -
@shifte It’s a theme I downloaded from the official page, but I cannot find it anymore… And yeah, I never checked what it means, I thought it’s mango 🥭 or peach ^^
Should anybody have a suggestion for a feature or change, please let me know. The code is fresh in my head and therefore it’s easy to work with and manipulate still.
-
@luetage said in Theme Interface plus:
const systemNumber = 10; // toggle all system themes (adjust amount should Vivaldi make changes)
checking the length of the
vivaldi.themes.system
pref would keep the number up to date as well.
also, how about good ol’ export-all (probably w/o wallpapers)? i’m not sure how it would behave when attempting to load a theme from json with an invalid wallpaper though…
-
I'm making no ironic remarks at all here, coz it didn't go so well last time.
Or was that ironic? Tis so hard to distinguish anymore.
-
@potmeklecbohdan Oh yeah, good point, lets compute the length. And yes, an option to backup all themes would have been nice, but I don’t wanna mess with the images indeed. They could be saved and the image could be set to none, but what’s the point? The new themes rely heavily on images… Probably just better to save the zip files individually for backup purposes.
-
@luetage oh well… already reduced from ~110 to ~50, time for another round
does the list also render awfully slow for you? or wait, that’s more a question for the snapshot thread.
-
@potmeklecbohdan My list is quite small, but yes, there is some delay, I would guess it’s the images needing loading to create the previews.
-
@luetage
I'm a bit curious about highlighting the active window, but I feel unsure about it has to do with the theme. -
@shifte You mean the »fade foreground colors« setting for background windows? Doesn’t seem to work right now… Otherwise, please elaborate.
-
@luetage
I don't know "Fade Foreground Colors".
eg.
I 'd like to improve my vocabulary... -
@shifte Hmm, what are the theme settings? This looks problematic.
-
@luetage
As I thought, It looks nothing to do with the theme. ^^;
This will do.
-
Updated the mod. Toggle behavior was still a bit buggy and inconsistent. The new version will remember the toggle status for system themes as long as you use the same window and revert to default on initial loads only.
-
I pushed 2 further updates over the past day. Think I’m happy with it now. Especially using CSS for the toggle functionality to hide system themes, instead of running a loop, turns out to work far better.
-
two more things –
- shouldn’t a default theme be visible if it’s currently active/scheduled/something?
- why not wrap around when moving the first / last user theme?
-
@potmeklecbohdan Yeah, making the move continuously is an option I considered, but the original mod didn’t do it so I dismissed it. But why not, I’ll implement it. And hmm, I never noticed this, but it’s true that a currently active system theme cannot be edited when visiting the editor. It’s strange that hiding the preview would circumvent this… I don’t see the issue with the schedule though.
-
@luetage i don’t see any problems editing a hidden theme, other than what’s already forbidden due to it being preset. my thought was more about someone saying ‘uh, wait, how do i not have any theme active?’
-
@potmeklecbohdan I implemented both suggestions, please test it. The new version didn’t destroy my settings file and everything seems to be alright, but I don’t want to share it here before we can be sure.
-
@luetage thanks; didn’t notice any bugs.
btw., i didn’t realise the wrap-around means more complexity . at first i thought it would be only about removing a condition & adding a
%
(which is of course wrong).