appearance changes in options page

src/entry-points/options/App.svelte

@@ -119,13 +119,13 @@ along with Jump Cutter Browser Extension.  If not, see <https://www.gnu.org/lice
   const onPlaybackRateChangeFromOtherScriptsOptions:
     Array<{ v: Settings['onPlaybackRateChangeFromOtherScripts'], l: string }>
     = [
-      { v: 'updateSoundedSpeed', l: `= ${getMessage('updateSoundedSpeedWheneverItChangesOnWebsite')}` },
-      { v: 'prevent', l: `✋ ${getMessage('preventOtherScriptsFromChangingPlaybackRate')}` },
-      { v: 'doNothing', l: `🧘 ${getMessage('doNothingWheneverPlaybackRateChanges')}` },
+      { v: 'updateSoundedSpeed', l: `${getMessage('updateSoundedSpeedWheneverItChangesOnWebsite')}` },
+      { v: 'prevent', l: `${getMessage('preventOtherScriptsFromChangingPlaybackRate')}` },
+      { v: 'doNothing', l: `${getMessage('doNothingWheneverPlaybackRateChanges')}` },
     ];
   const silenceSpeedSpecificationMethodOptions: Array<{ v: Settings['silenceSpeedSpecificationMethod'], l: string }> = [
-    { v: 'relativeToSoundedSpeed', l: `✖️ ${getMessage('relativeToSounded')}` },
-    { v: 'absolute', l: `= ${getMessage('absolute')}${getMessage('absoluteSilenceSpeedClarification')}` },
+    { v: 'relativeToSoundedSpeed', l: `${getMessage('relativeToSounded')}` },
+    { v: 'absolute', l: `${getMessage('absolute')}${getMessage('absoluteSilenceSpeedClarification')}` },
   ]
   const badgeWhatSettingToDisplayByDefaultOptions: Array<{ v: Settings['badgeWhatSettingToDisplayByDefault'], l: string }> = [
     { v: 'none', l: `❌ ${getMessage('none')}`, },
@@ -239,7 +239,7 @@ along with Jump Cutter Browser Extension.  If not, see <https://www.gnu.org/lice
       <section>
         <h3>{getMessage('general')}</h3>
         <fieldset>
-          <legend>▶️👀 {getMessage('wheneverPlaybackRateChangesFromOtherScripts')}</legend>
+          <legend><b>{getMessage('wheneverPlaybackRateChangesFromOtherScripts')}</b></legend>
           {#each onPlaybackRateChangeFromOtherScriptsOptions as { v, l }}
             <input
               type="radio"
@@ -273,11 +273,11 @@ along with Jump Cutter Browser Extension.  If not, see <https://www.gnu.org/lice
           </select>
         </InputFieldBase>
         <CheckboxField
-          label="🔇❌ {getMessage('omitMutedElements')}"
+          label="{getMessage('omitMutedElements')}"
           bind:checked={settings.omitMutedElements}
         />
         <InputFieldBase
-          label="🙊= {getMessage('silenceSpeedSpecificationMethod')}"
+          label="{getMessage('silenceSpeedSpecificationMethod')}"
           let:id
         >
           <select
@@ -294,7 +294,7 @@ along with Jump Cutter Browser Extension.  If not, see <https://www.gnu.org/lice
           <!-- When `browserHasAudioDesyncBug === false`, the value
           of this setting has no effect, so there is no point in showing it -->
           <CheckboxField
-            label="👫 {getMessage('enableDesyncCorrection')}"
+            label="{getMessage('enableDesyncCorrection')}"
             bind:checked={settings.enableDesyncCorrection}
           />
         {/if}
@@ -303,7 +303,7 @@ along with Jump Cutter Browser Extension.  If not, see <https://www.gnu.org/lice
         but some languages still do, so we need to keep all 3 substitutions
         until that changes. -->
         <CheckboxField
-          label="🔄 {getMessage('useSeparateMarginSettingsForDifferentAlgorithms', [
+          label="{getMessage('useSeparateMarginSettingsForDifferentAlgorithms', [
             getMessage('marginBefore'),
             getMessage('marginAfter'),
             getMessage('useExperimentalAlgorithm'),
@@ -679,6 +679,13 @@ However, in Gecko the whole page is stretched, so the scroll is outside of the d
 </div>
 
 <style>
+@media (prefers-color-scheme: dark) {
+  :global(body) {
+    background: #111;
+    color: #ddd;
+  }
+}
+
 :global(body) {
   margin: 0;
   --main-padding: 1rem;

src/entry-points/options/components/HotkeysTable.svelte

@@ -119,7 +119,9 @@ along with Jump Cutter Browser Extension.  If not, see <https://www.gnu.org/lice
               type="button"
               on:click={e => removeBinding(bindingInd)}
               aria-label="{getMessage('removeBinding')}"
-            >🗑️</button>
+            >
+              <img src="../imgs/trash.svg" alt="{getMessage('removeBinding')}">
+            </button>
           </td>
         </tr>
       {/each}
@@ -129,5 +131,37 @@ along with Jump Cutter Browser Extension.  If not, see <https://www.gnu.org/lice
     type="button"
     on:click={addNewBinding}
     aria-label="{getMessage('addBinding')}"
-  >➕</button>
+  >
+    <img src="../imgs/plus.svg" alt="{getMessage('addBinding')}">
+  </button>
 </div>
+
+<style>
+@media (prefers-color-scheme: dark) {
+  :root {
+    --btn-bg-color: #333;
+    --btn-hover-bg-color: #555;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --btn-bg-color: #ddd;
+    --btn-hover-bg-color: #bbb;
+  }
+}
+
+button {
+  border: none;
+  border-radius: 5px;
+  background-color: var(--btn-bg-color);
+}
+
+button img {
+  vertical-align: middle;
+}
+
+button:hover:enabled {
+  background-color: var(--btn-hover-bg-color);
+}
+</style>