Vue dark-mode

# Favicon

prop Type default Description
favicon String | Boolean link[rel="icon"] You can define the selector of the desired favicon (e.g. #favicon) or to disable this functionality, just by setting it to false.

You can switch the favicon according to the prefers-color-scheme.

# Naming favicons

Favicons should be named as follows:

  • For light the default favicon will be used, for example: https://example.com/favicon.svg or /favicon.svg
  • For dark will be used, for example: https://example.com/favicon-dark.svg or /favicon-dark.svg

TIP

For @vue-a11y/dark-mode:

  • You can use absolute URL (https://example.com/favicon.svg) or relative (/favicon.svg);
  • You can use any extension for the favicon. svg is currently the most recommended and supported in modern browsers. See more about svg favicons ;

Insert default favicon into your index.html

e.g.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- omitted -->
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">

If the user has defined in his dark operating system as color mode preference for applications, @vue-a11y/dark-mode will identify and make the change to your favicon.

e.g.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- omitted -->
    <link rel="icon" type="image/svg+xml" href="/favicon-dark.svg">

TIP

You can see this working, just go to your operating system's color settings and change to dark, go back to that documentation and check the favicon has changed.

This is a practice used by several sites, one of which is github.

← Meta theme-color →