From 77b5996640fe433cda604c1647b37b33c237a8bb Mon Sep 17 00:00:00 2001 From: Michael Mayer Date: Mon, 14 Aug 2023 09:52:51 +0200 Subject: [PATCH] Frontend: Refactor styles and add Chrome theme Signed-off-by: Michael Mayer --- frontend/package-lock.json | 74 ++--- frontend/src/component/navigation.vue | 2 +- frontend/src/css/logs.css | 1 + frontend/src/css/maps.css | 2 + frontend/src/css/navigation.css | 2 + frontend/src/css/themes.css | 17 +- frontend/src/css/themes/carbon.css | 2 +- frontend/src/css/themes/chrome.css | 133 +++++++++ frontend/src/css/themes/gemstone.css | 2 +- frontend/src/css/themes/grayscale.css | 2 +- frontend/src/css/themes/mint.css | 2 +- frontend/src/css/themes/neon.css | 2 +- frontend/src/css/themes/shadow.css | 2 +- frontend/src/css/themes/vanta.css | 2 +- frontend/src/css/themes/yellowstone.css | 2 +- frontend/src/css/typography.css | 4 + frontend/src/dialog/photo/edit/files.vue | 2 +- frontend/src/options/themes.js | 327 +++++++++++++---------- frontend/src/page/settings/general.vue | 16 +- 19 files changed, 384 insertions(+), 212 deletions(-) create mode 100644 frontend/src/css/themes/chrome.css diff --git a/frontend/package-lock.json b/frontend/package-lock.json index f8f32f28d..a66b17a0e 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -2584,9 +2584,9 @@ } }, "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": { - "version": "3.4.2", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz", - "integrity": "sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==", + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "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", - "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.1.tgz", - "integrity": "sha512-9t7ZA7NGGK8ckelF0PQCfcxIUzs1Md5rrO6U/c+FIQNanea5UZC0wqKXH4vHBccmu4ZJgZ2idtPeW7+Q2npOEA==", + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.2.tgz", + "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", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.46.0.tgz", - "integrity": "sha512-a8TLtmPi8xzPkCbp/OGFUo5yhRkHM2Ko9kOWP4znJr0WAhWyThaw3PnwX4vOTWOAMsV2uRt32PPDcEz63esSaA==", + "version": "8.47.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.47.0.tgz", + "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", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.9.tgz", - "integrity": "sha512-8e2HYcg7ohnTUbHk8focoklEQYvemQmu9M/f43DZVx43kHn0tE3BY/6gSDxS7k0SprtS0NHvj+L80cGLnoOUcQ==" + "version": "20.5.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.0.tgz", + "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", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz", - "integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==", + "version": "10.4.15", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.15.tgz", + "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", - "caniuse-lite": "^1.0.30001464", + "browserslist": "^4.21.10", + "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", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz", - "integrity": "sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==", + "version": "1.0.30001520", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001520.tgz", + "integrity": "sha512-tahF5O9EiiTzwTUqAeFjIZbn4Dnqxzz7ktrgGlMYNLH43Ul26IgTMH/zvL3DG0lZxBYnlT04axvInszUsZULdA==", "funding": [ { "type": "opencollective", @@ -5834,14 +5838,14 @@ } }, "node_modules/eslint": { - "version": "8.46.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.46.0.tgz", - "integrity": "sha512-cIO74PvbW0qU8e0mIvk5IV3ToWdCq5FYG6gWPHHkx6gNdjlbAYvtfHmlCMXxjcoVaIdwy/IAt3+mDkZkfvb2Dg==", + "version": "8.47.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.47.0.tgz", + "integrity": "sha512-spUQWrdPt+pRVP1TTJLmfRNJJHHZryFmptzcafwSvHsceV81djHOdnEeDmkdotZyLNjDhrOasNK8nikkoG1O8Q==", "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", - "@eslint/eslintrc": "^2.1.1", - "@eslint/js": "^8.46.0", + "@eslint/eslintrc": "^2.1.2", + "@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", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz", - "integrity": "sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==", + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "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", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz", - "integrity": "sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==", + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "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", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz", - "integrity": "sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==", + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" }, diff --git a/frontend/src/component/navigation.vue b/frontend/src/component/navigation.vue index 944927ccb..ffdf1208c 100644 --- a/frontend/src/component/navigation.vue +++ b/frontend/src/component/navigation.vue @@ -65,7 +65,7 @@ - + chevron_right diff --git a/frontend/src/css/logs.css b/frontend/src/css/logs.css index 4f4bbd4bf..32ab525d4 100644 --- a/frontend/src/css/logs.css +++ b/frontend/src/css/logs.css @@ -1,3 +1,4 @@ +/* Event Logs */ #photoprism .p-logs { color: white; diff --git a/frontend/src/css/maps.css b/frontend/src/css/maps.css index 6da14b3df..df163281b 100644 --- a/frontend/src/css/maps.css +++ b/frontend/src/css/maps.css @@ -1,3 +1,5 @@ +/* Maps & Places */ + #photoprism .map-control { position: absolute; background: transparent; diff --git a/frontend/src/css/navigation.css b/frontend/src/css/navigation.css index 1fc78a2e4..e3be940e8 100644 --- a/frontend/src/css/navigation.css +++ b/frontend/src/css/navigation.css @@ -1,3 +1,5 @@ +/* App Navigation */ + #p-navigation { z-index: 10; } diff --git a/frontend/src/css/themes.css b/frontend/src/css/themes.css index 843e40935..705e5f013 100644 --- a/frontend/src/css/themes.css +++ b/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/nordic.css"); +@import url("themes/chrome.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 */ diff --git a/frontend/src/css/themes/carbon.css b/frontend/src/css/themes/carbon.css index a85b90720..0e6bdbc90 100644 --- a/frontend/src/css/themes/carbon.css +++ b/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, diff --git a/frontend/src/css/themes/chrome.css b/frontend/src/css/themes/chrome.css new file mode 100644 index 000000000..b3c2b4ceb --- /dev/null +++ b/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; +} + diff --git a/frontend/src/css/themes/gemstone.css b/frontend/src/css/themes/gemstone.css index d85e4a1c9..494a8f575 100644 --- a/frontend/src/css/themes/gemstone.css +++ b/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, diff --git a/frontend/src/css/themes/grayscale.css b/frontend/src/css/themes/grayscale.css index 21519fe31..f57bc088c 100644 --- a/frontend/src/css/themes/grayscale.css +++ b/frontend/src/css/themes/grayscale.css @@ -1,4 +1,4 @@ -/* Grayscale Theme */ +/* Grayscale Dark Theme */ body.dark-theme.theme-grayscale { background: #525252 !important; diff --git a/frontend/src/css/themes/mint.css b/frontend/src/css/themes/mint.css index a602a772b..eb064dcb0 100644 --- a/frontend/src/css/themes/mint.css +++ b/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, diff --git a/frontend/src/css/themes/neon.css b/frontend/src/css/themes/neon.css index 580f43ec6..69f605c49 100644 --- a/frontend/src/css/themes/neon.css +++ b/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 { diff --git a/frontend/src/css/themes/shadow.css b/frontend/src/css/themes/shadow.css index 3c7f1d5fc..50151819e 100644 --- a/frontend/src/css/themes/shadow.css +++ b/frontend/src/css/themes/shadow.css @@ -1,4 +1,4 @@ -/* Shadow Theme */ +/* Shadow Dark Theme */ body.dark-theme.theme-shadow { background: #444 !important; diff --git a/frontend/src/css/themes/vanta.css b/frontend/src/css/themes/vanta.css index 156913808..f0f4c692a 100644 --- a/frontend/src/css/themes/vanta.css +++ b/frontend/src/css/themes/vanta.css @@ -1,4 +1,4 @@ -/* Vanta Theme */ +/* Vanta Dark Theme */ body.dark-theme.theme-vanta { background: #212121 !important; diff --git a/frontend/src/css/themes/yellowstone.css b/frontend/src/css/themes/yellowstone.css index f389a1683..98b25546b 100644 --- a/frontend/src/css/themes/yellowstone.css +++ b/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, diff --git a/frontend/src/css/typography.css b/frontend/src/css/typography.css index dccabae03..60221e394 100644 --- a/frontend/src/css/typography.css +++ b/frontend/src/css/typography.css @@ -39,6 +39,10 @@ button.v-btn.compact { height: 34px; } +.caption.filename { + font-weight: 500; +} + /* Line Height */ .lh-15 { diff --git a/frontend/src/dialog/photo/edit/files.vue b/frontend/src/dialog/photo/edit/files.vue index 5e3bae9b1..4ac52f900 100644 --- a/frontend/src/dialog/photo/edit/files.vue +++ b/frontend/src/dialog/photo/edit/files.vue @@ -5,7 +5,7 @@ diff --git a/frontend/src/options/themes.js b/frontend/src/options/themes.js index 26c6cf001..85e40e18b 100644 --- a/frontend/src/options/themes.js +++ b/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", diff --git a/frontend/src/page/settings/general.vue b/frontend/src/page/settings/general.vue index c5c93dc40..298ab1be4 100644 --- a/frontend/src/page/settings/general.vue +++ b/frontend/src/page/settings/general.vue @@ -464,20 +464,8 @@ export default { return false; } - this.$sponsorFeatures().then(() => { - this.currentTheme = value; - 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(); - } - }); + this.currentTheme = value; + this.onChange(); }, onChangeMapsStyle(value) { if (!value) {