Add custom style to svg before exporting

[Jonny310371503m6y]

I have an ai file for a logo that I am using on a website as an svg. I want to support dark mode, which requires just a few color changes in my svg.

I have all elements in the logo all setup so with Graphic Styles so that the elements in the svg all get class names. I also export the styling as 'Internal CSS', so that the exported SVG gets a `<style>` tag.

All of this is working great for a static logo.svg. But now my current process is to add the following manually into the `<defs>` section of the svg after the AI svg export:

<style>
  @media (prefers-color-scheme: dark) {
    .icon-document {
      stroke: #fff;
    }

    .logo-text {
      fill: #fff;
    }

    linearGradient stop:nth-child(2) {
      stop-color: #fff;
    }
  }
</style>

 This is doing exactly what I want on the website, and changes some colors in my svg to white for dark mode.

What I'm looking for is to automatically inject this media query upon export from AI. Does anyone know how to do this?

It can be either a separate `<style>` tag as in the example above, or it can be added to the existing `<style>` tag created by illustrator, that doesn't matter.

Any help appreciated.

[Mylenium]

Not that I know. In order for this to be official, the Adobhe apps would even have to support dark mode and provide a preview for it via a custom color profiel or whatever. See why there's no native way to create this? It's not there (yet?).

Mylenium