Ribbon Theme

aminought

Github: https://github.com/aminought/vivaldi-ribbon-theme

Accent on Window disabled:

Accent on Window enabled:

Side panel (floating and pinned). A blur effect has been applied to the floating panel. The color of the pinned panel corresponds to the accent color:

A blur effect has been applied to the address dropdown panel:

There is an option to display tabs in the center:

The cherry on top: I noticed the display of the domain name and title in the address bar of Yandex Browser (UPD extracted into the separate mod: https://forum.vivaldi.net/topic/96072/address-bar-as-in-yandex-browser). When you click on the domain button, it takes you to the homepage of the website:

Installation

You need to act as described in the post about modding:

Place ribbon_theme.js inside <YOURVIVALDIDIRECTORY>\Application\<VERSION>\resources\vivaldi.
Add line <script src="ribbon_theme.js"></script> in the <body> of window.html.
Enable CSS-modifications in vivaldi://experiments and specify the folder where ribbon-theme.css is located in the settings.
Restart Vivaldi.

Configuration

ribbon_theme.js

FETCH_BACKGROUND_IMAGE. To change the color of the entire window, I removed the background image from it and moved it to the background-image of the start page. If you want the background image to appear, you should leave this setting enabled.
REPLACE_DARK_COLOR. Sometimes, dark websites can ruin the overall look, so I have added a setting that replaces the color with gray. This option is disabled by default. Related options:
1. DARK_COLOR_BRIGHTNESS_THRESHOLD. If the brightness of an accent color is less than a certain value, it will be replaced with DARK_COLOR_REPLACEMENT.
2. DARK_COLOR_REPLACEMENT: the replacement color is gray by default.
YANDEX_BROWSER_TITLE: the display of the domain and page title in the address bar is enabled by default.
CENTER_TABS: the display of tabs in the center is disabled by default.

ribbon-theme.css

--ribbonTransition: duration of the color change animation.
--ribbonSpacing: distance between the elements.
--ribbonSidebarSize: width of the sidebar.
--ribbonFooterSize: width of the status bar.

Caveats

So far, the theme has been working fine in the following configurations:

The tabs and address bar are on top.
The sidebar is on the left side.

Inspired by @toaa's comment.

UPD 3/15/2024

Extracted Yandex Browser-like address bar into the separate mod: https://forum.vivaldi.net/topic/96072/address-bar-as-in-yandex-browser.
Updated the description.

sphera

Oh, dude, I found another one of your topic!. You got caught.

MasterLeo29

@aminought The option to 'display tabs in the center' seems interesting enough to 'isolate'. could you perhaps think of a standalone version of it ?
A buddy of mine wanted something similar and, with that, I might be able to adapt and make it

aminought

@MasterLeo29 It's a little disappointing that, amidst all this beauty, you only seem to be interested in the centered tabs. You can use the following code under comment, though: https://github.com/aminought/vivaldi-ribbon-theme/blob/bd3745789677f2f07a593183da7a5cdd759ab43c/ribbon-theme.css#L131

MasterLeo29

@aminought that was not my intent. the mod overall looks great, and there is a part of it that I think it could 'live by itself'.
I should have said a few kind words before, you're right

aminought

UPD 3/15/2024

Extracted Yandex Browser-like address bar into the separate mod: https://forum.vivaldi.net/topic/96072/address-bar-as-in-yandex-browser.
Updated the description.

Artex

Just caught wind of this Ribbon theme very cool, love the colorful accents everywhere, would say that his is the spiritual successor to my old Accent Everywhere Theme

HarleyLxx

Amazing work!

fdm

Hi.

It works perfectly on Vivaldi 6.9-stable_x64 for GNU/Linux.

Makes it a lot easier to identify the active tab from many other open tabs.

Great work!

(Translate with DeepL)