how can I make svg file that could be activated in dark mode?

Help & Support
,
1

I am now making svg file, and the color is black. But if I export without customizing, I can barely see in dark mode environment. Therefore, I want to make my svg file look black in light mode and white in dark mode. I’ve searched for dark mode, and i found the code, but I don’t know where the code supposed to be positioned in the svg file.

  @media (prefers-color-scheme:dark) {
        svg {
          background-color: black;
        }
2

Hi @ovcovc and welcome to Vectornator Forum. Are you a front-end developer?
where do you want to use it? In web site?
Tell me more, please.

3

Hi @ovcovc,

Unfortunately Vectornator doesn’t allow you to insert custom CSS rules in SVG files; you’ll need to edit the file and add the required media queries as necessary.

Here’s an example which I’ve created (a simple 1x1 pixel “logo”), and how you’d adapt it for dark mode:

Exporting the SVG from Vectornator gives us:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Vectornator for iOS (http://vectornator.io/) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
    xmlns:vectornator="http://vectornator.io" style="fill-rule:nonzero;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns="http://www.w3.org/2000/svg" height="100%" version="1.1" viewBox="0 0 3 3" xml:space="preserve" width="100%">
    <metadata>
        <vectornator:setting value="Pixels" key="WDUnits"/>
        <vectornator:setting key="WDRulersVisible" value="true"/>
        <vectornator:setting value="false" key="WDSnapToPoints"/>
        <vectornator:setting key="WDCMYKEnabledKey" value="false"/>
        <vectornator:setting key="WDSnapToGrid" value="true"/>
        <vectornator:setting key="VNSnapToGuides" value="true"/>
        <vectornator:setting key="IsTimeLapseWatermarkDisabled" value="false"/>
        <vectornator:setting value="false" key="WDIsolateActiveLayer"/>
        <vectornator:setting value="false" key="UndoHistoryDisabled"/>
        <vectornator:setting value="true" key="WDSnapToEdges"/>
        <vectornator:setting key="WDDynamicGuides" value="true"/>
        <vectornator:setting key="WDOutlineMode" value="false"/>
        <vectornator:setting key="WDGuidesVisible" value="true"/>
        <vectornator:setting key="WDDisplayWhiteBackground" value="false"/>
        <vectornator:setting value="true" key="VNDimensionsVisible"/>
        <vectornator:setting key="VNPencilOnly" value="false"/>
    </metadata>
    <defs/>
    <g vectornator:layerName="Main Layer" id="Main Layer">
        <path fill="#000000" d="M1+1L2+1L2+2L1+2L1+1Z" opacity="1"/>
    </g>
</svg>

Most of the code is unnecessary metadata, which I’ve stripped out for brevity. You can also use the excellent SVGOMG for this:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
    xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 3 3">
    <path fill="#000000" d="M1+1L2+1L2+2L1+2L1+1Z" opacity="1"/>
</svg>

Any custom CSS can just go in a <style> tag under the root <svg> element. In this case, you should set the fill property to white (not background-color - that’s for HTML).

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
    xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 3 3">
    <style>
      @media (prefers-color-scheme: dark) {
        path {
          fill: white;
        }
      }
    </style>
    <path fill="#000000" d="M1+1L2+1L2+2L1+2L1+1Z" opacity="1"/>
</svg>

And there you have it - this file will change colour if the device is in dark mode.

In a more complex file, you’ll want to add some styling hooks (IDs, classes, attributes etc) so that you can perform more fine tuned customisations.

Some links you might want to take a look at to help you further with this:

2 Likes