Add widget styles for options/popup dark theme

ext/src/ui/dark-widgets.css

@@ -0,0 +1,86 @@
+button,
+.select-wrapper,
+input {
+    background-color: var(--grey-60);
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    border-radius: 3px;
+    color: white;
+}
+button:not(:disabled):hover,
+.select-wrapper:not(:disabled):hover,
+input[type="checkbox"]:not(:disabled):hover {
+    background-color: var(--grey-50);
+}
+button:not(:disabled):hover:active,
+.select-wrapper:not(:disabled):hover:active,
+input[type="checkbox"]:not(:disabled):hover:active {
+    background-color: rgb(94, 94, 99);
+}
+
+button:disabled,
+input:disabled {
+    opacity: 0.35;
+}
+
+input[type="text"],
+input[type="number"] {
+    padding: 2px;
+}
+
+input[type="checkbox"] {
+    -moz-appearance: none;
+}
+input[type="checkbox"]:checked {
+    background-color: var(--blue-60);
+    padding: 2px;
+    background-clip: content-box;
+}
+input[type="checkbox"]:not(:disabled):checked:hover {
+    background-color: var(--blue-50);
+}
+input[type="checkbox"]:not(:disabled):checked:hover:active {
+    background-color: var(--blue-70);
+}
+
+button:default {
+    background-color: var(--blue-60);
+    color: white !important;
+}
+
+button:default:hover {
+    background-color: var(--blue-50);
+}
+button:default:hover:active {
+    background-color: var(--blue-70);
+}
+
+.select-wrapper {
+    --arrow-width: 20px;
+    position: relative;
+    display: inline-block;
+}
+.select-wrapper::after {
+    align-items: center;
+    content: "▼";
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: var(--arrow-width);
+}
+select {
+    -moz-appearance: none;
+    background: inherit;
+    border: initial;
+    color: inherit;
+    padding-right: var(--arrow-width);
+}
+option {
+    color: white !important;
+}
+option:disabled {
+    color: rgba(255, 255, 255, 0.25) !important;
+}

ext/src/ui/options/index.html

@@ -4,6 +4,7 @@
         <meta charset="utf-8">
 
         <link rel="stylesheet" href="../photon-colors.css">
+        <link rel="stylesheet" href="../dark-widgets.css" media="(prefers-color-scheme: dark)">
         <link rel="stylesheet" href="styles/index.css">
 
         <script src="bundle.js" defer></script>

ext/src/ui/options/index.tsx

@@ -324,16 +324,18 @@ class OptionsApp extends Component<{}, OptionsAppState> {
                                     { _("optionsReceiverSelectorType") }
                                 </div>
                                 <div className="option__control">
-                                    <select name="receiverSelectorType"
-                                            value={ this.state.options?.receiverSelectorType }
-                                            onChange={ this.handleReceiverSelectorTypeChange }>
-                                        <option value={ ReceiverSelectorType.Popup }>
-                                            { _("optionsReceiverSelectorTypeBrowser") }
-                                        </option>
-                                        <option value={ ReceiverSelectorType.Native }>
-                                            { _("optionsReceiverSelectorTypeNative") }
-                                        </option>
-                                    </select>
+                                    <div className="select-wrapper">
+                                        <select name="receiverSelectorType"
+                                                value={ this.state.options?.receiverSelectorType }
+                                                onChange={ this.handleReceiverSelectorTypeChange }>
+                                            <option value={ ReceiverSelectorType.Popup }>
+                                                { _("optionsReceiverSelectorTypeBrowser") }
+                                            </option>
+                                            <option value={ ReceiverSelectorType.Native }>
+                                                { _("optionsReceiverSelectorTypeNative") }
+                                            </option>
+                                        </select>
+                                    </div>
                                 </div>
                             </label> }
 

ext/src/ui/popup/index.html

@@ -4,6 +4,7 @@
         <meta charset="utf-8">
 
         <link rel="stylesheet" href="../photon-colors.css">
+        <link rel="stylesheet" href="../dark-widgets.css" media="(prefers-color-scheme: dark)">
         <link rel="stylesheet" href="styles/index.css">
 
         <script src="bundle.js" defer></script>

ext/src/ui/popup/index.tsx

@@ -139,36 +139,38 @@ class PopupApp extends Component<{}, PopupAppState> {
                     <div className="media-select__label-cast">
                         { _("popupMediaSelectCastLabel") }
                     </div>
-                    <select value={ this.state.mediaType }
-                            onChange={ this.onSelectChange }
-                            className="media-select__dropdown">
-                        <option value={ ReceiverSelectorMediaType.App }
-                                disabled={ !(this.state.availableMediaTypes
-                                        & ReceiverSelectorMediaType.App) }>
-                            { (this.state.requestedAppId && knownApps[this.state.requestedAppId]?.name)
-                                        ?? _("popupMediaTypeApp") }
-                        </option>
-                        <option value={ ReceiverSelectorMediaType.Tab }
-                                disabled={ !(this.state.availableMediaTypes
-                                        & ReceiverSelectorMediaType.Tab) }>
-                            { _("popupMediaTypeTab") }
-                        </option>
-                        <option value={ ReceiverSelectorMediaType.Screen }
-                                disabled={ !(this.state.availableMediaTypes
-                                        & ReceiverSelectorMediaType.Screen) }>
-                            { _("popupMediaTypeScreen") }
-                        </option>
-                        <option disabled>
-                            ─────
-                        </option>
-                        <option value={ ReceiverSelectorMediaType.File }
-                                disabled={ !(this.state.availableMediaTypes
-                                        & ReceiverSelectorMediaType.File) }>
-                            { this.state.filePath
-                                ? truncatedFileName!
-                                : _("popupMediaTypeFile") }
-                        </option>
-                    </select>
+                    <div className="select-wrapper">
+                        <select value={ this.state.mediaType }
+                                onChange={ this.onSelectChange }
+                                className="media-select__dropdown">
+                            <option value={ ReceiverSelectorMediaType.App }
+                                    disabled={ !(this.state.availableMediaTypes
+                                            & ReceiverSelectorMediaType.App) }>
+                                { (this.state.requestedAppId && knownApps[this.state.requestedAppId]?.name)
+                                            ?? _("popupMediaTypeApp") }
+                            </option>
+                            <option value={ ReceiverSelectorMediaType.Tab }
+                                    disabled={ !(this.state.availableMediaTypes
+                                            & ReceiverSelectorMediaType.Tab) }>
+                                { _("popupMediaTypeTab") }
+                            </option>
+                            <option value={ ReceiverSelectorMediaType.Screen }
+                                    disabled={ !(this.state.availableMediaTypes
+                                            & ReceiverSelectorMediaType.Screen) }>
+                                { _("popupMediaTypeScreen") }
+                            </option>
+                            <option disabled>
+                                ─────
+                            </option>
+                            <option value={ ReceiverSelectorMediaType.File }
+                                    disabled={ !(this.state.availableMediaTypes
+                                            & ReceiverSelectorMediaType.File) }>
+                                { this.state.filePath
+                                    ? truncatedFileName!
+                                    : _("popupMediaTypeFile") }
+                            </option>
+                        </select>
+                    </div>
                     <div className="media-select__label-to">
                         { _("popupMediaSelectToLabel") }
                     </div>

ext/src/ui/popup/styles/index.css

@@ -7,7 +7,7 @@ body {
 
 @media (prefers-color-scheme: dark) {
     body {
-        background: var(--grey-70) !important;
+        background: var(--grey-80) !important;
         color: white !important;
     }
     .media-select {
@@ -19,7 +19,9 @@ body {
 }
 
 .media-select {
+    align-items: center;
     border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+    display: flex;
     margin: 0 1em;
     padding: 0.75em 0;
 }