Frontend: Refactor styles and add Chrome theme

Signed-off-by: Michael Mayer <michael@photoprism.app>

frontend/package-lock.json

@@ -2584,9 +2584,9 @@
       }
     },
     "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
-      "version": "3.4.2",
+      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-      "integrity": "sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
@@ -2603,9 +2603,9 @@
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "2.1.1",
+      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.2.tgz",
-      "integrity": "sha512-9t7ZA7NGGK8ckelF0PQCfcxIUzs1Md5rrO6U/c+FIQNanea5UZC0wqKXH4vHBccmu4ZJgZ2idtPeW7+Q2npOEA==",
+      "integrity": "sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==",
       "dependencies": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
@@ -2666,9 +2666,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.46.0",
+      "version": "8.47.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.46.0.tgz",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.47.0.tgz",
-      "integrity": "sha512-a8TLtmPi8xzPkCbp/OGFUo5yhRkHM2Ko9kOWP4znJr0WAhWyThaw3PnwX4vOTWOAMsV2uRt32PPDcEz63esSaA==",
+      "integrity": "sha512-P6omY1zv5MItm93kLM8s2vr1HICJH8v0dvddDhysbIuZ+vcjOHg5Zbkf1mTkcmi2JA9oBG2anOkRnW8WJTS8Og==",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
@@ -3120,9 +3120,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "20.4.9",
+      "version": "20.5.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.9.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.0.tgz",
-      "integrity": "sha512-8e2HYcg7ohnTUbHk8focoklEQYvemQmu9M/f43DZVx43kHn0tE3BY/6gSDxS7k0SprtS0NHvj+L80cGLnoOUcQ=="
+      "integrity": "sha512-Mgq7eCtoTjT89FqNoTzzXg2XvCi5VMhRV6+I2aYanc6kQCBImeNaAYRs/DyoVqk1YEUJK5gN9VO7HRIdz4Wo3Q=="
     },
     "node_modules/@types/pbf": {
       "version": "3.0.2",
@@ -3911,9 +3911,9 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.14",
+      "version": "10.4.15",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.15.tgz",
-      "integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==",
+      "integrity": "sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==",
       "funding": [
         {
           "type": "opencollective",
@@ -3922,11 +3922,15 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
-        "browserslist": "^4.21.5",
+        "browserslist": "^4.21.10",
-        "caniuse-lite": "^1.0.30001464",
+        "caniuse-lite": "^1.0.30001520",
         "fraction.js": "^4.2.0",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
@@ -4400,9 +4404,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001519",
+      "version": "1.0.30001520",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001520.tgz",
-      "integrity": "sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==",
+      "integrity": "sha512-tahF5O9EiiTzwTUqAeFjIZbn4Dnqxzz7ktrgGlMYNLH43Ul26IgTMH/zvL3DG0lZxBYnlT04axvInszUsZULdA==",
       "funding": [
         {
           "type": "opencollective",
@@ -5834,14 +5838,14 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.46.0",
+      "version": "8.47.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.46.0.tgz",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.47.0.tgz",
-      "integrity": "sha512-cIO74PvbW0qU8e0mIvk5IV3ToWdCq5FYG6gWPHHkx6gNdjlbAYvtfHmlCMXxjcoVaIdwy/IAt3+mDkZkfvb2Dg==",
+      "integrity": "sha512-spUQWrdPt+pRVP1TTJLmfRNJJHHZryFmptzcafwSvHsceV81djHOdnEeDmkdotZyLNjDhrOasNK8nikkoG1O8Q==",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
-        "@eslint/eslintrc": "^2.1.1",
+        "@eslint/eslintrc": "^2.1.2",
-        "@eslint/js": "^8.46.0",
+        "@eslint/js": "^8.47.0",
         "@humanwhocodes/config-array": "^0.11.10",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
@@ -5852,7 +5856,7 @@
         "doctrine": "^3.0.0",
         "escape-string-regexp": "^4.0.0",
         "eslint-scope": "^7.2.2",
-        "eslint-visitor-keys": "^3.4.2",
+        "eslint-visitor-keys": "^3.4.3",
         "espree": "^9.6.1",
         "esquery": "^1.4.2",
         "esutils": "^2.0.2",
@@ -6579,9 +6583,9 @@
       }
     },
     "node_modules/eslint/node_modules/eslint-visitor-keys": {
-      "version": "3.4.2",
+      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-      "integrity": "sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
@@ -6759,9 +6763,9 @@
       }
     },
     "node_modules/espree/node_modules/eslint-visitor-keys": {
-      "version": "3.4.2",
+      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-      "integrity": "sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
@@ -13918,9 +13922,9 @@
       }
     },
     "node_modules/vue-eslint-parser/node_modules/eslint-visitor-keys": {
-      "version": "3.4.2",
+      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-      "integrity": "sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },

frontend/src/component/navigation.vue

@@ -65,7 +65,7 @@
         </v-list>
       </v-toolbar>
 
-      <v-list class="pt-3 p-flex-menu">
+      <v-list class="pt-3 p-flex-menu navigation-menu">
         <v-list-tile v-if="isMini && !isRestricted" class="nav-expand" @click.stop="toggleIsMini()">
           <v-list-tile-action :title="$gettext('Expand')">
             <v-icon v-if="!rtl">chevron_right</v-icon>

frontend/src/css/logs.css

@@ -1,3 +1,4 @@
+/* Event Logs */
 
 #photoprism .p-logs {
     color: white;

frontend/src/css/maps.css

@@ -1,3 +1,5 @@
+/* Maps & Places */
+
 #photoprism .map-control {
     position: absolute;
     background: transparent;

frontend/src/css/navigation.css

@@ -1,3 +1,5 @@
+/* App Navigation */
+
 #p-navigation {
     z-index: 10;
 }

frontend/src/css/themes.css

@@ -1,15 +1,16 @@
 @import url("themes/default.css");
-@import url("themes/grayscale.css");
-@import url("themes/shadow.css");
-@import url("themes/yellowstone.css");
 @import url("themes/abyss.css");
-@import url("themes/vanta.css");
-@import url("themes/neon.css");
-@import url("themes/gemstone.css");
 @import url("themes/carbon.css");
-@import url("themes/mint.css");
+@import url("themes/chrome.css");
-@import url("themes/nordic.css");
+@import url("themes/gemstone.css");
+@import url("themes/grayscale.css");
 @import url("themes/lavender.css");
+@import url("themes/mint.css");
+@import url("themes/neon.css");
+@import url("themes/nordic.css");
+@import url("themes/shadow.css");
+@import url("themes/vanta.css");
+@import url("themes/yellowstone.css");
 
 /* Input Style Overrides */
 

frontend/src/css/themes/carbon.css

@@ -1,4 +1,4 @@
-/* Carbon Theme */
+/* Carbon Dark Theme */
 
 body.dark-theme.theme-carbon,
 .theme-carbon .v-content__wrap,

frontend/src/css/themes/chrome.css

@@ -0,0 +1,133 @@
+/* Chrome Dark Theme */
+
+body.dark-theme.theme-chrome,
+.theme-chrome .v-content__wrap,
+.theme-chrome .p-page,
+.theme-chrome .form,
+.theme-chrome .v-content {
+    background: #1d1d1d !important;
+}
+
+#photoprism.theme-chrome .theme--light.v-small-dialog__content,
+#photoprism.theme-chrome .theme--light.v-sheet,
+#photoprism.theme-chrome .theme--light.v-card,
+.theme-chrome .application.theme--light {
+    background: #202020;
+}
+
+#photoprism.container.theme-chrome {
+    background-image: linear-gradient(160deg, #808080 0%, #262626 100%);
+}
+
+#photoprism.theme-chrome .theme--light .v-table {
+    background: #262626;
+}
+
+body.dark-theme #photoprism.theme-chrome,
+body.dark-theme #photoprism.theme-chrome .v-datatable a,
+body.dark-theme #photoprism.theme-chrome .theme--light.v-expansion-panel .v-expansion-panel__container,
+body.dark-theme #photoprism.theme-chrome .theme--light.v-tabs__bar .v-tabs__div {
+    color: #ffffff;
+    caret-color: #ffffff;
+    stroke: #ffffff;
+}
+
+body.dark-theme #photoprism.theme-chrome .p-page a,
+body.dark-theme #photoprism.theme-chrome .theme--light,
+body.dark-theme #photoprism.theme-chrome #p-navigation .navigation-menu.theme--dark.v-list,
+body.dark-theme #photoprism.theme-chrome #p-navigation .navigation-menu .theme--dark.v-icon {
+    color: #d8d8d8;
+    caret-color: #d8d8d8;
+    stroke: #d8d8d8;
+}
+
+body.dark-theme #photoprism.theme-chrome .v-input--selection-controls__input .theme--light {
+    color: #8e8e8e;
+    caret-color: #8e8e8e;
+    stroke: #8e8e8e;
+}
+
+body.dark-theme #photoprism.theme-chrome #p-navigation .navigation-menu .theme--dark.v-icon {
+    color: inherit;
+}
+
+#photoprism.theme-chrome .theme--light.v-table thead th,
+#photoprism.theme-chrome .theme--light.v-table tbody td {
+    color: #fff;
+}
+
+#photoprism.theme-chrome .theme--light.v-table tbody tr:hover {
+    background: #2b2b2b;
+}
+
+#photoprism.theme-chrome .theme--light.v-text-field--solo>.v-input__control>.v-input__slot,
+#photoprism.theme-chrome .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+#photoprism.theme-chrome .secondary--text {
+    color: rgba(255, 255, 255, 0.2)!important;
+}
+
+body.dark-theme #photoprism.theme-chrome .v-card .theme--light.v-text-field--box>.v-input__control>.v-input__slot {
+    background: rgba(255, 255, 255, 0.04);
+}
+
+#photoprism.theme-chrome .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon {
+    color: #999 !important;
+}
+
+#photoprism.theme-chrome .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon,
+#photoprism.theme-chrome .theme--light.v-input--is-disabled .v-label,
+#photoprism.theme-chrome .theme--light.v-input--is-disabled input,
+#photoprism.theme-chrome .theme--light.v-input--is-disabled textarea {
+    color: #aaaaaa;
+}
+
+#photoprism.theme-chrome .theme--light.v-list {
+    background: #232425;
+}
+
+#photoprism.theme-chrome a.text-link {
+    color: #ffffff !important;
+}
+
+#photoprism.theme-chrome .footer .body-link {
+    color: #ffffff !important;
+}
+
+#photoprism.theme-chrome .theme--light.v-list .v-list__tile__sub-title,
+#photoprism.theme-chrome .accent--text {
+    color: #ffffff !important;
+}
+
+#photoprism.theme-chrome .theme--light.v-input:not(.v-input--is-disabled) input,
+#photoprism.theme-chrome .theme--light.v-input:not(.v-input--is-disabled) textarea {
+    color: #fff;
+}
+
+#photoprism.theme-chrome .theme--light.v-btn.v-btn--disabled,
+#photoprism.theme-chrome .theme--light.v-btn.v-btn--disabled .v-btn__loading,
+#photoprism.theme-chrome .theme--light.v-btn.v-btn--disabled .v-icon {
+    color: #999 !important;
+}
+
+#photoprism.theme-chrome .theme--light.v-list .v-list__tile__mask {
+    color: #cccccc;
+    background: transparent;
+}
+
+#photoprism.theme-chrome .cards-view .card.is-selected .card-details {
+    color: #fff;
+    background-color: #424242;
+}
+
+#photoprism.theme-chrome .cards-view .card.is-selected,
+#photoprism.theme-chrome .cards-view .card.is-selected .card-background {
+    background-color: #424242 !important;
+}
+
+#photoprism.theme-chrome .cards-view .card.is-selected .card-details .v-icon {
+    color: #fff;
+}
+

frontend/src/css/themes/gemstone.css

@@ -1,4 +1,4 @@
-/* Gemstone Theme */
+/* Gemstone Dark Theme */
 
 body.dark-theme.theme-gemstone,
 .theme-gemstone .v-content__wrap,

frontend/src/css/themes/grayscale.css

@@ -1,4 +1,4 @@
-/* Grayscale Theme */
+/* Grayscale Dark Theme */
 
 body.dark-theme.theme-grayscale {
     background: #525252 !important;

frontend/src/css/themes/mint.css

@@ -1,4 +1,4 @@
-/* Mint Theme */
+/* Mint Dark Theme */
 
 body.dark-theme.theme-mint,
 .theme-mint .v-content__wrap,

frontend/src/css/themes/neon.css

@@ -1,4 +1,4 @@
-/* Neon Theme */
+/* Neon Dark Theme */
 
 .theme-neon .v-snack.v-snack--active.v-snack--bottom,
 .theme-neon .v-speed-dial .v-btn--floating.v-btn--small {

frontend/src/css/themes/shadow.css

@@ -1,4 +1,4 @@
-/* Shadow Theme */
+/* Shadow Dark Theme */
 
 body.dark-theme.theme-shadow {
     background: #444 !important;

frontend/src/css/themes/vanta.css

@@ -1,4 +1,4 @@
-/* Vanta Theme */
+/* Vanta Dark Theme */
 
 body.dark-theme.theme-vanta {
     background: #212121 !important;

frontend/src/css/themes/yellowstone.css

@@ -1,4 +1,4 @@
-/* Yellowstone Theme */
+/* Yellowstone Dark Theme */
 
 body.dark-theme.theme-yellowstone,
 .theme-yellowstone .v-content__wrap,

frontend/src/css/typography.css

@@ -39,6 +39,10 @@ button.v-btn.compact  {
     height: 34px;
 }
 
+.caption.filename {
+    font-weight: 500;
+}
+
 /* Line Height */
 
 .lh-15 {

frontend/src/dialog/photo/edit/files.vue

@@ -5,7 +5,7 @@
         <v-expansion-panel-content v-if="!file.Missing" :key="file.UID" class="pa-0 elevation-0 secondary-light"
                                    style="margin-top: 1px;">
           <template #header>
-            <div class="caption">{{ file.baseName(70) }}</div>
+            <div class="caption filename">{{ file.baseName(70) }}</div>
           </template>
           <v-card>
             <v-card-text class="white pa-0">

frontend/src/options/themes.js

@@ -35,6 +35,132 @@ let themes = {
       "navigation-home": "#0e0f10",
     },
   },
+  abyss: {
+    name: "abyss",
+    dark: true,
+    sponsor: true,
+    colors: {
+      application: "#202020",
+      form: "#202020",
+      card: "#242424",
+      primary: "#814fd9",
+      "primary-button": "#7e57c2",
+      "secondary-dark": "#814fd9",
+      secondary: "#111111",
+      "secondary-light": "#1a1a1a",
+      accent: "#090c10",
+      error: "#e57373",
+      info: "#00acc1",
+      success: "#26A69A",
+      warning: "#ffd740",
+      remove: "#9575cd",
+      restore: "#64b5f6",
+      album: "#7e57c2",
+      download: "#673ab7",
+      private: "#512da8",
+      edit: "#4527a0",
+      share: "#311b92",
+      love: "#ef5350",
+      terminal: "#333333",
+      navigation: "#0d0d0d",
+      "navigation-home": "#000000",
+    },
+  },
+  carbon: {
+    dark: true,
+    sponsor: true,
+    title: "Carbon",
+    name: "carbon",
+    colors: {
+      application: "#16141c",
+      form: "#16141c",
+      card: "#292732",
+      primary: "#8a6eff",
+      "primary-button": "#53478a",
+      "secondary-dark": "#7f63fd",
+      secondary: "#0E0D12",
+      "secondary-light": "#292733",
+      accent: "#262238",
+      error: "#e57373",
+      info: "#00acc1",
+      success: "#26A69A",
+      warning: "#ffd740",
+      remove: "#e57373",
+      restore: "#64b5f6",
+      album: "#ffab00",
+      download: "#00bfa5",
+      private: "#00b8d4",
+      edit: "#00b8d4",
+      share: "#9575cd",
+      love: "#ef5350",
+      terminal: "#292733",
+      navigation: "#0E0D12",
+      "navigation-home": "#0E0D12",
+    },
+  },
+  chrome: {
+    dark: true,
+    sponsor: false,
+    title: "Chrome",
+    name: "chrome",
+    colors: {
+      application: "#1d1d1d",
+      form: "#1d1d1d",
+      card: "#1f1f1f",
+      primary: "#ffffff",
+      "primary-button": "#393939",
+      "secondary-dark": "#ffffff",
+      secondary: "#1f1f1f",
+      "secondary-light": "#292929",
+      accent: "#727272",
+      error: "#d36161",
+      info: "#0696a7",
+      success: "#3da097",
+      warning: "#e5c036",
+      remove: "#d35442",
+      restore: "#3bbeaf",
+      album: "#e39c0b",
+      download: "#06a590",
+      private: "#0bb1ca",
+      edit: "#279765",
+      share: "#9575cd",
+      love: "#ef5350",
+      terminal: "#2f3131",
+      navigation: "#1e2122",
+      "navigation-home": "#1e2122",
+    },
+  },
+  gemstone: {
+    name: "gemstone",
+    dark: true,
+    sponsor: true,
+    colors: {
+      application: "#2f2f31",
+      form: "#2f2f31",
+      card: "#2b2b2d",
+      primary: "#AFB4D4",
+      "primary-button": "#545465",
+      "secondary-dark": "#9BA0C5",
+      secondary: "#272727",
+      "secondary-light": "#37373a",
+      accent: "#333",
+      error: "#e57373",
+      info: "#00acc1",
+      success: "#26A69A",
+      warning: "#ffd740",
+      remove: "#e57373",
+      restore: "#64b5f6",
+      album: "#ffab00",
+      download: "#00bfa5",
+      private: "#00b8d4",
+      edit: "#00b8d4",
+      share: "#9575cd",
+      love: "#ef5350",
+      terminal: "#4A464F",
+      navigation: "#1C1C21",
+      "navigation-home": "#131316",
+    },
+  },
   grayscale: {
     name: "grayscale",
     dark: true,
@@ -160,6 +286,37 @@ let themes = {
       "navigation-home": "#181818",
     },
   },
+  neon: {
+    name: "neon",
+    dark: true,
+    sponsor: true,
+    colors: {
+      application: "#242326",
+      form: "#242326",
+      card: "#1b1a1c",
+      primary: "#f44abf",
+      "primary-button": "#890664",
+      "secondary-dark": "#cc0d99",
+      secondary: "#111111",
+      "secondary-light": "#1a1a1a",
+      accent: "#090c10",
+      error: "#e57373",
+      info: "#00acc1",
+      success: "#26A69A",
+      warning: "#fece3e",
+      love: "#fb4483",
+      remove: "#9100a0",
+      restore: "#5e33f8",
+      album: "#6234b5",
+      download: "#8d56eb",
+      private: "#4749c8",
+      edit: "#5658eb",
+      share: "#5692eb",
+      terminal: "#333333",
+      navigation: "#0e0d0f",
+      "navigation-home": "#000000",
+    },
+  },
   nordic: {
     dark: false,
     sponsor: false,
@@ -223,131 +380,6 @@ let themes = {
       "navigation-home": "#212121",
     },
   },
-  abyss: {
-    name: "abyss",
-    dark: true,
-    sponsor: true,
-    colors: {
-      application: "#202020",
-      form: "#202020",
-      card: "#242424",
-      primary: "#814fd9",
-      "primary-button": "#7e57c2",
-      "secondary-dark": "#814fd9",
-      secondary: "#111111",
-      "secondary-light": "#1a1a1a",
-      accent: "#090c10",
-      error: "#e57373",
-      info: "#00acc1",
-      success: "#26A69A",
-      warning: "#ffd740",
-      remove: "#9575cd",
-      restore: "#64b5f6",
-      album: "#7e57c2",
-      download: "#673ab7",
-      private: "#512da8",
-      edit: "#4527a0",
-      share: "#311b92",
-      love: "#ef5350",
-      terminal: "#333333",
-      navigation: "#0d0d0d",
-      "navigation-home": "#000000",
-    },
-  },
-  carbon: {
-    dark: true,
-    sponsor: true,
-    title: "Carbon",
-    name: "carbon",
-    colors: {
-      application: "#16141c",
-      form: "#16141c",
-      card: "#292732",
-      primary: "#8a6eff",
-      "primary-button": "#53478a",
-      "secondary-dark": "#7f63fd",
-      secondary: "#0E0D12",
-      "secondary-light": "#292733",
-      accent: "#262238",
-      error: "#e57373",
-      info: "#00acc1",
-      success: "#26A69A",
-      warning: "#ffd740",
-      remove: "#e57373",
-      restore: "#64b5f6",
-      album: "#ffab00",
-      download: "#00bfa5",
-      private: "#00b8d4",
-      edit: "#00b8d4",
-      share: "#9575cd",
-      love: "#ef5350",
-      terminal: "#292733",
-      navigation: "#0E0D12",
-      "navigation-home": "#0E0D12",
-    },
-  },
-  gemstone: {
-    name: "gemstone",
-    dark: true,
-    sponsor: true,
-    colors: {
-      application: "#2f2f31",
-      form: "#2f2f31",
-      card: "#2b2b2d",
-      primary: "#AFB4D4",
-      "primary-button": "#545465",
-      "secondary-dark": "#9BA0C5",
-      secondary: "#272727",
-      "secondary-light": "#37373a",
-      accent: "#333",
-      error: "#e57373",
-      info: "#00acc1",
-      success: "#26A69A",
-      warning: "#ffd740",
-      remove: "#e57373",
-      restore: "#64b5f6",
-      album: "#ffab00",
-      download: "#00bfa5",
-      private: "#00b8d4",
-      edit: "#00b8d4",
-      share: "#9575cd",
-      love: "#ef5350",
-      terminal: "#4A464F",
-      navigation: "#1C1C21",
-      "navigation-home": "#131316",
-    },
-  },
-  neon: {
-    name: "neon",
-    dark: true,
-    sponsor: true,
-    colors: {
-      application: "#242326",
-      form: "#242326",
-      card: "#1b1a1c",
-      primary: "#f44abf",
-      "primary-button": "#890664",
-      "secondary-dark": "#cc0d99",
-      secondary: "#111111",
-      "secondary-light": "#1a1a1a",
-      accent: "#090c10",
-      error: "#e57373",
-      info: "#00acc1",
-      success: "#26A69A",
-      warning: "#fece3e",
-      love: "#fb4483",
-      remove: "#9100a0",
-      restore: "#5e33f8",
-      album: "#6234b5",
-      download: "#8d56eb",
-      private: "#4749c8",
-      edit: "#5658eb",
-      share: "#5692eb",
-      terminal: "#333333",
-      navigation: "#0e0d0f",
-      "navigation-home": "#000000",
-    },
-  },
   shadow: {
     name: "shadow",
     dark: true,
@@ -451,6 +483,26 @@ let options = [
     value: "default",
     disabled: false,
   },
+  {
+    text: "Abyss",
+    value: "abyss",
+    disabled: false,
+  },
+  {
+    text: "Carbon",
+    value: "carbon",
+    disabled: false,
+  },
+  {
+    text: "Chrome",
+    value: "chrome",
+    disabled: false,
+  },
+  {
+    text: "Gemstone",
+    value: "gemstone",
+    disabled: false,
+  },
   {
     text: "Grayscale",
     value: "grayscale",
@@ -471,6 +523,11 @@ let options = [
     value: "mint",
     disabled: false,
   },
+  {
+    text: "Neon",
+    value: "neon",
+    disabled: false,
+  },
   {
     text: "Nordic",
     value: "nordic",
@@ -481,26 +538,6 @@ let options = [
     value: "onyx",
     disabled: false,
   },
-  {
-    text: "Abyss",
-    value: "abyss",
-    disabled: false,
-  },
-  {
-    text: "Carbon",
-    value: "carbon",
-    disabled: false,
-  },
-  {
-    text: "Gemstone",
-    value: "gemstone",
-    disabled: false,
-  },
-  {
-    text: "Neon",
-    value: "neon",
-    disabled: false,
-  },
   {
     text: "Shadow",
     value: "shadow",

frontend/src/page/settings/general.vue

@@ -464,20 +464,8 @@ export default {
         return false;
       }
 
-      this.$sponsorFeatures().then(() => {
+      this.currentTheme = value;
-        this.currentTheme = value;
+      this.onChange();
-        this.onChange();
-      }).catch(() => {
-        if (themes.Get(value).sponsor) {
-          this.dialog.sponsor = true;
-          this.$nextTick(() => {
-            this.settings.ui.theme = this.currentTheme;
-          });
-        } else {
-          this.currentTheme = value;
-          this.onChange();
-        }
-      });
     },
     onChangeMapsStyle(value) {
       if (!value) {