diff --git a/include/app/SvgPort.hpp b/include/app/SvgPort.hpp
index 12643986..c3848880 100644
--- a/include/app/SvgPort.hpp
+++ b/include/app/SvgPort.hpp
@@ -4,6 +4,7 @@
 #include <widget/FramebufferWidget.hpp>
 #include <widget/SvgWidget.hpp>
 #include <app/CircularShadow.hpp>
+#include <settings.hpp>
 
 
 namespace rack {
@@ -26,5 +27,22 @@ struct SvgPort : PortWidget {
 DEPRECATED typedef SvgPort SVGPort;
 
 
+struct ThemedSvgPort : SvgPort {
+	std::shared_ptr<window::Svg> lightSvg;
+	std::shared_ptr<window::Svg> darkSvg;
+
+	void setSvg(std::shared_ptr<window::Svg> lightSvg, std::shared_ptr<window::Svg> darkSvg) {
+		this->lightSvg = lightSvg;
+		this->darkSvg = darkSvg;
+		SvgPort::setSvg(settings::preferDarkPanels ? darkSvg : lightSvg);
+	}
+
+	void step() override {
+		SvgPort::setSvg(settings::preferDarkPanels ? darkSvg : lightSvg);
+		SvgPort::step();
+	}
+};
+
+
 } // namespace app
 } // namespace rack
diff --git a/include/componentlibrary.hpp b/include/componentlibrary.hpp
index 2ac524c5..91eebc18 100644
--- a/include/componentlibrary.hpp
+++ b/include/componentlibrary.hpp
@@ -785,6 +785,12 @@ struct PJ301MPort : app::SvgPort {
 	}
 };
 
+struct ThemedPJ301MPort : app::ThemedSvgPort {
+	ThemedPJ301MPort() {
+		setSvg(Svg::load(asset::system("res/ComponentLibrary/PJ301M.svg")), Svg::load(asset::system("res/ComponentLibrary/PJ301M-dark.svg")));
+	}
+};
+
 struct PJ3410Port : app::SvgPort {
 	PJ3410Port() {
 		setSvg(Svg::load(asset::system("res/ComponentLibrary/PJ3410.svg")));
diff --git a/res/ComponentLibrary/PJ301M-dark.svg b/res/ComponentLibrary/PJ301M-dark.svg
new file mode 100644
index 00000000..a042c300
--- /dev/null
+++ b/res/ComponentLibrary/PJ301M-dark.svg
@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.7.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.0"
+	 id="svg15246" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:cc="http://creativecommons.org/ns#"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 23.7 23.7"
+	 style="enable-background:new 0 0 23.7 23.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:url(#SVGID_00000143595121141328890170000015544267681853607580_);}
+	.st2{fill:#DFDFDF;}
+	.st3{fill:url(#SVGID_00000153686635385711343660000000100298911026559105_);}
+	.st4{fill:url(#SVGID_00000164481726192204381340000016904044868781532589_);}
+	.st5{fill:#1F1F1F;}
+	.st6{opacity:0.28;fill:#414141;}
+	.st7{fill:url(#SVGID_00000135674633225231839910000013725666170367877292_);}
+	.st8{fill:#333333;}
+	.st9{opacity:0.43;}
+	.st10{fill:#414141;}
+	.st11{fill:url(#SVGID_00000132090292527043220160000011320261679298806454_);}
+	.st12{fill:#131313;}
+</style>
+<sodipodi:namedview  bordercolor="#666666" borderopacity="1.0" fit-margin-bottom="0" fit-margin-left="0" fit-margin-right="0" fit-margin-top="0" id="base" inkscape:current-layer="layer1" inkscape:cx="8.7220802" inkscape:cy="-10.120793" inkscape:document-rotation="0" inkscape:document-units="mm" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:window-height="1361" inkscape:window-maximized="1" inkscape:window-width="2560" inkscape:window-x="2551" inkscape:window-y="-9" inkscape:zoom="11.2" pagecolor="#ffffff" showgrid="false" units="px">
+	</sodipodi:namedview>
+<g>
+	<g>
+		<g>
+			<g>
+				<g>
+					
+						<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-602.2439" y1="1785.6837" x2="-578.869" y2="1785.6837" gradientTransform="matrix(0 1 1 0 -1773.8412 602.399)">
+						<stop  offset="0" style="stop-color:#818080"/>
+						<stop  offset="1" style="stop-color:#575757"/>
+					</linearGradient>
+					<path class="st0" d="M11.8,23.5c-6.4,0-11.7-5.2-11.7-11.7c0-6.4,5.2-11.7,11.7-11.7s11.7,5.2,11.7,11.7
+						C23.5,18.3,18.3,23.5,11.8,23.5z"/>
+				</g>
+				
+					<linearGradient id="SVGID_00000150064813175471433630000013087535228023727016_" gradientUnits="userSpaceOnUse" x1="1061.9836" y1="-4091.6826" x2="1084.1885" y2="-4091.6826" gradientTransform="matrix(0 1 -1 0 -4079.8398 -1061.2317)">
+					<stop  offset="5.590000e-03" style="stop-color:#FFFFFF"/>
+					<stop  offset="1" style="stop-color:#7B7B7B"/>
+				</linearGradient>
+				<circle style="fill:url(#SVGID_00000150064813175471433630000013087535228023727016_);" cx="11.8" cy="11.9" r="11.1"/>
+				<circle class="st2" cx="11.8" cy="11.9" r="10.4"/>
+				
+					<linearGradient id="SVGID_00000074405891063542966860000003380231315805516709_" gradientUnits="userSpaceOnUse" x1="58.8544" y1="-54.5555" x2="58.8544" y2="-51.7828" gradientTransform="matrix(1 0 0 -1 -47.0062 -41.3266)">
+					<stop  offset="0" style="stop-color:#FFFAFC"/>
+					<stop  offset="1" style="stop-color:#808080"/>
+				</linearGradient>
+				<path style="fill:url(#SVGID_00000074405891063542966860000003380231315805516709_);" d="M1.5,10.5l-0.4,0.4
+					c-0.4,0.6-0.4,1.4,0,2l0.4,0.4l20.7,0l0.4-0.4c0.5-0.6,0.5-1.4,0-2l-0.4-0.4L1.5,10.5z"/>
+				
+					<linearGradient id="SVGID_00000020384474552358081010000005731576089679424641_" gradientUnits="userSpaceOnUse" x1="-1240.7072" y1="-381.89" x2="-1223.2302" y2="-381.89" gradientTransform="matrix(0 -1 -1 0 -370.0472 -1220.1261)">
+					<stop  offset="0" style="stop-color:#AFADAD"/>
+					<stop  offset="1" style="stop-color:#616262"/>
+				</linearGradient>
+				<circle style="fill:url(#SVGID_00000020384474552358081010000005731576089679424641_);" cx="11.8" cy="11.8" r="8.7"/>
+				<circle class="st5" cx="11.8" cy="11.8" r="8.2"/>
+				<path class="st6" d="M11.8,4.2c4.2,0,7.6,3.8,7.6,8.4s-3.4,9.3-7.6,9.3s-7.6-4.6-7.6-9.3S7.6,4.2,11.8,4.2z"/>
+				
+					<linearGradient id="SVGID_00000111898484672090274350000005773246382628789403_" gradientUnits="userSpaceOnUse" x1="-1884.8562" y1="21.5682" x2="-1884.8562" y2="6.3058" gradientTransform="matrix(-1 0 0 -1 -1873.0134 25.7797)">
+					<stop  offset="5.586592e-03" style="stop-color:#707171"/>
+					<stop  offset="1" style="stop-color:#181717"/>
+				</linearGradient>
+				<circle style="fill:url(#SVGID_00000111898484672090274350000005773246382628789403_);" cx="11.8" cy="11.8" r="7.6"/>
+				<circle class="st8" cx="11.8" cy="11.8" r="6.8"/>
+				<g class="st9">
+					<path class="st10" d="M11.8,4.7c4.2,0,7.6,3.3,7.6,7.3c0,0,0-0.1,0-0.1c0-4.2-3.4-7.6-7.6-7.6s-7.6,3.4-7.6,7.6
+						c0,0,0,0.1,0,0.1C4.3,7.9,7.7,4.7,11.8,4.7z"/>
+					<path class="st6" d="M4.2,12c0,0,0,0.1,0,0.1c0,4.1,3.4,7.4,7.6,7.4C7.7,19.5,4.3,16.1,4.2,12z"/>
+					<path class="st6" d="M11.8,19.5c4.2,0,7.6-3.3,7.6-7.4c0,0,0-0.1,0-0.1C19.4,16.1,16,19.5,11.8,19.5z"/>
+				</g>
+				
+					<linearGradient id="SVGID_00000077291820889386670100000018050064865590575539_" gradientUnits="userSpaceOnUse" x1="-1884.8562" y1="8.7661" x2="-1884.8562" y2="19.1079" gradientTransform="matrix(-1 0 0 -1 -1873.0134 25.7797)">
+					<stop  offset="0" style="stop-color:#595A5A"/>
+					<stop  offset="1" style="stop-color:#181717"/>
+				</linearGradient>
+				<circle style="fill:url(#SVGID_00000077291820889386670100000018050064865590575539_);" cx="11.8" cy="11.8" r="5.2"/>
+				<circle cx="11.8" cy="11.8" r="4.6"/>
+				<path class="st12" d="M11.8,11.8"/>
+			</g>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+</svg>