Epidemiology & Technology

SVG Dark Mode

Vivek GuptaDecember 3, 2023

Recently I came across a challenge of a changing SVG icon colours on carkmode. The SVG was a logo exported from Adobe Illustrator. [Profile 1.1, Fonts converted to outlines, 5 decimal places, CSS properties in Style elements]. The SVG definition looked something like the following

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     x="0px" y="0px"
     viewBox="0 0 930.41 965.292" 
     style="enable-background:new 0 0 930.41 965.292;" 
     xml:space="preserve">

<style type="text/css">
	.st0{fill:none;stroke:#661100;stroke-width:18;stroke-miterlimit:10;}
	.st1{fill:none;stroke:#661100;stroke-width:14;stroke-miterlimit:10;}
	.st2{fill:none;stroke:#661100;stroke-width:8;stroke-miterlimit:10;}
	.st3{display:none;}
	.st4{display:inline;}
	.st5{enable-background:new    ;}
	.st6{fill:#000080;}
	.st7{display:inline;fill-rule:evenodd;clip-rule:evenodd;fill:#000080;}
	.st8{display:inline;fill:none;stroke:#000080;stroke-width:8.1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.0125;}
	.st9{fill-rule:evenodd;clip-rule:evenodd;fill:none;}
	.st10{fill:#661100;}
	.st11{fill:none;}
	.st12{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#661100;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.0125;}
	.st13{display:none;fill:none;stroke:#661100;stroke-width:4;stroke-miterlimit:10;}
	.st14{fill-rule:evenodd;clip-rule:evenodd;fill:#661100;stroke:#661100;stroke-width:0.5;stroke-miterlimit:10;}
	.st15{fill-rule:evenodd;clip-rule:evenodd;fill:#661100;}
	.st16{fill-rule:evenodd;clip-rule:evenodd;fill:#661100;stroke:#661100;stroke-miterlimit:10;}
	.st17{fill:none;stroke:#661100;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.0125;}
	.st18{display:inline;fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#661100;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.0125;}
	.st19{display:inline;fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#661100;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.0125;}
	.st20{display:inline;fill:none;stroke:#661100;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.0125;}
</style>
<g id="Layer_1" xmlns:serif="http://www.serif.com/">

<image style="display:none;overflow:visible;" width="1669" height="1651" xlink:href="C6C7760A975F4698.jpg"  transform="matrix(0.5971 0 0 0.5971 -49.6374 -14.7503)">
	</image>

<path id="outerCircle" class="st0" d="M462.039,859.427C222.136,857.762,28.783,670.439,30.527,441.376
		c1.744-229.063,197.93-413.682,437.832-412.017C708.26,31.025,901.614,218.348,899.87,447.411
		C898.126,676.474,701.94,861.092,462.039,859.427L462.039,859.427z"/>Code language: HTML, XML (xml)

The full SVG was AIIMS logo. I planned on using core-framework with it

Deleted the Image block

	<image style="display:none;overflow:visible;" width="1669" height="1651" xlink:href="C6C7760A975F4698.jpg"  transform="matrix(0.5971 0 0 0.5971 -49.6374 -14.7503)">
	</image>Code language: HTML, XML (xml)

Edited the CSS Styles block

<style type="text/css">
  	svg {--logo_primary : #550b92;}
	@media (prefers-color-scheme: dark) {
            svg {--logo_primary : yellow;}
         }
	.darkmode, .dark, .cf-theme-dark, .theme-inverted {--logo_primary : yellow;}	
	
	.st0{fill:none;stroke:var(--logo_primary, black);stroke-width:18;stroke-miterlimit:10;}
	.st1{fill:none;stroke:var(--logo_primary, black);stroke-width:14;stroke-miterlimit:10;}
	.st2{fill:none;stroke:var(--logo_primary, black);stroke-width:8;stroke-miterlimit:10;}
	.st3{display:none;}
	.st4{display:inline;}
	.st5{enable-background:new    ;}
	.st6{fill:#000080;}
	.st7{display:inline;fill-rule:evenodd;clip-rule:evenodd;fill:#000080;}
	.st8{display:inline;fill:none;stroke:#000080;stroke-width:8.1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.0125;}
	.st9{fill-rule:evenodd;clip-rule:evenodd;fill:none;}
	.st10{fill:var(--logo_primary, black);}
	.st11{fill:none;}
	.st12{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:var(--logo_primary, black);stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.0125;}
	.st13{display:none;fill:none;stroke:var(--logo_primary, black);stroke-width:4;stroke-miterlimit:10;}
	.st14{fill-rule:evenodd;clip-rule:evenodd;fill:var(--logo_primary, black);stroke:var(--logo_primary, black);stroke-width:0.5;stroke-miterlimit:10;}
	.st15{fill-rule:evenodd;clip-rule:evenodd;fill:var(--logo_primary, black);}
	.st16{fill-rule:evenodd;clip-rule:evenodd;fill:var(--logo_primary, black);stroke:var(--logo_primary, black);stroke-miterlimit:10;}
	.st17{fill:none;stroke:var(--logo_primary, black);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.0125;}
	.st18{display:inline;fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:var(--logo_primary, black);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.0125;}
	.st19{display:inline;fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:var(--logo_primary, black);stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.0125;}
	.st20{display:inline;fill:none;stroke:var(--logo_primary, black);stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.0125;}
</style>Code language: HTML, XML (xml)

Use following JS to toggle darkmode

document.querySelector('svg').classList.toggle('darkmode');
document.querySelector('svg').classList.toggle('darkmode');

document.querySelector('svg').classList.toggle('dark');
document.querySelector('svg').classList.toggle('dark');

document.querySelector('svg').classList.toggle('cf-theme-dark');
document.querySelector('svg').classList.toggle('cf-theme-dark');Code language: JavaScript (javascript)

Corrected namespace for serif

Added the namespace for serif to avoid errors

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" 
	xmlns="http://www.w3.org/2000/svg" 
	xmlns:xlink="http://www.w3.org/1999/xlink" 
	xmlns:serif="http://www.serif.com/"
	x="0px" y="0px"
	viewBox="0 0 930.40991 965.29193" 
	style="enable-background:new 0 0 930.40991 965.29193;" 
	xml:space="preserve">
<style type="text/css">
Code language: HTML, XML (xml)

Related Posts