Vivaldi Sync keeps your data accessible between your computers, tablets, and smartphones. Whether browsing on desktop, Android, iPhone, iPad, or in a car, we ensure that your Bookmarks, Passwords, typed History, open Tabs, Reading List, and Notes are always in sync.
Products: Vivaldi for desktop.
Web Panels is a special type of persistent tab that users can add to their side panel in Vivaldi.
A Web Panel loads a user-supplied URL in a narrow column in the side panel. Web Panels load with a mobile User-Agent to match their narrow mobile-like viewport. Documents and web apps optimized for mobile devices should perform well as Web Panels.
Web Panels can communicate numeric status information through Tab Notifications, and other status information by dynamically updating their tab icons (“favicon”).
Potentially disruptive dialog-driven APIs, such as alert() and prompt(), are unavailable.
Web Panels run in a shared context with regular tabs. Web Panels cannot prompt the user for new permissions, but share granted permissions that have already been granted to their origin in a regular tab.
More powerful and integrated Panel experiences can be created using the chrome.sidePanel API, available to extensions.
Products: Vivaldi for desktop, Android, and iOS.
Adaptive Theme Colors let webpages set the accent color in the browser chrome, including the Title Bar, Tab Bar, Address Bar, Status Bar, and more. For example, to apply a light matcha green color theme to the browser chrome:
<meta name="theme-color" content="#8ba888">Vivaldi uses the first named <meta> element in the document.
Adaptive Theme Colors is enabled by default. The feature may be disabled by custom themes.
In Vivaldi for desktop and Vivaldi for Android, you can set different colors for light and dark theme color preferences using the appropriate media queries. For example, to apply a light matcha green theme color in light mode and a dark matcha green theme color in dark mode:
<meta name="theme-color" content="#8ba888" media="(prefers-color-scheme:light)">>
<meta name="theme-color" content="#44624a" media="(prefers-color-scheme:dark)">In Vivaldi for Android and Vivaldi for iOS, dynamic updates to the content properties are ignored. The theme color on these platform is only set during the initial document initialization.
In Vivaldi for desktop, rapid changes to the theme color may be delayed. You should ensure that your document does not change its theme color too often
The hue or saturation of some theme colors may be adjusted slightly to ensure enough contrast with toolbar text and icons.
Products: Vivaldi for desktop-only.
Fast-Forward let users navigate from one document to the next related document in a series. Examples include navigating to the next page of a book, search result page, forum, or image in a gallery.
Fast-Forward is activated by pressing the Space key (enabled by default) at the bottom of the document, or by using the Fast-Forward button or Quick Command.
Vivaldi detects the next document in a series using a few different methods:
<link> element with a rel="next" property in the document.<a> element with a rel="next" property in the document.<a> element with the exact string “Next” or “Next Page” (or localized equivalents) in the document. The aria-label and title properties are also considered. Only the last 1000 <a> elements are considered.Fast-Forward detection only happens during the initial loading of the document. Dynamic insertions later will not be detected by Vivaldi. Fast-Forward is updated dynamically when an element’s href property is updated.
Fast-Forward may be accidentally triggered on a compatible document, especially for documents and web apps like games that want to interact on the Space keyboard event.
Accidental navigation can happen when a document processes a keyboard event, but fails to consume the event after having acted on it. In your event handler, make sure to call preventDefault() to signal to the browser that the keyboard event has been acted upon and consumed. This happens automatically when using default form controls such as <input> and <textarea>.
It’s important to test for and ensure compatibility with Fast-Forward, Single-Key Shortcuts, and other keyboard accessibility features.
Products: Vivaldi for desktop
Vivaldi will source metadata for bookmarks from the HTML Standard metadata elements and from Open Graph Protocol metadata. This metadata is used to prefill values when the user creates a new bookmark.
The bookmark title will be sourced from:
<title> element.og:title).The bookmark description will be sourced from:
og:description).<meta name="description"> element.The Open Graph Protocol description is preferred as it is often a higher-quality summary of the page than the HTML Standard description. The latter is often overly long or misused to list page keywords instead of a written summary or description.
Vivaldi for Android and Vivaldi for iOS only use the HTML Standard elements.
Products: Vivaldi for desktop-only.
Vivaldi Calendar is a fully-featured calendar client built into the Vivaldi Browser. Users can subscribe to calendar feeds or add a single or group of events to their calendar schedules.
Calendar feeds and event files both use the iCalendar (RFC 5545) file format.
To prompt a user to add an event to their calendars, create a link using the https (recommended) or http URI scheme. Example:
https://example.com/staff-meeting.icsTo prompt a user to follow a new calendar feed, create a link to it using the webcal URI scheme. Example:
webcal://example.com/holidays.icsVivaldi will assume and only supports the HTTPS protocol for calendar subscriptions.
Vivaldi polls calendar subscriptions for updates every 10 minutes. Please ensure your calendar server sets appropriate HTTP cache response headers and supports cache-revalidation to reduce the load on the server (see RFC 9111).
Products: Vivaldi for desktop-only.
Vivaldi Mail is a fully-featured email client. Email deliverability and filtering of potentially unwanted messages is left to the user’s email server.
This document describes specifics for senders who want to ensure a good recipient experience and compatibility with Vivaldi Mail
Vivaldi Mail renders emails using the Chromium Blink rendering engine.
Vivaldi Mail blocks external resources from loading by default. Users will be prompted to approve loading external resources per sender address.
Embed small and important images, like a logo or symbol, into the email itself to ensure it is loaded. Include text alternatives (alt properties) to serve as placeholders for other external images.
Vivaldi Mail will convert HTML-only emails to plain text when the user prefers reading plain text. The conversion process preserves links and renders images as their alt property text. You can suppress an image from being represented in the plain-text conversion by explicitly marking it as decorational (alt=“”).
For the best result, supply a more carefully crafted plain-text alternative version of your HTML message.
Vivaldi Mail follows the user’s color scheme preferences and renders email messages accordingly.
You can style the light and dark mode variants of your message using the web standard prefers-color-scheme media query. Example:
<meta name="color-scheme" content="light dark">
<style>
@media(prefers-color-scheme: light) {
body { background: white; color: black; }
}
@media(prefers-color-scheme: dark) {
body { background: black; color: white; }
}
</style>Vivaldi Mail may automatically apply a dark color scheme if your email does not contain color scheme information.
You can disable Auto Dark Mode in an email message by explicitly declaring it as light mode only.
<meta name="color-scheme" content="only light">Vivaldi Mail does not support combining multiple multipart/related parts or other complex and unusual multipart messages. It will choose the largest (in bytes) suitable part of the preferred type in a multipart/alternative set.
Vivaldi Mail will display an impersonation/phishing warning if the name in the From or Reply-To fields resembles an email address different than the associated sender address. Send using a human-readable name or no name set instead.
Vivaldi Mail will display an impersonation/phishing warning if the email addresses in the From and Reply-To fields are at different domain names (including subdomains). Vivaldi Mail will always display an impersonation/phishing warning if either of the two addresses is at a common personal mailer domain (e.g., gmail.com and icloud.com).
Vivaldi Mail is designed around email threads. Threading ensures related emails are grouped and displayed together. Vivaldi Mail follows standard email threading conventions, as described in RFC 5322 section 3.6.4.
Please consider adopting email threading for your automated status updates to transactional emails. E.g., an order shipping confirmation should be a reply to the order confirmation email.
Vivaldi Mail will process calendar event attachments in the iCalendar (RFC 5545) file format and will prompt the user to respond to pending invitations (RSVP).
Alternatively, you can link to event files on a web server. See Integrating with Vivaldi Calendar for Web Developers.
Products: Vivaldi for desktop-only.
Tab Notifications let webpages communicate brief numeric status summaries to users. Examples include displaying new unread messages, emails, or news items; unprocessed tasks or bills; or the number of items added to a shopping cart.
Tab Notifications are displayed as numeric badges on top of the document’s favicon on the Tab Bar and Web Panels.
Vivaldi detects numeric counters at the beginning of the document title when they’re surrounded by parentheses (U+0028 LEFT PARENTHESIS and U+0029 RIGHT PARENTHES) and separated from the remainder of the title by a space (U+0020 SPACE) character. Example:
<title>(7) Webmail</title>Tab Notifications is enabled by default, but users can disable it.
The badge is updated dynamically when the document’s title changes. For the best performance, update the document.title property or update the <title> element’s innerText property. Replacing the <title> element may cause badge updates to be delayed.
Numbers with two or more digits may be displayed as a plus-sign badge instead of a numeric badge due to space constraints.
The numeric counter is removed from the document title in user interfaces where the badge is displayed. The character sequence “(0) ” is removed from titles but does not generate a badge.
Tab Notifications are only detected from the top-frame document title (no frames).
You can disable Tab Notifications in a document by prefixing the title with a zero-width space (U+200B ZERO WIDTH SPACE) character. Example:
<title>​(1195) Step Counter</title>Products: Vivaldi for desktop-only.
Vivaldi lets users either select text inside links or drag the links around. The behavior in Vivaldi differs from the default in other Blink (Chromium) browsers.
Users can select text inside links by clicking on a link and dragging left or right. The link element becomes draggable when they drag it up or down.
To explicitly make a link always draggable in any direction, set its draggable attribute to true. Example:
<a href="https://example.com/" draggable="true">
Draggable and Not Selectable Link Text
</a>To explicitly make a link’s text always selectable in any direction, set its draggable attribute to false. Example:
<a href="https://example.com/" draggable="false">
Selectable and Not Draggable Link Text
</a>When links are not explicitly draggable (the default), the CSS user-select property is ignored, and their cursor property may be ignored.
Vivaldi on desktop is known for its many customization options and we’ve brought many of them over to Vivaldi on iOS as well.
To change the browser’s theme in Vivaldi on iOS:
Vivaldi menu > Settings > Appearance & Theme > Browser Theme. If you choose the light theme, the browser toolbars will adapt its accent colors according to the website colors.
You can customize the theme further by choosing an accent color for the browser toolbars. When you have the Tab Bar enabled, it will be in your chosen accent color. When the Tab Bar is hidden, the Address Bar (and if it’s at the bottom of the screen, then also the bottom toolbar) will be in the accent color.
To choose an accent color:
Vivaldi menu > Settings > Appearance & Theme > Accent Color. 
Just like on desktop, you can select a preloaded wallpaper to decorate the Start Page or use your own image.
To update the wallpaper:
Vivaldi menu > Settings > Appearance Start Page > Wallpapers. If, in addition to the app’s user interface, you also wish to view websites in dark mode:
Vivaldi menu > Settings > Appearance & Theme > Website Appearance.Some websites do not offer their site in dark mode. In that case, you can force dark mode, by selecting the “Dark” option and enabling Force a dark theme on all websites.