@3dvs It's even simpler: You don't need to update the themes at all if you like them the way they were when you installed them in your browser. So theoretically, the theme kind of “auto-updates” with your browser because the theme is just some kind of “setting” for the browser UI and does not necessarily require to be updated to be compatible with the browser or to apply security fixes. If you download a theme package not for installation but to take a look at how a theme “DNA” looks like (right click → save link as) and extract the zip, you'll notice that themes only contain a background image, sometimes icon files (images) beside a settings.json file. The settings.json File contains the values the theme editor from the browser itself uses and understands. That's why — no matter how old or new — theme files are also compatible with newer versions of Vivaldi without problems. If the author changes aspects of the theme file — like images, icons, or colors — the theme itself changes, and you need to re-install it if you want to have those new icons or background images applied. (Or simpler: In the Vivaldi theme editor you'll find an “update theme”-button then, just click it to apply the changed version of the theme) But if you still like the theme that is installed, you basically never need to update it for compatibility reasons. Just for aesthetical reasons, and only if you really want changed aspects of a newer theme version applied to your browser UI. The fact that you have to trigger this kind of “update” (or, better said, “replacement of settings and graphics”) manually is a good thing! If you alter an installed theme to your needs, it would be bad if the theme gets a new version and overrides your changes every time automatically. Many users, for example, set individual background images or modify the roundess-factor or use different iconsets from another theme. By the way: You can also change the themes with the editor directly in Vivaldi, and if you use the theme export function there, you'll get a theme package again with a .json file that contains your changes. If you publish it the theme gets an id and the possibility to check the version for a manual update ("theme replacing") then, but for the browser it is irrelevant which version of a theme you are using and I'm sure if any new theme-values sould ever be added to the browser, it will still not break but just use a fallback / default value instead.

@nayamashidesu Hi, I tested the theme and the BG image doesn't disappear, restarted Vivaldi two times. There is a limit for the image size but I don't know what it is. I tested with Vivaldi 7.3.3635.9 on Opensuse Linux. Please, always add your Vivaldi, OS version.

@jane-n I just tried and it didn't work. But I've figured it out. I'm no programmer, I have no idea of code, but I know the ";",semicolon symbol, does things on code, so i thought maybe removing it from the name of the theme (The name was Steins;Gate). Replaced it with a simple space and it worked. Thanks anyways!

@nomadic Thank you, this gave me some hope, I'm gonna try it! You're better than AI, certainly! I think I will only go with the CSS to customize some of the things in my Vivaldi, but this after much time, when I'll learn a bit more about it. I will try to create a set of icons or import one from somewhere and change it for my case. Note: Do you think that if I would set the colour to "currentColor" for all the icons, there would be a mess? I think it wouldn't be good, as they would not have the colour set by me in Vivaldi anymore, no? [image: 1739718395871-3c6a7f48-350d-4b78-b165-ba6048a1a45e-image.png]

@jane-n OK...

@Catweazle Makes sense. I think I'll keep it on the right.

@teplostanski Are you able to rate themes on a Desktop instance of Vivaldi for themes you actually have downloaded? I am able to successfully rate themes that meet that criteria. It doesn't give much indication that the rating successfully goes through, but the star count does go up.

@mib2berlin That was it, thank you!

@Catweazle Thank-you for that. I thought that was the case. I was worried I may have uploaded the themes the wrong way. Thanks again.

@Klamby Hi, you can fine more detailed information here > Modding Vivaldi. Cheers, mib

@marialeal Thanks Maria! I’m a dark theme guy all the time. Dark theme FTW!

In Settings > Themes > Icons enable "Use Icon Set from" and select the theme you added the custom icons to.

--activeButton CSS Variable Vivaldi has a few general purpose CSS variables that can be used to manipulate the appearance of icons. One of these variables is the --activeButton variable, which is set on each panel toolbar button to indicate if the panel associated with the button is open. When a panel isn't open, --activeButton has a value of 0, and when it is, the value is 1. Direct usage of the variable On its own, the variable can be used to control things directly, like with opacity: var(--activeButton); or transform: scale(var(--activeButton)); which can be applied in the style="" attributes of SVG elements like paths, where a value of 0 will make the object disappear and 1 will make it show up again. This can either be an instantaneous change, or you can pair it with a transition to give it an animated appearance. More info on transition here: https://developer.mozilla.org/en-US/docs/Web/CSS/transition If you use transform: scale(var(--activeButton)); with a transition, you might notice the SVG element scaling up in an odd way that is relative to the top left corner of the icon. This happens because the scale is relative to the origin of the SVG, which is the top left corner by default. Luckily, you can adjust the position of the origin if the default behavior isn't what you are looking for with the property transform-origin. For a centered element, transform-origin: center; can be used, but you can also set specific x and y coordinates if necessary. More info on transform-origin here: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin Sometimes it can also be necessary to have the opposite behavior of simply putting the --activeButton variable into a CSS property. For example, if you wanted an SVG element to disappear when a panel button is activated, then you couldn't use the variable on its own. In such cases, you can easily invert the variable and set a new variable to hold it like so: --activeButtonInverse: calc(1 - var(--activeButton));. Then using something like opacity: var(--activeButtonInverse); will let you accomplish your goal. If you are going to use the inverted variable for multiple elements, then it makes sense to set the variable definition on a parent group element, <g>, or even on the main <svg> element, so you don't need to repeat the inverted variable definition in the style="" attribute of each element that requires it. Using the variable with calc() for greater control CSS has many numerical properties that can be manipulated but have ranges that fall outside of the range between 0 and 1, so for the --activeButton variable to be useful with these properties, you need to use it within calc()s which allows you to use mathematical operators on the contents of the calc(). Say you want to have a part of the icon move from the top of the icon to the bottom when the panel button is activated. To accomplish this, you would use transform: translateY();, but since SVG icons are suggested to fit in a 16x16 pixel area of a 28x28 pixel icon, you won't be able to move the icon element the entire distance without increasing the effect of the --activeButton variable like so: transform: translateY(calc(16px * var(--activeButton)));. So when the panel button isn't active (--activeButton is 0) the calc() will return 0px and not move the element, but once the button is activated and the variable is 1, the element will be moved 16px down in the icon. Using the calc() also allows you to convert the unitless variable into a pixel value by including the px on the multiplication factor. Depending on the CSS attribute you are manipulating, a unit of measurement or percentage value might be required. Another way you could use calc() with --activeButton is to provide a slight icon size increase to help indicate that the panel button is active. This could be accomplished with something like this: style="transform-origin: center; transform: scale(calc(0.2 * var(--activeButton) + 1)); transition: transform 0.1s ease-in;". This way, the scale will default to 1 when on an inactive panel button and increase to 1.2 times larger for an active one. Changing icon color with --activeButton Vivaldi suggests using the option currentColor for all fills and strokes in SVG icons to better allow the icon set to match the theme it is paired with, but when trying to indicate that a button is active, it can be beneficial to change the color from the normal white or black Foreground color to something more distinctive. By default, when you activate a panel button, it gets a bar along the side that uses your theme's Highlight color, so you might want to change the icon color to match. You can get the theme Highlight color with the CSS variable var(--colorHighlightBg), but you can't use a calc() alone to toggle between between 2 non-numerical values. That is where color-mix() can be useful. If you use something like this on the top level <svg> tag: style="color: color-mix(in srgb, var(--colorHighlightBg) calc(var(--activeButton) * 100%), currentcolor);", then you can control what ratio of the Highlight color and the Foreground (currentcolor) are mixed together to result in the final used color. By toggling between 0% and 100% of the Highlight color ratio, you can completely swap the color without any mixing. More info on color-mix() here: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix Example: History Panel icon with animated active indicator Preview: [image: 1705616187319-history-retro.gif] Final SVG: <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none" viewBox="0 0 28 28" style="--activeButtonInverse: calc(1 - var(--activeButton));"> <path id="history-icon-blob-1" fill="#b193f0" style="transform: translateX(calc(-22px * var(--activeButtonInverse))); opacity: var(--activeButton); transition: 0.5s;" d="M8.83 24.72c9.97.79 14.37-7.1 11.77-13.82C17.2 2.13.32-1.47 2.84 7.3c1.69 5.9-.13 16.94 5.99 17.42Z" /> <path id="history-icon-blob-2" fill="#ffd75a" style="transform: translateX(calc(26px * var(--activeButtonInverse))); opacity: var(--activeButton); transition: 0.5s;" d="M12.38 9.66c-18.1 1.38-10.38 8.21.72 12.12 9.26 3.26 11.92-1.24 12.35-7.01C26.68-1.8 20.8 9 12.38 9.66Z" /> <path id="history-icon-star-1" fill="#fff" style="transform-origin: 20.4px 5.4px; transform: scale(var(--activeButton)); opacity: var(--activeButton); transition: 0.3s; transition-delay: 0.2s;" d="M20.45 2.2a3.2 3.2 0 0 1-3.2 3.2 3.2 3.2 0 0 1 3.2 3.2 3.2 3.2 0 0 1 3.2-3.2 3.2 3.2 0 0 1-3.2-3.2z" /> <path id="history-icon-star-2" fill="#fff" style="transform-origin: 8.8px 23.5px; transform: scale(var(--activeButton)); opacity: var(--activeButton); transition: 0.3s; transition-delay: 0.4s;" d="M8.92 20.32a3.2 3.2 0 0 1-3.2 3.2 3.2 3.2 0 0 1 3.2 3.2 3.2 3.2 0 0 1 3.2-3.2 3.2 3.2 0 0 1-3.2-3.2z" /> <g> <path fill="#fff" stroke="#fff" stroke-width=".5" d="m10.006 8.077.991 1.712a6.545 4.55 13.88 0 1 .338-.078l-.913-1.589Zm3.965.35v1.17a6.545 4.55 13.88 0 1 .338.046V8.46Zm3.537.315-.901 1.566a6.545 4.55 13.88 0 1 .304.135l.969-1.667Zm-11.085 1.51-.168.292 1.903 1.104a6.545 4.55 13.88 0 1 .203-.282zm15.433 0-2.839 1.644a6.545 4.55 13.88 0 1 .237.248l2.782-1.6-.169-.293zm-15.68 4.483.022.338h1.803a6.545 4.55 13.88 0 1-.136-.338Zm14.328 0a6.545 4.55 13.88 0 1 0 .338h1.352l.034-.338zM9.837 17.202l-3.312 1.915a1.352 1.352 0 0 0 .169.292l3.447-1.993a6.545 4.55 13.88 0 1-.304-.214Zm9.394.439a6.545 4.55 13.88 0 1-.292.225l2.534 1.465a1.318 1.318 0 0 0 .079-.338zm-7.265.71-.969 1.678h.394l.901-1.566a6.545 4.55 13.88 0 1-.326-.112zm4.63.45a6.545 4.55 13.88 0 1-.35.056l.733 1.285h.394zm-2.614.045v1.24h.338V18.89a6.545 4.55 13.88 0 1-.338-.045z" /> <path stroke="#fd7100" stroke-width="1.126" d="m6.942 7.807 14.137 1.25a1.25 1.25 0 0 1 1.138 1.352l-.676 8.572a1.318 1.318 0 0 1-1.34 1.217l-12.46-.225a1.352 1.352 0 0 1-1.318-1.262l-.642-9.778a1.059 1.059 0 0 1 1.16-1.126Z" /> <path fill="#f30000" d="m16.834 12.574-.546.14-2.42 1.876-.107 1.066 1.066-.11 1.87-2.425z" /> <path fill="#f30000" d="m10.51 11.82.183.531 3.21 3.23 1.072.02-.196-1.053-3.713-2.636z" /> </g> </svg> Design Notes: (WIP)...

@NF1169 I like the icon theme in Equinoa.