SoarGroup / SoarGroup.github.io

Soar's website: documentation, news, announcements, links, etc.
http://soar.eecs.umich.edu/
Other
7 stars 3 forks source link

manual images unusable in dark mode #10

Open garfieldnate opened 5 months ago

garfieldnate commented 5 months ago

For example:

image

SVG can have CSS in it, so it is possible to change the colors based on whether the user has dark mode activated or not.

For now, users can just switch to light mode to view the images.

garfieldnate commented 3 months ago

For future reference, I would like to use SVG styling similar to the following to change the image colors in dark/light mode:

<style>
    path {
      stroke: "#000000";
    }
    @media ( prefers-color-scheme: dark ) {
      path {
        stroke: #FFFFFF;
      }
    }
  </style>

I've found that this can't simply be dragged and dropped into the SVG files, though, because they use more complex styles that are inline.

I believe that the text in the images has also been translated to path strokes instead of plain <text> elements, which is not ideal.