Dashboard Camo: Theme Integration for Dashboard Webpages

HKayn

Vivaldi is introducing the Dashboard with its upcoming version 7.0, which lets you add various widgets to your Start Page. One of these widgets can display a webpage of your choosing. Here's the kicker: This widget can target local HTML files on your computer as well! You can essentially write your very own custom Dashboard widgets for Vivaldi, as several forum members have already demonstrated in this post.

The only drawback is that the browser's theme colors are not available inside a widget's webpage, which can be annoying if you're trying to make it look as "native" as possible.

I've created a JS extension which I call "Dashboard Camo" to bridge this gap. It takes all the custom CSS properties which Vivaldi sets according to your theme and passes them to all webpage widgets, where you can use them for styling your custom widgets.

The installation steps are the same as any other JS Mod: Download the mod from my GitHub page, edit your Vivaldi's window.html, place the JS file in the same folder, and you're done! Have fun building some stuff!

sjudenim

Good job and thanks for sharing.

MasterLeo29

@HKayn Great idea, even better execution. Well done

HKayn

Throughout today I was thinking: "Wait a second, why should only dashboard widgets benefit from this?"

In the coming days I will be updating this mod to apply not only to dashboard webpage widgets, but rather to everything that Vivaldi considers to be a tab. This will include those widgets, but also panels and regular tabs. I'm seeing lots of potential for this, for example:

custom native-looking panels
a custom native-looking New Tab page
a Vivaldi Forum CSS theme that adapts to your current browser theme

Since Vivaldi's CSS variables have rather generic names (e.g. --colorAccentBg or --radius), I won't rule out the possibility that the injected CSS variables will conflict with some websites, so I will be applying a namespace to them. For example, my mod will turn Vivaldi's --colorAccentBgproperty into --vivaldi-webpage-camo--colorAccentBg when injecting it.

I think I've also found a way to pass the current theme's wallpaper image along with everything else, so that would be another improvement.

Stay tuned!

MasterLeo29

@HKayn Seems to be a neat idea, yes. One note/idea if I may add a bit : having a quick way (a few easy-to-locate variables in the js should suffice) to turn on/off in which pages / tabs the mods acts on would be a nice touch.

For example : for people that only want/need this mod for the dashboard part dont have to "pay the cost" (in performance, for example) of inject extra stuff in every single tab they open.

HKayn

@MasterLeo29 Great point! I've already been wondering whether there would be demand for a tab filter.

I'll try to place a variable inside the script where you can set an array of strings or regular expressions (or even a custom function!) to customize which tabs my mod should touch.

luetage

@HKayn I believe var(--viv-colorFg) should be enough to distinguish it. Better keep it short, otherwise it’s a bother to type and to read the relevant part—the color.

I played around with the color variables and widgets today. When moving widgets the mod frequently throws an error and the theming is lost/reverts to backup on all Vivaldi colored widgets.

Uncaught (in promise) Error: Frame with ID 0 was removed.
Uncaught (in promise) Error: Frame with ID 0 is showing error page

Seems to be a problem with the asynchronous updateCssOfTab function.

HKayn

@luetage said in Dashboard Camo: Theme Integration for Dashboard Webpages:

@HKayn I believe var(--viv-colorFg) should be enough to distinguish it. Better keep it short, otherwise it’s a bother to type and to read the relevant part—the color.

Good point, I'll do --vwc--colorAccentBg instead. I'll use the shorthand of my mod's name as the namespace to not take away any possible namespaces from Vivaldi if they ever decide to implement this themselves as an official feature. They wouldn't even be the first browser to do that.

@luetage said in Dashboard Camo: Theme Integration for Dashboard Webpages:

I played around with the color variables and widgets today. When moving widgets the mod frequently throws an error and the theming is lost/reverts to backup on all Vivaldi colored widgets.

That's something I noticed earlier today too. That's caused by a combination of me overengineering the updateCssOfTab function and failing to consider edge cases like a tab not actually being loaded yet. I've been having success with some fixes; this behaviour should be improved in the next mod version.

luetage

@HKayn I have one idea which could help with theming, reading out whether Vivaldi’s browser element carries the theme-dark class. This could be passed to the root of the widget/page as variable --vwc-theme-dark: false and on the client side could be read out with Javascript and used to handle color variations. E.g. scrollbar theming depends on it.

HKayn

@luetage That's a great idea! Actually, why stop there? I could include the entire class string of the browser element as a --vwc-browser-class variable. Then the widget could freely pick which of those classes to respond to:

const browserClassString = getComputedStyle(document.documentElement).getPropertyValue("--vwc-browser-class");
const browserClasses = new Set(browserClassString.split(" "));

if (browserClasses.has("theme-dark")) {
	// respond to dark theme
}

luetage

This post is deleted!

ekozcifci

I can't understand really what this mod doing, even with trying. Can anyone demonstrate it with some images with before after?

luetage

@ekozcifci The mod lets you access Vivaldi theme colors in widgets. For example widgets using this mod see https://forum.vivaldi.net/topic/101613/custom-dashboard-widgets.