You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This is basically yet another light/dark mode question.
I am creating my documentation using MkDocs and the Material theme, which has great support for switching between light/dark theme, through CSS variables.
From reading the other questions on the same topic, i have settled on 1) inlining the SVG image, so it can be styled, and 2) having some custom CSS that changes the fill, stroke, etc through the use of !important.
This actually works quite nice, however I currently don't have a way of distinguishing Draw.IO elements from each other in the SVG (these are simple graph like diagrams with nodes, edges and some labels).
I am currently styling the rect, path and div elements in the inlined SVG, however I would like to colour "container" elements differently than the regular elements, and preferably even being able to set some metadata or custom properties on the needed elements that would be transferred to the SVG output such that it could be matched by CSS selectors giving me the option to differentiate more "types" of elements from each other.
I have tried various settings in the UI, but I can't get anything to be exported in the SVG elements, besides the colours and font information.
My best effort currently is to designate a specific fill colour to container elements, and then have a CSS selector match on that, but it seems very hackish.
It would be awesome if there was a way to tag elements with a class or data-* attributes based on the metadata or custom properties. This would most likely be very specific to SVG, and not really do anything to PNG/JPEG exports. This way it should still look normal if viewed independently, or rendered in a Gihub/GitLab readme, but still perfectly align with the colour theme of the MkDocs documentation when embedded there.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
This is basically yet another light/dark mode question.
I am creating my documentation using MkDocs and the Material theme, which has great support for switching between light/dark theme, through CSS variables.
From reading the other questions on the same topic, i have settled on 1) inlining the SVG image, so it can be styled, and 2) having some custom CSS that changes the fill, stroke, etc through the use of
!important
.This actually works quite nice, however I currently don't have a way of distinguishing Draw.IO elements from each other in the SVG (these are simple graph like diagrams with nodes, edges and some labels).
I am currently styling the
rect
,path
anddiv
elements in the inlined SVG, however I would like to colour "container" elements differently than the regular elements, and preferably even being able to set some metadata or custom properties on the needed elements that would be transferred to the SVG output such that it could be matched by CSS selectors giving me the option to differentiate more "types" of elements from each other.I have tried various settings in the UI, but I can't get anything to be exported in the SVG elements, besides the colours and font information.
My best effort currently is to designate a specific fill colour to container elements, and then have a CSS selector match on that, but it seems very hackish.
It would be awesome if there was a way to tag elements with a class or
data-*
attributes based on the metadata or custom properties. This would most likely be very specific to SVG, and not really do anything to PNG/JPEG exports. This way it should still look normal if viewed independently, or rendered in a Gihub/GitLab readme, but still perfectly align with the colour theme of the MkDocs documentation when embedded there.Beta Was this translation helpful? Give feedback.
All reactions