Search code examples
csssvgthemesinlinereveal.js

Change inline SVG stroke & fill colours depending on the theme

I am trying to adapt the colours (stroke & fill) of an inline SVG picture in Reveal.js depending on the selected theme, i.e., dark strokes and fills for light themes and light stroke and fills for dark themes. So far I have attempted several approaches defining the following styles for the tags on the themes (in black.css for instance):

svg{stroke:white;fill:white}

or

rect{stroke:white;fill:white}

or

.reveal. slides rect{stroke:white;fill:white}

even defining a class

.light{stroke:white;fill:white}

but none worked.

Solution

  • I was close. Thanks to my favourite method (trial and error), I found a solution. I had to also wrap it with "section", i.e.:

    .reveal .slides section rect{stroke:white;fill:white}