Frontend: Add "Mint" theme and move default styles to themes/default.css

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

frontend/package-lock.json

@@ -5638,9 +5638,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.466",
+      "version": "1.4.467",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.466.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.467.tgz",
-      "integrity": "sha512-TSkRvbXRXD8BwhcGlZXDsbI2lRoP8dvqR7LQnqQNk9KxXBc4tG8O+rTuXgTyIpEdiqSGKEBSqrxdqEntnjNncA=="
+      "integrity": "sha512-2qI70O+rR4poYeF2grcuS/bCps5KJh6y1jtZMDDEteyKJQrzLOEhFyXCLcHW6DTBjKjWkk26JhWoAi+Ux9A0fg=="
     },
     "node_modules/emoji-regex": {
       "version": "8.0.0",

frontend/src/css/themes.css

@@ -1,3 +1,4 @@
+@import url("themes/default.css");
 @import url("themes/grayscale.css");
 @import url("themes/shadow.css");
 @import url("themes/yellowstone.css");
@@ -6,11 +7,11 @@
 @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/lavender.css");
-@import url("themes/default.css");
 
-/* General Styles */
+/* Input Style Overrides */
 
 :-webkit-autofill,
 :-webkit-autofill:hover,
@@ -21,90 +22,15 @@ input:-webkit-autofill:focus {
     transition: background-color 9999s !important;
 }
 
-body.dark-theme #photoprism .v-tabs .v-badge__badge {
-    color: #000000;
-}
-
-body.dark-theme #photoprism .theme--light.v-table thead th {
-    color: #ffffff;
-}
-
-.card {
-    background-color: #e0e0e0;
-}
-
-body.dark-theme .card {
-    background-color: #1a1a1a;
-}
-
-body.dark-theme #photoprism .v-table .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
-    background: transparent;
-}
-
-body.dark-theme .theme--light.v-list .v-list__tile--highlighted,
-body.dark-theme .theme--light.v-list a:hover {
-    background: rgba(255,255,255,0.3) !important;
-}
-
-body.dark-theme .v-input input::placeholder {
-    color: rgba(255,255,255,0.5) !important;
-}
-
 .v-text-field>.v-input__control>.v-input__slot:after,
 .v-text-field>.v-input__control>.v-input__slot:before {
     display: none !important;
 }
 
-/*
-body.dark-theme .v-text-field.v-text-field--enclosed .v-text-field__details {
-    padding-left: 0;
-}*/
-
-.theme--light.v-list .v-list__tile--highlighted,
-.theme--light.v-list a:hover {
-    background: rgba(155,155,155,0.3) !important;
-}
-
-body.dark-theme #photoprism .map-control .theme--light.v-input:not(.v-input--is-disabled) i,
-body.dark-theme #photoprism .map-control .theme--light.v-input:not(.v-input--is-disabled) input {
-    color: #333333;
-}
-
-body:not(.dark-theme) .theme--dark.v-btn.v-btn--disabled:not(.v-btn--icon):not(.v-btn--flat):not(.v-btn--outline) {
-    color: rgb(51, 51, 51)!important;
-    background-color: #d9dadc!important;
-}
-
-body.dark-theme #photoprism .theme--light.v-chip,
-body.dark-theme #photoprism .v-card .theme--light.v-text-field--box>.v-input__control>.v-input__slot {
-    background: #00000033;
-}
-
-body.dark-theme #photoprism,
-body.dark-theme #photoprism .p-page a,
-body.dark-theme #photoprism .v-datatable a,
-body.dark-theme #photoprism .theme--light.v-expansion-panel .v-expansion-panel__container,
-body.dark-theme #photoprism .theme--light.v-tabs__bar .v-tabs__div,
-body.dark-theme #photoprism .theme--light {
-    color: #ffffff;
-    caret-color: #ffffff;
-    stroke: #ffffff;
-}
-
-body.dark-theme #photoprism .theme--light.v-label {
-    color: #ffffffaa;
-}
-
-body.dark-theme #photoprism .theme--light.v-select .v-select__selections {
-    color: #ffffffee;
-}
-
 #photoprism .v-select.v-text-field--box .v-select__selections {
     padding-top: 20px;
 }
 
-/* Exceptions */
-
 #photoprism .theme--light.v-text-field--solo.background-inherit>.v-input__control>.v-input__slot {
     background: inherit;
     box-shadow: none;

frontend/src/css/themes/default.css

@@ -1,7 +1,76 @@
-/* Default Theme */
+/* Component Color Defaults */
 
-#photoprism.theme-default .theme--light.v-text-field--solo>.v-input__control>.v-input__slot,
+.card {
-#photoprism.theme-default .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
+    background-color: #e0e0e0;
+}
+
+body.dark-theme .card {
+    background-color: #1a1a1a;
+}
+
+body.dark-theme #photoprism .v-table .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
+    background: transparent;
+}
+
+body.dark-theme .theme--light.v-list .v-list__tile--highlighted,
+body.dark-theme .theme--light.v-list a:hover {
+    background: rgba(255,255,255,0.3) !important;
+}
+
+body.dark-theme .v-input input::placeholder {
+    color: rgba(255,255,255,0.5) !important;
+}
+
+body.dark-theme .theme--light .v-table {
+    background: #303030;
+}
+
+body.dark-theme .theme--light.v-table tbody tr:hover {
+    background: #343434;
+}
+
+.theme--light.v-list .v-list__tile--highlighted,
+.theme--light.v-list a:hover {
+    background: rgba(155,155,155,0.3) !important;
+}
+
+body:not(.dark-theme) .theme--dark.v-btn.v-btn--disabled:not(.v-btn--icon):not(.v-btn--flat):not(.v-btn--outline) {
+    color: rgb(51, 51, 51)!important;
+    background-color: #d9dadc!important;
+}
+
+body.dark-theme #photoprism .theme--light.v-chip,
+body.dark-theme #photoprism .v-card .theme--light.v-text-field--box>.v-input__control>.v-input__slot {
+    background: #00000033;
+}
+
+body.dark-theme #photoprism,
+body.dark-theme #photoprism .p-page a,
+body.dark-theme #photoprism .v-datatable a,
+body.dark-theme #photoprism .theme--light.v-expansion-panel .v-expansion-panel__container,
+body.dark-theme #photoprism .theme--light.v-tabs__bar .v-tabs__div,
+body.dark-theme #photoprism .theme--light {
+    color: #ffffff;
+    caret-color: #ffffff;
+    stroke: #ffffff;
+}
+
+body.dark-theme #photoprism .theme--light.v-label {
+    color: #ffffffaa;
+}
+
+body.dark-theme #photoprism .theme--light.v-select .v-select__selections {
+    color: #ffffffee;
+}
+
+body.dark-theme .theme--light.v-small-dialog__content,
+body.dark-theme .theme--light.v-sheet,
+body.dark-theme .theme--light.v-card {
+    background: #2f3031;
+}
+
+body.dark-theme .theme--light.v-text-field--solo>.v-input__control>.v-input__slot,
+body.dark-theme .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
     background: rgba(250, 250, 255, 0.1);
 }
 
@@ -20,7 +89,10 @@ body.dark-theme #photoprism .p-page a,
 body.dark-theme #photoprism .v-datatable a,
 body.dark-theme #photoprism .theme--light.v-expansion-panel .v-expansion-panel__container,
 body.dark-theme #photoprism .theme--light.v-tabs__bar .v-tabs__div,
-body.dark-theme #photoprism .theme--light {
+body.dark-theme #photoprism .theme--light,
+body.dark-theme #photoprism .theme--light.v-table thead th,
+body.dark-theme .theme--light.v-table thead th,
+body.dark-theme .theme--light.v-table tbody td {
     color: #ffffff;
 }
 
@@ -36,6 +108,12 @@ body.dark-theme #photoprism .theme--light.v-select .v-select__selections {
     padding-top: 20px;
 }
 
+body.dark-theme #photoprism .v-tabs .v-badge__badge {
+    color: #000000;
+}
+
+/* Default Theme */
+
 body.dark-theme.theme-default,
 .theme-default .v-content__wrap,
 .theme-default .p-page,
@@ -51,10 +129,6 @@ body.dark-theme.theme-default,
     background: #2f3031;
 }
 
-#photoprism.theme-default .theme--light .v-table {
-    background: #37393a;
-}
-
 #photoprism.container.theme-default {
     background-image: linear-gradient(160deg, #808080 0%, #262626 100%);
 }
@@ -68,6 +142,10 @@ body.dark-theme.theme-default,
     stroke: rgba(196, 241, 229, 0.3);
 }
 
+#photoprism.theme-default .theme--light .v-table {
+    background: #37393a;
+}
+
 #photoprism.theme-default .theme--light.v-table thead th,
 #photoprism.theme-default .theme--light.v-table tbody td {
     color: #fff;
@@ -81,6 +159,11 @@ body.dark-theme.theme-default,
     color: #999 !important;
 }
 
+#photoprism.theme-default .theme--light.v-text-field--solo>.v-input__control>.v-input__slot,
+#photoprism.theme-default .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
+    background: rgba(250, 250, 255, 0.1);
+}
+
 #photoprism.theme-default .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon,
 #photoprism.theme-default .theme--light.v-input--is-disabled .v-label,
 #photoprism.theme-default .theme--light.v-input--is-disabled input,

frontend/src/css/themes/mint.css

@@ -0,0 +1,92 @@
+/* Mint Theme */
+
+body.dark-theme.theme-mint,
+.theme-mint .v-content__wrap,
+.theme-mint .p-page,
+.theme-mint .form,
+.theme-mint .v-content {
+    background: #121212 !important;
+}
+
+#photoprism.theme-mint .theme--light.v-small-dialog__content,
+#photoprism.theme-mint .theme--light.v-sheet,
+#photoprism.theme-mint .theme--light.v-card,
+.theme-mint .application.theme--light {
+    background: #1e1e1e;
+}
+
+#photoprism.container.theme-mint {
+    background-image: linear-gradient(160deg, #808080 0%, #262626 100%);
+}
+
+#photoprism.theme-mint .theme--light .v-table {
+    background: #1a1a1a;
+}
+
+#photoprism.theme-mint .theme--light.v-table thead th,
+#photoprism.theme-mint .theme--light.v-table tbody td {
+    color: #fff;
+}
+
+#photoprism.theme-mint .theme--light.v-table tbody tr:hover {
+    background: #2b2b2b;
+}
+
+#photoprism.theme-mint .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon {
+    color: #999 !important;
+}
+
+#photoprism.theme-mint .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon,
+#photoprism.theme-mint .theme--light.v-input--is-disabled .v-label,
+#photoprism.theme-mint .theme--light.v-input--is-disabled input,
+#photoprism.theme-mint .theme--light.v-input--is-disabled textarea {
+    color: #ccc;
+}
+
+#photoprism.theme-mint .theme--light.v-list {
+    background: #232425;
+}
+
+#photoprism.theme-mint a.text-link {
+    color: #f6f7e8 !important;
+}
+
+#photoprism.theme-mint .footer .body-link {
+    color: #f6f7e8 !important;
+}
+
+#photoprism.theme-mint .theme--light.v-list .v-list__tile__sub-title,
+#photoprism.theme-mint .accent--text {
+    color: #2bb14c !important;
+}
+
+#photoprism.theme-mint .theme--light.v-input:not(.v-input--is-disabled) input,
+#photoprism.theme-mint .theme--light.v-input:not(.v-input--is-disabled) textarea {
+    color: #fff;
+}
+
+#photoprism.theme-mint .theme--light.v-btn.v-btn--disabled,
+#photoprism.theme-mint .theme--light.v-btn.v-btn--disabled .v-btn__loading,
+#photoprism.theme-mint .theme--light.v-btn.v-btn--disabled .v-icon {
+    color: #999 !important;
+}
+
+#photoprism.theme-mint .theme--light.v-list .v-list__tile__mask {
+    color: #cccccc;
+    background: transparent;
+}
+
+#photoprism.theme-mint .cards-view .card.is-selected .card-details {
+    color: #fff;
+    background-color: #333333;
+}
+
+#photoprism.theme-mint .cards-view .card.is-selected,
+#photoprism.theme-mint .cards-view .card.is-selected .card-background {
+    background-color: #333333 !important;
+}
+
+#photoprism.theme-mint .cards-view .card.is-selected .card-details .v-icon {
+    color: #fff;
+}
+

frontend/src/options/themes.js

@@ -10,7 +10,7 @@ let themes = {
     name: "default",
     colors: {
       application: "#2f3031",
-      form: "#eeeeee",
+      form: "#2f3031",
       card: "#232425",
       primary: "#9E7BEA",
       "primary-button": "#5F1DB7",
@@ -41,7 +41,7 @@ let themes = {
     sponsor: false,
     colors: {
       application: "#525252",
-      form: "#e5e4e2",
+      form: "#525252",
       card: "#5e5e5e",
       primary: "#c8bdb1",
       "primary-button": "#726e69",
@@ -103,7 +103,7 @@ let themes = {
     sponsor: false,
     colors: {
       application: "#F5F5F5",
-      form: "#eeeeee",
+      form: "#F5F5F5",
       card: "#e0e0e0",
       primary: "#FFCA28",
       "primary-button": "#212121",
@@ -128,6 +128,38 @@ let themes = {
       "navigation-home": "#000000",
     },
   },
+  mint: {
+    dark: true,
+    sponsor: false,
+    title: "Mint",
+    name: "mint",
+    colors: {
+      application: "#121212",
+      form: "#121212",
+      card: "#1e1e1e",
+      primary: "#2bb14c",
+      "primary-button": "#22903d",
+      "secondary-dark": "#2bb14c",
+      secondary: "#181818",
+      "secondary-light": "#1f1f1f",
+      accent: "#2bb14c",
+      error: "#e57373",
+      info: "#00acc1",
+      success: "#4db6ac",
+      warning: "#ffd740",
+      remove: "#e57373",
+      restore: "#64b5f6",
+      album: "#ffab00",
+      download: "#00bfa5",
+      private: "#00b8d4",
+      edit: "#00b8d4",
+      share: "#9575cd",
+      love: "#ef5350",
+      terminal: "#181818",
+      navigation: "#181818",
+      "navigation-home": "#181818",
+    },
+  },
   nordic: {
     dark: false,
     sponsor: false,
@@ -135,7 +167,7 @@ let themes = {
     name: "nordic",
     colors: {
       application: "#f7f8fa",
-      form: "#eeeeee",
+      form: "#f7f8fa",
       card: "#ECEFF4",
       primary: "#4ca0b8",
       "primary-button": "#519fb6",
@@ -197,7 +229,7 @@ let themes = {
     sponsor: true,
     colors: {
       application: "#202020",
-      form: "#AFB42B",
+      form: "#202020",
       card: "#242424",
       primary: "#814fd9",
       "primary-button": "#7e57c2",
@@ -229,7 +261,7 @@ let themes = {
     name: "carbon",
     colors: {
       application: "#16141c",
-      form: "#eeeeee",
+      form: "#16141c",
       card: "#292732",
       primary: "#8a6eff",
       "primary-button": "#53478a",
@@ -260,7 +292,7 @@ let themes = {
     sponsor: true,
     colors: {
       application: "#2f2f31",
-      form: "#eeeeee",
+      form: "#2f2f31",
       card: "#2b2b2d",
       primary: "#AFB4D4",
       "primary-button": "#545465",
@@ -291,7 +323,7 @@ let themes = {
     sponsor: true,
     colors: {
       application: "#242326",
-      form: "#AFB42B",
+      form: "#242326",
       card: "#1b1a1c",
       primary: "#f44abf",
       "primary-button": "#890664",
@@ -322,7 +354,7 @@ let themes = {
     sponsor: true,
     colors: {
       application: "#444",
-      form: "#eeeeee",
+      form: "#444",
       card: "#666666",
       primary: "#c4f1e5",
       "primary-button": "#74817d",
@@ -353,7 +385,7 @@ let themes = {
     sponsor: true,
     colors: {
       application: "#212121",
-      form: "#AFB42B",
+      form: "#212121",
       card: "#1d1d1d",
       primary: "#04acaf",
       "primary-button": "#444444",
@@ -384,7 +416,7 @@ let themes = {
     sponsor: true,
     colors: {
       application: "#32312f",
-      form: "#eeeeee",
+      form: "#32312f",
       card: "#262524",
       primary: "#ffb700",
       "primary-button": "#54524e",
@@ -434,6 +466,11 @@ let options = [
     value: "legacy",
     disabled: false,
   },
+  {
+    text: "Mint",
+    value: "mint",
+    disabled: false,
+  },
   {
     text: "Nordic",
     value: "nordic",