From dc7f2a57bb60188cf428d6304471427fa06c9e84 Mon Sep 17 00:00:00 2001
From: Leilei332 <LeiYiXia29@outlook.com>
Date: Tue, 7 Oct 2025 18:55:26 +0800
Subject: [PATCH] Use currentColor to style svg (#9316)

* Replace fill: with currentColor

* Remove fill from wikitext

* Replace fill property with color property for svg selectors

* Further remove fill property

* Replace more fill properties

* Replace fill in seamless theme

* Replace fill in plugins
---
 core/ui/EditTemplate/tags.tid                 |   6 +-
 core/ui/ViewTemplate/title.tid                |   2 +-
 core/wiki/macros/tag.tid                      |   1 -
 core/wiki/macros/thumbnails.tid               |   2 +-
 plugins/tiddlywiki/comments/styles.tid        |   2 +-
 plugins/tiddlywiki/menubar/styles.tid         |  16 +--
 plugins/tiddlywiki/text-slicer/styles.tid     |   2 +-
 .../tour/simplified-tiddler-with-tags.tid     |   1 -
 plugins/tiddlywiki/tour/styles.tid            |   5 +-
 plugins/tiddlywiki/upgrade/styles.tid         |   4 +-
 themes/tiddlywiki/seamless/base.tid           |   2 +-
 themes/tiddlywiki/vanilla/base.tid            | 108 ++++++++----------
 12 files changed, 60 insertions(+), 91 deletions(-)

diff --git a/core/ui/EditTemplate/tags.tid b/core/ui/EditTemplate/tags.tid
index bbd3d301e..298120606 100644
--- a/core/ui/EditTemplate/tags.tid
+++ b/core/ui/EditTemplate/tags.tid
@@ -17,13 +17,11 @@ tags: $:/tags/EditTemplate
 	<$let backgroundColor=<<colour>> >
 		<span class="tc-tag-label tc-tag-list-item tc-small-gap-right"
 			data-tag-title=<<currentTiddler>>
-			style=`color:$(foregroundColor)$; fill:$(foregroundColor)$; background-color:$(backgroundColor)$;`
+			style=`color:$(foregroundColor)$; background-color:$(backgroundColor)$;`
 		>
 			<$transclude tiddler=<<icon>>/>
 			<$view field="title" format="text"/>
-			<$button class="tc-btn-invisible tc-remove-tag-button"
-				style.fill=<<foregroundColor>>
-			>
+			<$button class="tc-btn-invisible tc-remove-tag-button">
 				<$action-listops $tiddler=<<saveTiddler>> $field=<<tagField>> $subfilter="-[{!!title}]"/>
 				{{$:/core/images/close-button}}
 			</$button>
diff --git a/core/ui/ViewTemplate/title.tid b/core/ui/ViewTemplate/title.tid
index b2cf1bd8e..56b92efe8 100644
--- a/core/ui/ViewTemplate/title.tid
+++ b/core/ui/ViewTemplate/title.tid
@@ -2,7 +2,7 @@ title: $:/core/ui/ViewTemplate/title
 tags: $:/tags/ViewTemplate
 
 \whitespace trim
-\define title-styles() fill:$(foregroundColor)$;
+\define title-styles() color:$(foregroundColor)$;
 
 <div class="tc-tiddler-title tc-clearfix">
 	<div class="tc-titlebar">
diff --git a/core/wiki/macros/tag.tid b/core/wiki/macros/tag.tid
index 2c539b42e..142403602 100644
--- a/core/wiki/macros/tag.tid
+++ b/core/wiki/macros/tag.tid
@@ -3,7 +3,6 @@ tags: $:/tags/Macro
 
 \define tag-pill-styles()
 background-color:$(backgroundColor)$;
-fill:$(foregroundColor)$;
 color:$(foregroundColor)$;
 \end
 
diff --git a/core/wiki/macros/thumbnails.tid b/core/wiki/macros/thumbnails.tid
index 213b6520c..83e03b906 100644
--- a/core/wiki/macros/thumbnails.tid
+++ b/core/wiki/macros/thumbnails.tid
@@ -21,7 +21,7 @@ tags: $:/tags/Macro
 	style="width:$width$px;height:$height$px;background-color:$background-color$;"
 ></$reveal></div><div
 	class="tc-thumbnail-icon"
-	style="fill:$color$;color:$color$;"
+	style="color:$color$;"
 >$icon$</div><div class="tc-thumbnail-caption">$caption$</div></div></$link>
 \end
 
diff --git a/plugins/tiddlywiki/comments/styles.tid b/plugins/tiddlywiki/comments/styles.tid
index ed3cf1ddf..62b34c764 100644
--- a/plugins/tiddlywiki/comments/styles.tid
+++ b/plugins/tiddlywiki/comments/styles.tid
@@ -25,7 +25,7 @@ tags: [[$:/tags/Stylesheet]]
 }
 
 .tc-comment-button button svg {
-	fill: <<colour download-background>>;
+	color: <<colour download-background>>;
 	height: 2em;
 	width: 2em;
 }
diff --git a/plugins/tiddlywiki/menubar/styles.tid b/plugins/tiddlywiki/menubar/styles.tid
index 26a96be01..39ec6c626 100644
--- a/plugins/tiddlywiki/menubar/styles.tid
+++ b/plugins/tiddlywiki/menubar/styles.tid
@@ -87,8 +87,6 @@ nav.tc-menubar li.tc-menubar-item > button {
 	font-weight: 700;
 	color: <<colour foreground>>;
 	color: <<colour menubar-foreground>>;
-	fill: <<colour foreground>>;
-	fill: <<colour menubar-foreground>>;
 	text-decoration: none;
 	padding: 0.5em;
 	margin: 0;
@@ -105,16 +103,14 @@ nav.tc-menubar li.tc-menubar-item > button.tc-selected {
 	background: <<colour menubar-foreground>>;
 	color: <<colour background>>;
 	color: <<colour menubar-background>>;
-	fill: <<colour background>>;
-	fill: <<colour menubar-background>>;
 }
 
 nav.tc-menubar li.tc-menubar-item svg {
 	transition: none;
 	width: 1em;
 	height: 1em;
-	fill: <<colour foreground>>;
-	fill: <<colour menubar-foreground>>;
+	color: <<colour foreground>>;
+	color: <<colour menubar-foreground>>;
 }
 
 nav.tc-menubar li.tc-menubar-item .tc-menubar-dropdown-arrow svg {
@@ -124,8 +120,8 @@ nav.tc-menubar li.tc-menubar-item .tc-menubar-dropdown-arrow svg {
 
 nav.tc-menubar li.tc-menubar-item > a.tc-selected svg,
 nav.tc-menubar li.tc-menubar-item > button.tc-selected svg {
-	fill: <<colour background>>;
-	fill: <<colour menubar-background>>;
+	color: <<colour background>>;
+	color: <<colour menubar-background>>;
 }
 
 nav.tc-menubar li.tc-menubar-item > a:hover,
@@ -135,8 +131,6 @@ nav.tc-menubar li.tc-menubar-item > button:hover {
 	background: <<colour menubar-foreground>>;
 	color: <<colour background>>;
 	color: <<colour menubar-background>>;
-	fill: <<colour background>>;
-	fill: <<colour menubar-background>>;
 	border-radius: 0;
 	text-decoration: none;
 }
@@ -148,8 +142,6 @@ nav.tc-menubar li.tc-menubar-item > button:active {
 	background: <<colour menubar-foreground>>;
 	color: <<colour background>>;
 	color: <<colour menubar-background>>;
-	fill: <<colour background>>;
-	fill: <<colour menubar-background>>;
 	border-radius: 0;
 	text-decoration: none;
 }
diff --git a/plugins/tiddlywiki/text-slicer/styles.tid b/plugins/tiddlywiki/text-slicer/styles.tid
index 370b4d684..328486c81 100644
--- a/plugins/tiddlywiki/text-slicer/styles.tid
+++ b/plugins/tiddlywiki/text-slicer/styles.tid
@@ -96,7 +96,7 @@ div.tc-edit-template-document-tiddler-heading a:hover {
 
 .tc-view-template-document-tiddler-heading-icon svg,
 .tc-edit-template-document-tiddler-heading-icon svg {
-	fill: <<colour background>>;	
+	color: <<colour background>>;	
 }
 
 .tc-view-template-document-tiddler {
diff --git a/plugins/tiddlywiki/tour/simplified-tiddler-with-tags.tid b/plugins/tiddlywiki/tour/simplified-tiddler-with-tags.tid
index c2c14a7b0..c5f27662c 100644
--- a/plugins/tiddlywiki/tour/simplified-tiddler-with-tags.tid
+++ b/plugins/tiddlywiki/tour/simplified-tiddler-with-tags.tid
@@ -3,7 +3,6 @@ title: $:/plugins/tiddlywiki/tour/simplified-tiddler-with-tags
 \whitespace trim
 \define tag-pill-styles()
 background-color:$(backgroundColor)$;
-fill:$(foregroundColor)$;
 color:$(foregroundColor)$;
 \end
 
diff --git a/plugins/tiddlywiki/tour/styles.tid b/plugins/tiddlywiki/tour/styles.tid
index 7bb434dab..1a9bf871b 100644
--- a/plugins/tiddlywiki/tour/styles.tid
+++ b/plugins/tiddlywiki/tour/styles.tid
@@ -66,7 +66,6 @@ tags: $:/tags/Stylesheet
 
 .tc-tour-panel-controls .tc-tour-panel-list-button.tc-selected {
 	color: <<colour tour-chooser-button-selected-foreground>>;
-	fill: <<colour tour-chooser-button-selected-foreground>>;
 	background: <<color tour-chooser-button-selected-background>>;
 }
 
@@ -104,7 +103,6 @@ tags: $:/tags/Stylesheet
 	border-radius: 1em;
 	background: <<colour tour-chooser-item-start-background>>;
 	color: <<colour tour-chooser-item-start-foreground>>;
-	fill: <<colour tour-chooser-item-start-foreground>>;
 	text-transform: uppercase;
 }
 
@@ -167,7 +165,7 @@ tags: $:/tags/Stylesheet
 }
 
 .tc-tour-task svg {
-	fill: <<colour tour-step-task-foreground>>;
+	color: <<colour tour-step-task-foreground>>;
 	vertical-align: middle;
 	width: 1.2em;
 	height: 1.2em;
@@ -240,7 +238,6 @@ tags: $:/tags/Stylesheet
 .tc-tour-settings-tour-step-launch-button:hover {
 	background: <<colour foreground>>;
 	color: <<colour background>>;
-	fill: <<colour background>>;
 }
 
 .tc-tour-settings-tour-step-heading-step-number {
diff --git a/plugins/tiddlywiki/upgrade/styles.tid b/plugins/tiddlywiki/upgrade/styles.tid
index 944c6a918..d6b880be1 100644
--- a/plugins/tiddlywiki/upgrade/styles.tid
+++ b/plugins/tiddlywiki/upgrade/styles.tid
@@ -20,11 +20,11 @@ tags: $:/tags/Stylesheet
 .tc-upgrade-wizard svg.tc-image-download-button {
 	width: 14em;
 	height: 14em;
-	fill: <<colour muted-foreground>>;
+	color: <<colour muted-foreground>>;
 }
 
 .tc-upgrade-wizard:hover svg.tc-image-download-button {
-	fill: <<colour foreground>>;
+	color: <<colour foreground>>;
 }
 
 .tc-upgrade-wizard svg .tc-image-download-button-ring {
diff --git a/themes/tiddlywiki/seamless/base.tid b/themes/tiddlywiki/seamless/base.tid
index 21656aa9e..0f07c3529 100644
--- a/themes/tiddlywiki/seamless/base.tid
+++ b/themes/tiddlywiki/seamless/base.tid
@@ -94,7 +94,7 @@ html:-webkit-full-screen {
 
 /* Adjust the colour of the page controls */
 body.tc-body .tc-page-controls svg {
-	fill: <<colour muted-foreground>>;
+	color: <<colour muted-foreground>>;
 }
 
 /* Adjust the colour of the sidebar selected tabs */
diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid
index 7cd6f6e5b..a7cc9e549 100644
--- a/themes/tiddlywiki/vanilla/base.tid
+++ b/themes/tiddlywiki/vanilla/base.tid
@@ -93,7 +93,6 @@ button:-moz-focusring, input:-moz-focusring, textarea:-moz-focusring, select:-mo
 html button {
 	line-height: 1.2;
 	color: <<colour button-foreground>>;
-	fill: <<colour button-foreground>>;
 	background: <<colour button-background>>;
 	border-color: <<colour button-border>>;
 	cursor: pointer;
@@ -104,10 +103,6 @@ button:disabled {
 	color: <<colour muted-foreground>>;
 }
 
-button:disabled svg {
-	fill: <<colour muted-foreground>>;
-}
-
 /*
 ** Basic element styles
 */
@@ -130,7 +125,7 @@ body.tc-body {
 	<<custom-background-datauri>>
 	color: <<colour foreground>>;
 	background-color: <<colour page-background>>;
-	fill: <<colour foreground>>;
+	fill: currentColor;
 }
 
 <<if-background-attachment """
@@ -575,7 +570,7 @@ a.tc-tiddlylink-external:hover {
 
 .tc-sidebar-tab-open .tc-btn-invisible.tc-btn-mini svg {
 	font-size: 0.7em;
-	fill: <<colour muted-foreground>>;
+	color: <<colour muted-foreground>>;
 }
 
 /*
@@ -608,7 +603,6 @@ button svg, button img, label svg, label img {
 	border: none;
 	cursor: pointer;
 	color: <<colour foreground>>;
-	fill: <<colour foreground>>;
 }
 
 button:disabled.tc-btn-invisible  {
@@ -634,10 +628,6 @@ html body.tc-body .tc-btn-boxed svg {
 	color: <<colour background>>;
 }
 
-html body.tc-body .tc-btn-boxed:hover svg {
-	fill: <<colour background>>;
-}
-
 .tc-btn-rounded {
 	font-size: 0.5em;
 	line-height: 2;
@@ -651,7 +641,7 @@ html body.tc-body .tc-btn-boxed:hover svg {
 
 html body.tc-body .tc-btn-rounded svg {
 	font-size: 1.6666em;
-	fill: <<colour background>>;
+	color: <<colour background>>;
 }
 
 .tc-btn-rounded:hover {
@@ -660,14 +650,10 @@ html body.tc-body .tc-btn-rounded svg {
 	color: <<colour muted-foreground>>;
 }
 
-html body.tc-body .tc-btn-rounded:hover svg {
-	fill: <<colour muted-foreground>>;
-}
-
 .tc-btn-icon svg {
 	height: 1em;
 	width: 1em;
-	fill: <<colour muted-foreground>>;
+	color: <<colour muted-foreground>>;
 }
 
 
@@ -691,7 +677,6 @@ html body.tc-body .tc-btn-rounded:hover svg {
 	margin: 4px 8px 4px 8px;
 	background: <<colour download-background>>;
 	color: <<colour download-foreground>>;
-	fill: <<colour download-foreground>>;
 	border: none;
 	border-radius: 2px;
 	font-size: 1.2em;
@@ -704,7 +689,6 @@ html body.tc-body .tc-btn-rounded:hover svg {
 	height: 2em;
 	width: 2em;
 	vertical-align: middle;
-	fill: <<colour download-foreground>>;
 }
 
 .tc-primary-btn {
@@ -717,7 +701,6 @@ html body.tc-body .tc-btn-rounded:hover svg {
 
 .tc-sidebar-lists button {
 	color: <<colour sidebar-button-foreground>>;
-	fill: <<colour sidebar-button-foreground>>;
 }
 
 .tc-sidebar-lists button.tc-btn-mini {
@@ -758,11 +741,11 @@ button svg.tc-image-button, button .tc-image-button img {
 
 .tc-unfold-banner svg, .tc-fold-banner svg {
 	height: 0.75em;
-	fill: <<colour tiddler-controls-foreground>>;
+	color: <<colour tiddler-controls-foreground>>;
 }
 
 .tc-unfold-banner:hover svg, .tc-fold-banner:hover svg {
-	fill: <<colour tiddler-controls-foreground-hover>>;
+	color: <<colour tiddler-controls-foreground-hover>>;
 }
 
 .tc-fold-banner {
@@ -917,11 +900,11 @@ button.tc-btn-invisible.tc-remove-tag-button {
 }
 
 .tc-topbar svg {
-	fill: <<colour muted-foreground>>;
+	color: <<colour muted-foreground>>;
 }
 
 .tc-topbar button:hover svg {
-	fill: <<colour foreground>>;
+	color: <<colour foreground>>;
 }
 
 @media (max-width: <<sidebarbreakpoint-minus-one>>) {
@@ -934,7 +917,6 @@ button.tc-btn-invisible.tc-remove-tag-button {
 
 .tc-sidebar-header {
 	color: <<colour sidebar-foreground>>;
-	fill: <<colour sidebar-foreground>>;
 }
 
 .tc-sidebar-header .tc-title a.tc-tiddlylink-resolves {
@@ -984,11 +966,11 @@ button.tc-btn-invisible.tc-remove-tag-button {
 }
 
 .tc-page-controls svg {
-	fill: <<colour sidebar-controls-foreground>>;
+	color: <<colour sidebar-controls-foreground>>;
 }
 
 .tc-page-controls button:hover svg, .tc-page-controls a:hover svg {
-	fill: <<colour sidebar-controls-foreground-hover>>;
+	color: <<colour sidebar-controls-foreground-hover>>;
 }
 
 .tc-sidebar-lists .tc-menu-list-item {
@@ -1274,7 +1256,7 @@ button.tc-btn-invisible.tc-remove-tag-button {
 
 .tc-tiddler-controls button svg, .tc-tiddler-controls button img,
 .tc-search button svg, .tc-search a svg {
-	fill: <<colour tiddler-controls-foreground>>;
+	color: <<colour tiddler-controls-foreground>>;
 }
 
 .tc-tiddler-controls button svg, .tc-tiddler-controls button img {
@@ -1289,12 +1271,12 @@ button.tc-btn-invisible.tc-remove-tag-button {
 
 .tc-tiddler-controls button.tc-selected svg,
 .tc-page-controls button.tc-selected svg  {
-	fill: <<colour tiddler-controls-foreground-selected>>;
+	color: <<colour tiddler-controls-foreground-selected>>;
 }
 
 .tc-tiddler-controls button.tc-btn-invisible:hover svg,
 .tc-search button:hover svg, .tc-search a:hover svg {
-	fill: <<colour tiddler-controls-foreground-hover>>;
+	color: <<colour tiddler-controls-foreground-hover>>;
 }
 
 @media print {
@@ -1422,7 +1404,6 @@ html body.tc-body.tc-single-tiddler-window {
 	vertical-align: middle;
 	background-color: <<colour tiddler-controls-foreground>>;
 	color: <<colour tiddler-controls-foreground-selected>>;
-	fill: <<colour tiddler-controls-foreground-selected>>;
 	border-radius: 4px;
 	padding: 3px;
 	margin: 2px 0 2px 4px;
@@ -1453,7 +1434,6 @@ html body.tc-body.tc-single-tiddler-window {
 
 .tc-editor-toolbar button:hover {
 	background-color: <<colour tiddler-controls-foreground-selected>>;
-	fill: <<colour background>>;
 	color: <<colour background>>;
 }
 
@@ -1534,43 +1514,43 @@ html body.tc-body.tc-single-tiddler-window {
 */
 
 .tc-page-controls svg.tc-image-new-button {
-	fill: <<colour toolbar-new-button>>;
+	color: <<colour toolbar-new-button>>;
 }
 
 .tc-page-controls svg.tc-image-options-button {
-	fill: <<colour toolbar-options-button>>;
+	color: <<colour toolbar-options-button>>;
 }
 
 .tc-page-controls svg.tc-image-save-button {
-	fill: <<colour toolbar-save-button>>;
+	color: <<colour toolbar-save-button>>;
 }
 
 .tc-tiddler-controls button svg.tc-image-info-button {
-	fill: <<colour toolbar-info-button>>;
+	color: <<colour toolbar-info-button>>;
 }
 
 .tc-tiddler-controls button svg.tc-image-edit-button {
-	fill: <<colour toolbar-edit-button>>;
+	color: <<colour toolbar-edit-button>>;
 }
 
 .tc-tiddler-controls button svg.tc-image-close-button {
-	fill: <<colour toolbar-close-button>>;
+	color: <<colour toolbar-close-button>>;
 }
 
 .tc-tiddler-controls button svg.tc-image-delete-button {
-	fill: <<colour toolbar-delete-button>>;
+	color: <<colour toolbar-delete-button>>;
 }
 
 .tc-tiddler-controls button svg.tc-image-cancel-button {
-	fill: <<colour toolbar-cancel-button>>;
+	color: <<colour toolbar-cancel-button>>;
 }
 
 .tc-tiddler-controls button svg.tc-image-done-button {
-	fill: <<colour toolbar-done-button>>;
+	color: <<colour toolbar-done-button>>;
 }
 
 .tc-page-controls svg.tc-image-layout-button {
-	fill: <<colour toolbar-options-button>>;
+	color: <<colour toolbar-options-button>>;
 }
 
 /*
@@ -1710,7 +1690,7 @@ html body.tc-body.tc-single-tiddler-window {
 .tc-edit-field-remove svg {
 	height: 1em;
 	width: 1em;
-	fill: <<colour muted-foreground>>;
+	color: <<colour muted-foreground>>;
 	vertical-align: middle;
 }
 
@@ -1824,7 +1804,7 @@ html body.tc-body.tc-single-tiddler-window {
 .tc-btn-dropdown svg, .tc-btn-dropdown img {
 	height: 1em;
 	width: 1em;
-	fill: <<colour muted-foreground>>;
+	color: <<colour muted-foreground>>;
 }
 
 .tc-drop-down-wrapper {
@@ -1847,15 +1827,15 @@ html body.tc-body.tc-single-tiddler-window {
 }
 
 .tc-drop-down button svg, .tc-drop-down a svg  {
-	fill: <<colour foreground>>;
+	color: <<colour foreground>>;
 }
 
 .tc-drop-down button:disabled svg {
-	fill: <<colour muted-foreground>>;
+	color: <<colour muted-foreground>>;
 }
 
 .tc-drop-down button.tc-btn-invisible:hover svg {
-	fill: <<colour background>>;
+	color: <<colour background>>;
 }
 
 .tc-drop-down .tc-drop-down-info {
@@ -2342,7 +2322,6 @@ html body.tc-body.tc-single-tiddler-window {
 .tc-manager-list-item-heading-selected {
 	font-weight: bold;
 	color: <<colour background>>;
-	fill: <<colour background>>;
 	background-color: <<colour foreground>>;
 }
 
@@ -2469,7 +2448,7 @@ html body.tc-body.tc-single-tiddler-window {
 }
 
 .tc-alert-toolbar svg {
-	fill: <<colour alert-muted-foreground>>;
+	color: <<colour alert-muted-foreground>>;
 }
 
 .tc-alert-subtitle {
@@ -2526,14 +2505,12 @@ html body.tc-body.tc-single-tiddler-window {
 	border-bottom: none;
 	background: <<colour dirty-indicator>>;
 	color: <<colour background>>;
-	fill: <<colour background>>;
 }
 
 .tc-drafts-list a:hover {
 	text-decoration: none;
 	background: <<colour foreground>>;
 	color: <<colour background>>;
-	fill: <<colour background>>;
 }
 
 .tc-drafts-list a svg {
@@ -2562,13 +2539,16 @@ html body.tc-body.tc-single-tiddler-window {
 	display: flex;
 	text-shadow: none;
 	border: 1px solid <<colour muted-foreground>>;
-	fill: <<colour muted-foreground>>;
 	background-color: <<colour background>>;
 	margin: 0.5em 0 0.5em 0;
 	padding: 4px;
 	align-items: center;
 }
 
+.tc-plugin-info svg {
+	color: <<colour muted-foreground>>;
+}
+
 .tc-sidebar-lists a.tc-tiddlylink.tc-plugin-info {
 	color: <<colour tiddler-link-foreground>>;
 }
@@ -2610,11 +2590,14 @@ a.tc-tiddlylink.tc-plugin-info:hover {
 	text-decoration: none;
 	background-color: <<colour primary>>;
 	color: <<colour background>>;
-	fill: <<colour foreground>>;
+}
+
+a.tc-tiddlylink.tc-plugin-info:hover svg {
+	color: <<colour foreground>>;
 }
 
 a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk > svg {
-	fill: <<colour background>>;
+	color: <<colour background>>;
 }
 
 a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-stability {
@@ -2738,7 +2721,6 @@ a.tc-tiddlylink.tc-plugin-info:hover > .tc-plugin-info-chunk .tc-plugin-info-sta
 	font-weight: bold;
 	background: green;
 	color: white;
-	fill: white;
 	border-radius: 4px;
 	padding: 3px;
 }
@@ -2927,7 +2909,7 @@ input.tc-palette-manager-colour-input {
 	width: 0.7em;
 	height: 0.7em;
 	vertical-align: middle;
-	fill: <<colour sidebar-foreground>>;
+	color: <<colour sidebar-foreground>>;
 }
 
 .tc-table-of-contents ol {
@@ -3050,7 +3032,6 @@ html body.tc-dirty svg.tc-image-save-button-dynamic .tc-image-save-button-dynami
 }
 
 html body.tc-dirty span.tc-dirty-indicator, html body.tc-dirty span.tc-dirty-indicator svg {
-	fill: <<colour dirty-indicator>>;
 	color: <<colour dirty-indicator>>;
 }
 
@@ -3137,7 +3118,7 @@ html body.tc-dirty span.tc-dirty-indicator, html body.tc-dirty span.tc-dirty-ind
 
 .tc-thumbnail-wrapper:hover .tc-thumbnail-icon svg,
 .tc-thumbnail-wrapper:hover .tc-thumbnail-icon img {
-	fill: #fff;
+	color: #fff;
 	<<filter "drop-shadow(3px 3px 4px rgba(0,0,0,0.6))">>
 }
 
@@ -3244,7 +3225,7 @@ html body.tc-dirty span.tc-dirty-indicator, html body.tc-dirty span.tc-dirty-ind
 }
 
 .tc-tree svg {
-	fill: #acacac;
+	color: #acacac;
 }
 
 .tc-tree span svg {
@@ -3361,7 +3342,6 @@ span.tc-translink > a:first-child {
 }
 
 .tc-test-case-result-icon {
-	fill: #fff;
 	padding: 0.25em;
 	display: inline-block;
 	line-height: 0;
@@ -3370,6 +3350,10 @@ span.tc-translink > a:first-child {
 	margin-right: 0.25em;
 }
 
+.tc-test-case-result-icon svg {
+	color: #fff;
+}
+
 .tc-test-case-result-icon-pass {
 	background-color: green;
 }
@@ -3403,7 +3387,7 @@ span.tc-translink > a:first-child {
 }
 
 .tc-test-case-toolbar svg {
-	fill: <<colour tiddler-controls-foreground>>;
+	color: <<colour tiddler-controls-foreground>>;
 }
 
 .tc-test-case-toolbar .tc-drop-down {