This is a collection of my and other authors' useful CSS mods to improve and clean up the interface of Vivaldi browser.

To change Vivaldi UI via css modifications you need to enable CSS flag:
- Open chrome://flags/#vivaldi-css-mods.
- Check
Allow CSS modifications.
- Open
Appearancesection in Settings. - Under "Custom UI Modifications" choose the folder you want to use.
- Download mods and place
.cssfiles inside this folder.
Two main mods (clear and hide UI) can change some colors to #191919 and main font to iMWritingQuat. If you want UI consistency, you can download this font and Breeze Dark theme.
Then you can import Breeze dark on Themes tab. Downloaded font can be applied on Webpages tab.

-
Make horizontal tabs more compact; auto-hide address bar. To show it, move your mouse at the Vivaldi window top or assign shortcut to
Focus Address Fieldaction.
Each tab becomes smaller, therefore it can display longer text.
-
Applies iMWritingQuat font to UI elements.
Removes some UI elements
- scrollbar (enable turn on vivaldi://flags/#overlay-scrollbars)
- expand, minimize, close window buttons (top right corner)
- Vivaldi logo (top left corner)
- Vivaldi settings window title
- tabs in "toggle UI" mode (
Settings > Keyboard > View > Toggle UI) - some distracting borders and shadows
Changes background color to dark gray
Applies 191919 (hex) or 25, 25, 25 (rgb) dark gray color to:
- some borders to hide them
- popup elements
- main window
- settings
- address bar and url field
-
svg_extensions_icons:
monochrome svg icons for extensions. Resets when the contents of the toolbar are changed.
If you want powerful icons customization: https://github.com/JoyHak/customize-vivaldi-buttons
-
hide_tabs by supra107, R0STEFAN:
auto-hide the tab bar and display on mouseover.
-
minimize_tabs by nirin, masashinogawa, nafumofu:
minimizes the tab bar into rows.
-
expand_bookmarks by nafumofu:
expands and collapses folders in a list, such as bookmarks, with a single click
Don't forget to visit the other repositories as well: