Themes

Contents hide

Change the look of Vivaldi with Themes

Go to Settings > Themes to:

Select one of the predefined themes.
Create your own theme.
Edit a preinstalled theme.
Install a theme from Vivaldi Themes.

Settings window showing the Theme Library.

Create a new theme

To make your own theme:

Go to Settings > Themes.
Click on New Theme after the existing themes in the theme library.
Give the new theme a name.
Use the color picker or input a hex color code to change the Background, Foreground, Highlight and Accent colors. Also, change other color related settings, if you wish.
Switch to the Background tab in the theme editor and set a background for the new theme. You can choose between:
- An image from Vivaldi’s selection.
- A predefined color or set your own color of choice.
- Using the desktop image (newer OS versions).
- An image file from your computer.
Then, go to the Settings tab to tweak the theme further.
Last but not least, you can replace the default icons for toolbar buttons with your own.

Theme settings explained

Accent from page – Instead of the chosen accent color, the focused website’s color will be used on the toolbars. When you also enable Transparent Tab Bar, which shows your Start Page background image on the Tab Bar, the accent color will overlay the background image.

Switching tabs to show the colour on the Tab Bar change.

Accent on Window – When enabled, the accent color is displayed as the Tab Bar background (as on the illustration above) instead of on the Address Bar and active tab (as on the illustration below).

Limit Accent Color Saturation – This setting allows you to limit the amount of color (saturation) applied to the theme’s accent color.

Showing the different levels of accent color saturation.

Contrast – Increase contrast of the browser’s user interface elements to improve visibility.

Showing the changes in contrast on the browser window.

Transparency – Make some user interface elements, such as the Panels, a bit see-through, to let the Start Page background shine through.

Transparent Tab Bar – Enable the setting, if you’d like to see your Start Page background also on your Tab Bar.

Window with Start Page's background image showing on the Tab Bar.

Blur – When transparency has been enabled for the Tab Bar and Panels, you can add a blur effect to the user interface elements (see the image above).

Transparent Background Tabs – When enabled, background tabs won’t be visually confined into their own box.

Corner rounding – Adjust corner rounding to get the corners as sharp or soft as you like.

You can see the changes you make in the theme immediately and the changes get saved automatically.

When you’re done adjusting the theme settings in the Editor, go back to the Library to see the new theme listed with your other themes.

Custom Icons

To make the browser’s user interface truly unique you can replace the default toolbar buttons with your own icons.

To change icons:

Go to Settings > Themes > Editor > Icons.
Select a button you want to update.
Click on the current icon and locate the new icon image in your File Manager/Finder.
Alternatively, drag the new icon over the current one.

Take a look at the Help page about creating Custom Icons for suggestions about the best icon size, format and more.

Edit a theme

To change one of the default themes or one you’ve created:

Go to Settings > Themes.
Select the theme in the Library and switch to the Editor tab.
Alternatively, go to the Editor tab first and select the theme you want to edit from the drop down menu.
Make your changes to the theme.

You can see the changes you make in the theme immediately and the changes get saved automatically.

Shareable Vivaldi Themes

The theme editor allows for endless variations of Themes. To see and install Themes made by other Vivaldi users and to share your own, visit themes.vivaldi.net. To learn more about it, check the Help page about Shareable Vivaldi Themes.

Private Window Theme

Vivaldi has a separate theme for Private Windows to make it easier to differentiate them from regular Windows. To change the Private Window Theme:

Go to Settings > Themes > Private Window Theme.
Select a theme from the drop down menu.

Scheduling Themes

With theme scheduling you can set your favourite themes to be enabled during specified times throughout the day. For example, enabling a light theme during daylight hours, and switching to a darker theme in the evening.

Go to Settings > Themes > Theme schedule.
Choose between:
- No scheduling,
- Following the operating system’s schedule,
- Manual scheduling.

Operating system’s schedule

When following the operating system’s schedule, you can assign which one of your themes is used during the light and which one during the dark hours.

Manual scheduling

With manual scheduling you can add as many theme changes as you wish.

Click on a time slot to open a drop down menu and choose which theme you want to use.
Click and drag on the vertical bar between the timeslots, to adjust the theme change time.
Click on and buttons to add/remove theme changing times.

Manual theme scheduling options in Settings.

Dark mode for web pages

If you prefer dark themes and want the web page content to match, first look through the website settings as the site may already offer a dark mode option. If there’s no dark mode available, you can use an Extension to switch web page colours.

IMPORTANT Using extensions may alter the website’s functionality or break it altogether. Disable or remove the extension when you notice that websites are no longer behaving as expected.

Was this page helpful?

Let us know if something’s missing from this article. That’s the only way we can improve.