Give modals the dark app theme and close them on outside click

- Restyle the shared modal styles to the dark app palette with orange accents
- Remove light-theme overrides in Search, Sync and Settings modals
- Add outside-click close and fade transition to the Sync modal
- Use @click.self for outside-click close in all modals
- Let tall modals scroll instead of being cut off
- Darken the mobile menu to match

src/components/items/settingsModal.vue

@@ -1,7 +1,7 @@
 <template>
     <!-- Round Settings, Stop after current, Don't hide title -->
     <transition name="modalAni">
-        <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+        <div v-if="show" class="modal" @click.self="closeModal">
             <div class="modalContainer">
                 <div class="modalWrapper">
                     <img
@@ -98,11 +98,6 @@ export default {
         openModal() {
             this.show = true;
         },
-        checkIfClickShouldCloseModal(event) {
-            if (event.target.classList[0] === "modal") {
-                this.closeModal();
-            }
-        },
         updateOptionHideTitle() {
             if (this.checkboxHideTitle) {
                 this.$store.dispatch("updateHideNextTitle", true);
@@ -165,6 +160,7 @@ export default {
     margin-top: 20px;
 }
 .checkboxDiv input {
+    accent-color: #ff9c00;
     transform: scale(1.3);
 }
 .checkboxDiv label {
@@ -181,9 +177,6 @@ export default {
     display: flex;
     width: 50px;
     height: 33px;
-    background: rgb(16, 99, 194);
-    color: rgb(235, 235, 235);
-    border-color: rgb(161, 161, 161);
     justify-content: center;
     align-items: center;
     line-height: 0;