Fix incorrectly colored icons in create collection dialog (#3872)

chrome/content/zotero/newCollectionDialog.js

@@ -46,9 +46,18 @@ var Zotero_New_Collection_Dialog = {
 	_updateMenu() {
 		let createInField = document.querySelector('#create-in');
 		let menupopup = createInField.firstElementChild;
+		let id = menupopup.id;
 		// Fascinatingly, clearing the children of the menupopup isn't enough here.
 		// We have to completely recreate it or it will no longer be willing to open.
 		menupopup.replaceWith(menupopup = document.createXULElement('menupopup'));
+		menupopup.id = id;
+
+		let style = document.createElement('style');
+		style.innerHTML = `image {
+			-moz-context-properties: fill, fill-opacity;
+			fill: var(--fill-secondary);
+		 }`;
+		createInField.shadowRoot.appendChild(style);
 
 		let createdNode = Zotero.Utilities.Internal.createMenuForTarget(
 			Zotero.Libraries.get(this._libraryID),

chrome/content/zotero/newCollectionDialog.xhtml

@@ -65,7 +65,7 @@
 		<vbox>
 			<label data-l10n-id="new-collection-create-in" control="create-in"/>
 			<menulist id="create-in" native="true">
-				<menupopup/>
+				<menupopup id="zotero-new-collection-menu" />
 			</menulist>
 		</vbox>
 	</dialog>

scss/components/_menu.scss

@@ -80,3 +80,10 @@ $menu-icons: (
 #zotero-collectionmenu, #zotero-itemmenu {
 	@include macOS-hide-menu-icons;
 }
+
+#zotero-new-collection-menu {
+	image {
+		-moz-context-properties: fill, fill-opacity;
+		fill: var(--fill-secondary);
+	}
+}