Dark mode toggle

[ArchOwlen]

I use the Dark Reader extension to make websites dark, and it becomes hard to read when both extensions are enabled

(Small screenshot for privacy)
(For those who are using a dark theme on github: there is a dark border around the white box in the screenshot)

[jasontbradshaw]

Dark mode isn't something I'm personally interested in, however if there was a low effort/maintenance way to support it passively (e.g. using different classes from Amazon's styles), I'd be open to a PR.

My main concern is that I don't want to do something specific to a particular extension since I don't want to commit to chasing cross-extension compatibility forever.

As for implementation details, essentially this extension uses Amazon's own class names to style most things (e.g.

amazon-wish-list-total/main.js

Lines 334 to 345 in 98a23f0

	<div id="${elementId}" class="${loadingClass}">
	<span class="total-text">${LOCALE.subtotal_text(attrs.total_count)}</span>:
	<span class="total-price a-color-price">
	${localeTotal}
	</span>
	<svg class="spinner" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
	<circle cx="50" cy="50" fill="none" stroke-linecap="round" r="40" stroke-width="10" stroke="#dddddd" stroke-dasharray="62.83185307179586 62.83185307179586">
	<animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform>
	</circle>
	</svg>
	</div>

), with the exception of

amazon-wish-list-total/main.css

Line 31 in 98a23f0

background-color: white;

.

If there's a way to get the "white opaque background" style by adding one of Amazon's class names to the appropriate element, it's quite possible that this could be implemented along the guidelines I suggested above, since presumably the dark mode extension would then override the style for that class make it "dark" (though as I'm not familiar with that extension so it may not work this way).