0

I am trying to generate diagrams for my blog in Inkscape that are equally suitable for dark and light schemes. The background color of the HTML page is #ffffff in light mode and #424242 in dark mode. I use CSS to invert all images when the color mode changes to dark.

I use a transparent background for my diagram objects, so their color switches to #424242 automatically when in dark mode. Now, I want to create objects that are darker than the background in light mode and lighter in dark mode. That is, the background of these objects is a filter on the background color.

Is this possible in Inkscape and how?

1 Answer 1

1

You can set up CSS styles in Inkscape using Extensions > Styles > Merge Styles into CSS. Select one or more objects (with the same styles obviously) before running the extension.

Here's an example optimised SVG output (no edits). A simple rectangle with a fill. I named the style MyStyle. Obviously there are a few attributes within it which could be removed with a text editor. Since I used no stroke, everything except the fill could just be deleted.

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="210mm" height="297mm" version="1.1" viewBox="0 0 210 297" xmlns="http://www.w3.org/2000/svg"><defs><style><![CDATA[
.MyStyle {
  fill:#333333;
  paint-order:stroke fill markers;
  stroke:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.165;
}
]]></style></defs><rect class="MyStyle" x="11.11" y="11.82" width="40.13" height="38.69"/></svg>
5
  • So, to apply this to my use-case, I have to add the dark-theme style with the rule html[data-scheme="dark"] .MyStyle, then define the colors according to the website style sheet, am I correct? Mar 17 at 13:54
  • HTML coding is generally off-topic here. Better to ask on Stack Overflow how to implement it on a web page.
    – Billy Kerr
    Mar 17 at 15:20
  • Yea, it sure is. By the way, Inkscape doesn't offer any built-in way to define more than 1 colorscheme, right? Mar 18 at 7:55
  • @Green绿色 You can create as many CSS classes as you like, but Inkscape doesn't have anything resembling colour schemes.
    – Billy Kerr
    Mar 18 at 8:43
  • Ok, I see. Thanks. Mar 19 at 6:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.