Provide fallback values for "themed" SVGs

ISSOtm · ISSOtm · commit 5eaf6f82e6d3 · 2024-01-16T11:10:47.000+01:00
This allows them to be viewed stand-alone—not edited, but it's still a win.
diff --git a/src/imgs/apu_overview.svg b/src/imgs/apu_overview.svg
@@ -3,19 +3,19 @@
   <defs>
     <style type="text/css"><![CDATA[
       text {
-        fill: var(--fg);
+        fill: var(--fg, #000);
         dominant-baseline: middle;
         font-feature-settings: "tnum";
       }
       .centered { text-anchor: middle; }
       .right    { text-anchor: end; }
       rect, path, use {
-        stroke: var(--fg);
-        fill: var(--fg);
+        stroke: var(--fg, #000);
+        fill: var(--fg, #000);
       }
       .inverted {
-        stroke: var(--bg);
-        fill: var(--bg);
+        stroke: var(--bg, #fff);
+        fill: var(--bg, #fff);
       }
       .unfilled {
         fill: none !important;
diff --git a/src/imgs/ppu_modes_timing.svg b/src/imgs/ppu_modes_timing.svg
@@ -2,49 +2,27 @@
 <svg viewBox="0 0 700 590" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
 	<defs>
 		<style type="text/css"><![CDATA[
-			text {
-				fill: var(--fg);
-			}
-			rect {
-				opacity: 75%;
-			}
-			.mode-box {
-				opacity: 25%;
-				height: 60px;
-			}
-			.scanline {
-				height: 20px;
-			}
-			.square {
-				height: 10px;
-				width: 10px;
-			}
+			text { fill: var(--fg, #000); }
+			rect      { opacity: 75%; }
+			.mode-box { opacity: 25%; height: 60px; }
+			.scanline {               height: 20px; }
+			.square   { width: 10px;  height: 10px; }
 			.m2 { fill: #ffd966; }
 			.m3 { fill: #ff8000; }
 			.m0 { fill: #97d077; }
 			.m1 { fill: #00ffff; }
-			.m30 {
-				fill: url(#m30-gradient);
-			}
+			.m30 { fill: url(#m30-gradient); }
 			.darken {
 				fill: #000;
 				opacity: 50%;
 				font-weight: 500;
 			}
 			.centered { text-anchor: middle; }
 			.right    { text-anchor: end; }
-			.mode-id {
-				font-size: large;
-			}
-			.small {
-				font-size: small;
-			}
-			.middle-baseline {
-				dominant-baseline: middle;
-			}
-			.mode-id, .mode-descr {
-				font-variant: small-caps;
-			}
+			.mode-id { font-size: large; }
+			.small   { font-size: small; }
+			.middle-baseline { dominant-baseline: middle; }
+			.mode-id, .mode-descr { font-variant: small-caps; }
 		]]></style>
 		<linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="m30-gradient">
 			<stop offset="0%" stop-color="#ff8000"/>
@@ -145,4 +123,4 @@
 	<text class="centered" y="20" x="613">One frame:</text>
 	<text class="centered" y="45" x="613">70224 dots</text>
 	<text class="centered" y="70" x="613">@ 59.7 fps</text>
-</svg>
+</svg>
diff --git a/src/imgs/sprite.svg b/src/imgs/sprite.svg
@@ -7,7 +7,7 @@
         font-size: 13px;
         text-anchor: middle;
         dominant-baseline: central;
-        fill: var(--fg)
+        fill: var(--fg, #000)
       }
       .c0 { fill: #081820 }
       .c1 { fill: #346856 }
