Awesome Vivaldi

A Curated Community Mod Pack for Vivaldi Browser

English | 简体中文

Table of Contents

• Introduction
• Feature Showcase
• Main File Structure
• Installation
• Community Mods

Latest Updates

Showcase	Mods
	VividToast.css + VividToast.js
	ModConfig.js
	restorepinnedtab.js

Introduction

This modpack is always updated with Vivaldi, Vivaldi 8 latest is currently supported.

Which version of Vivaldi browser are you using? If you're not sure, check it out at vivaldi:about.

Feature Showcase

Showcase	Mods
	VividPeek.css + VividPeek.js
	VividPlayer.css + VividPlayer.js
	FavouriteTabs.css
	PeekTabbar.css
	Quietify.css

Vivaldi Max(AI Features)

Showcase	Mods
	TidyTabs.css + TidyTabs.js + TidyTitles.js
	TidyDownloads.js
	TidyAddress.js
	AskOnPage.js

Main File Structure

.
├── Vivaldi7.6Stable
│   ├── CSS
│   └── Javascripts
└── Vivaldi7.9Stable
    ├── CSS
    └── Javascripts

Installation

If you have installed Claude Code or other agents, ask it to:

Guide me through the installation of https://github.com/PaRr0tBoY/Awesome-Vivaldi

If not:

• Click me to navigate to the Installation Guide for Vivaldi 7.9 latest

Community Mods

Community JS Mods And CSS Included In This Modpack

📸 Element Capture

This mod adds the function of automatically selecting the area to capture when taking screenshots.

Colorful tabs

Part of the code that calculates the color from an icon

Monochrome icons

This modification changes the hue of all web panel icons and makes them monochrome. The panel becomes overtly busy and the colors are all over the place with web panels, therefore it makes sense toning them down somewhat and letting them blend in more.

Import Export Command Chains

This mods helps import and export command chains for Vivaldi. This mod comes with the ability to directly install code exported through the code block (```) of the Vivaldi forum.

📂 Easy Files

This mod is inspired by opera. It makes attaching files easier by displaying files in the clipboard and downloaded files.

Click to add Blocking list

This mod add support for adding the block list by clicking on the link in sites like other adblock.

Global Media Controls Panel

This mod will add a Global Media Controls in vivaldi's panel similar to Global Media Controls in chrome

Markdown Editor for Notes

Simple Markdown Editor for Notes Editor

Open panels on mouse-over.

Auto-close when you mouse over to body Don't open if mouse exits screen before timeout period Unique delays based on situation

Dashboard Camo: Theme Integration for Dashboard Webpages

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.

Colorful Top Loading Bar

A JS and CSS that make Vivaldi's Title bar visually appealing when a webpage is loading.

Feed icons

This is a small mod that converts feed icons into website icons.

Address Bar like in Yandex Browser

Make address bar displays the title of the current page and the domain, clicking on which leads to the homepage of the website.

Open in Dialog mod

A mod to open links or a search in a dialog popup.

Auto expand and collapse tabbar for two-level tab stack: Rework

Auto expand and collapse tabbar

Auto expand and collapse tabbar for two-level tab stack: Rework

Auto expand and collapse tabbar

Theme Previews Plus | Vivaldi Forum

To make theme preview properly reflect the actual placement of your tab bar, address bar, and panel bar, as well as show floating tabs when those are enabled.

NOTE: This mod only works when the settings page is opened in a tab ("Open Settings in a Tab" is enabled in vivaldi://settings/appearance/).

tovifun/VivalArc: With just a few tweaks, you can give Vivaldi that cool Arc vibe

Part of codes in this repo is used.

Development Reference

Vivaldi CSS Variables

Vivaldi exposes theme-aware CSS custom properties on #browser. These follow the user's active theme — values change with theme, so reference by var() name only.

Category	Key variables
Background	--colorBg, --colorBgAlpha, --colorBgDark/--colorBgDarker, --colorBgLight/--colorBgLighter, --colorBgIntense/--colorBgIntenser, --colorBgInverse, --colorBgFaded
Foreground	--colorFg, --colorFgIntense, --colorFgFaded/--colorFgFadedMore/--colorFgFadedMost
Highlight (primary accent)	--colorHighlightBg, --colorHighlightFg, --colorHighlightBgDark, --colorHighlightBgAlpha
Accent (secondary)	--colorAccentBg, --colorAccentFg, --colorAccentBorder, --colorAccentBgDark/--colorAccentBgDarker
Border	--colorBorder, --colorBorderSubtle, --colorBorderIntense, --colorBorderDisabled
Semantic	--colorSuccessBg/Fg, --colorWarningBg/Fg, --colorErrorBg/Fg
Radius	--radius, --radiusHalf, --radiusCap, --radiusRound, --radiusRounded
Other	--colorTabBar, --densityGap, --scrollbarWidth, --monospaceFont, --sansSerifFont, --uiZoomLevel

---