How to prepare an SVG file for light and dark mode support

SVG files are widely popular for logos and icons due to their scalability and small file size. However, a common issue arises when a dark-colored logo becomes invisible or hardly visible in dark mode, as its color remains unchanged. Fortunately, it's easy to set up your SVG file to automatically adapt colors based on the user's system preference (light or dark mode). Below you'll find detailed instructions on how to achieve this effectively.

Adding style definitions

The first step is to include a dedicated <defs> section with embedded CSS styles, allowing the SVG to respond dynamically to color mode changes:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <style>
      .color {
        fill: #141416;
      }

      @media (prefers-color-scheme: dark) {
        .color {
          fill: #ffffff;
        }
      }
    </style>
  </defs>

  <!-- Your SVG content -->
  <path class="color" d="..." />
</svg>

In the above example:

• The default fill color is set to #141416 (light mode).
• For dark mode, the fill color automatically changes to white (#ffffff).

Handling inline styles

In some cases, SVG files may contain inline styles such as fill="#fff". To ensure automatic adaptation to color mode, replace inline styles with CSS classes.

Example before adjustments:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path fill="#fff" d="..." />
</svg>

Converting inline styles to CSS classes:

1. Remove inline fill attributes.
2. Add a CSS class to your elements and define the styles within the <defs>:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <style>
      .color {
        fill: #141416;
      }

      @media (prefers-color-scheme: dark) {
        .color {
          fill: #ffffff;
        }
      }
    </style>
  </defs>

  <path class="color" d="..." />
</svg>

Handling multi-colored logos

If your SVG logo includes multiple colors, each color should be assigned to a distinct CSS class within the <defs> section. This allows precise control over color variations for both light and dark modes:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <style>
      .color-primary {
        fill: #141416;
      }
      .color-secondary {
        fill: #f00;
      }

      @media (prefers-color-scheme: dark) {
        .color-primary {
          fill: #ffffff;
        }
        .color-secondary {
          fill: #ffcc00;
        }
      }
    </style>
  </defs>

  <path class="color-primary" d="..." />
  <path class="color-secondary" d="..." />
</svg>

Using currentColor in SVG file

If your SVG is monochromatic, you can utilize currentColor even when embedding your SVG using the <img> tag. In this case, define the color explicitly within the SVG’s <defs> section:

Example with a single path element:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <style>
      path {
        color: #141416;
      }

      @media (prefers-color-scheme: dark) {
        path {
          color: #eeeeee;
        }
      }
    </style>
  </defs>

  <path fill="currentColor" d="..." />
</svg>

Example with multiple SVG elements (path, circle, etc.):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <style>
      * {
        color: #141416;
      }

      @media (prefers-color-scheme: dark) {
        * {
          color: #eeeeee;
        }
      }
    </style>
  </defs>

  <path fill="currentColor" d="..." />
  <circle fill="currentColor" cx="50" cy="50" r="40" />
</svg>

Summary

By applying one of the methods described above, you can easily create a logo or icon SVG file that automatically adapts to the user's preferred color mode. Defining classes within your SVG provides the most flexibility and full control, making it suitable for a wide variety of use-cases.

To help you quickly implement these techniques, you can download specially prepared SVG versions of the Publii logo below. These files are already optimized for both light and dark modes, making them ideal for testing and preview purposes.

Download: publii_logo.svg