How can I use the site's theme color(s) in an svg image on a page (within a content editor web part), such that if the site's theme colors are changed, the colors in the svg image automatically reflect the site's theme colors?

The svg is presently using hard-coded colors, however I wish to instead reference the theme colors somehow.

Below is some Content Editor Webpart code (which also contains an explanation of the objective I am trying to achieve):

<h1>This text is an H1 Heading: it automatically changes color, when the theme/look gets changed</h1> 
<span class="ms-rteStyle-Accent2">This text is accent color2, it automatically changes color, when the theme/look gets changed</span></p> 
<p>The objective is that changing the theme/look should automatically change the colors used by the svg graphic below (presently hard coded), such that the square automatically takes on the color of the H1 Heading, and the circle automatically takes on the color of the accent color2 text.<br/></p> 
<div class="ms-rtestate-read ms-rte-embedcode ms-rtestate-notify ms-rte-embedil s4-wpActive" contenteditable="false" unselectable="on"> 
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" style="" viewBox="0 0 84 84" x="0px" y="0px" version="1.1" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve"> 
<style type="text/css">
<rect class="st0" x="0.5" y="0.5" width="83" height="83" /> 
<circle class="st1" cx="42" cy="52.5" r="23" /> </svg>
<rect class="st0" width="83" x="0.5" height="83" y="0.5">
<circle class="st1" r="23" cy="52.5" cx="42"> &#160;</circle></rect></div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.