UI: Improve theme styles and remove "Seaweed" #2916

Signed-off-by: Michael Mayer <michael@photoprism.app>
photoprism · Nov 21, 2022 · e1405eb · e1405eb
1 parent 72fffc9
commit e1405eb
Show file tree

Hide file tree

Showing 15 changed files with 75 additions and 83 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/src/component/photo/cards.vue b/frontend/src/component/photo/cards.vue
@@ -35,9 +35,9 @@
       >
         <div v-if="index < firstVisibleElementIndex || index > lastVisibileElementIndex"
              :data-uid="photo.UID"
-             class="accent lighten-3 result placeholder"
+             class="card result placeholder"
         >
-          <div class="accent lighten-2 image"/>
+          <div class="card darken-1 image"/>
           <div v-if="photo.Quality < 3 && context === 'review'" style="width: 100%; height: 34px"/>
           <div class="pa-3 card-details">
             <div>
@@ -73,17 +73,15 @@
           </div>
         </div>
         <div v-else
-              tile
               :data-id="photo.ID"
               :data-uid="photo.UID"
-              class="result accent lighten-3"
+              class="result card"
               :class="photo.classes()"
               @contextmenu.stop="onContextMenu($event, index)">
-          <div class="card-background accent lighten-3"></div>
+          <div class="card-background card"></div>
           <div :key="photo.Hash"
-                :alt="photo.Title"
                 :title="photo.Title"
-                class="accent lighten-2 clickable image"
+                class="card darken-1 clickable image"
                 :style="`background-image: url(${photo.thumbnailUrl('tile_500')})`"
                 @touchstart.passive="input.touchStart($event, index)"
                 @touchend.stop.prevent="onClick($event, index)"
@@ -161,15 +159,15 @@
           <v-card-actions v-if="!isSharedView && photo.Quality < 3 && context === 'review'" class="card-details pa-0">
             <v-layout row wrap align-center>
               <v-flex xs6 class="text-xs-center pa-1">
-                <v-btn color="accent lighten-2"
+                <v-btn color="card darken-1"
                       small depressed dark block :round="false"
                       class="action-archive text-xs-center"
                       :title="$gettext('Archive')" @click.stop="photo.archive()">
                   <v-icon dark>clear</v-icon>
                 </v-btn>
               </v-flex>
               <v-flex xs6 class="text-xs-center pa-1">
-                <v-btn color="accent lighten-2"
+                <v-btn color="card darken-1"
                       small depressed dark block :round="false"
                       class="action-approve text-xs-center"
                       :title="$gettext('Approve')" @click.stop="photo.approve()">

diff --git a/frontend/src/component/photo/list.vue b/frontend/src/component/photo/list.vue
@@ -52,14 +52,14 @@
                 <div
                     v-if="index < firstVisibleElementIndex || index > lastVisibileElementIndex"
                     :key="photo.Hash"
-                    class="image accent lighten-2"
+                    class="image card darken-1"
                 />
                 <div
                       v-else
                       :key="photo.Hash"
                       :alt="photo.Title"
                       :style="`background-image: url(${photo.thumbnailUrl('tile_50')})`"
-                      class="accent lighten-2 clickable image"
+                      class="card darken-1 clickable image"
                       @touchstart="onMouseDown($event, index)"
                       @touchend.stop.prevent="onClick($event, index)"
                       @mousedown="onMouseDown($event, index)"

diff --git a/frontend/src/component/photo/mosaic.vue b/frontend/src/component/photo/mosaic.vue
@@ -40,15 +40,15 @@
         <div class="image-container">
           <div v-if="index < firstVisibleElementIndex || index > lastVisibileElementIndex"
                :data-uid="photo.UID"
-               class="accent lighten-2 result image"
+               class="card darken-1 result image"
           />
           <div  v-else
                 :key="photo.Hash"
                 tile
                 :data-id="photo.ID"
                 :data-uid="photo.UID"
                 :style="`background-image: url(${photo.thumbnailUrl('tile_224')})`"
-                :class="photo.classes().join(' ') + ' accent lighten-2 result clickable image'"
+                :class="photo.classes().join(' ') + ' card darken-1 result clickable image'"
                 :alt="photo.Title"
                 :title="photo.Title"
                 @contextmenu.stop="onContextMenu($event, index)"

diff --git a/frontend/src/css/themes.css b/frontend/src/css/themes.css
@@ -21,6 +21,18 @@ 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: #77787e;
+}
+
+body.dark-theme .card {
+    background-color: #4c4e52;
+}
+
 body.dark-theme #photoprism .v-table .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
     background: transparent;
 }

diff --git a/frontend/src/css/themes/electra.css b/frontend/src/css/themes/electra.css
@@ -1,7 +1,7 @@
 /* Electra Theme */
 
 body.dark-theme.theme-electra {
-    background: #161025 !important;
+    background: #26243a !important;
 }
 
 #photoprism.theme-electra .theme--light.v-text-field--solo>.v-input__control>.v-input__slot{
@@ -25,21 +25,21 @@ body.dark-theme.theme-electra {
 .theme-electra .p-page,
 .theme-electra .form,
 .theme-electra .v-content {
-    background: #161025 !important;
+    background: #26243a !important;
 }
 
 #photoprism.theme-electra .theme--light.v-small-dialog__content,
 #photoprism.theme-electra .theme--light.v-sheet,
 #photoprism.theme-electra .theme--light.v-card {
-    background: #161025;
+    background: #26243a;
 }
 
 .theme-electra .application.theme--light {
-    background: #161025;
+    background: #26243a;
 }
 
 #photoprism.theme-electra .theme--light .v-table {
-    background: #161025;
+    background: #26243a;
 }
 
 #photoprism. .theme--light.v-table thead th,
@@ -48,7 +48,7 @@ body.dark-theme.theme-electra {
 }
 
 #photoprism.theme-electra .theme--light.v-table tbody tr:hover {
-    background: #23164f;
+    background: #403e54;
 }
 
 #photoprism.theme-electra .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon {

diff --git a/frontend/src/dialog/photo/edit/details.vue b/frontend/src/dialog/photo/edit/details.vue
@@ -15,7 +15,7 @@
               <v-img v-touch="{left, right}"
                      :src="model.thumbnailUrl('tile_500')"
                      aspect-ratio="1"
-                     class="accent lighten-2 elevation-0 clickable"
+                     class="card darken-1 elevation-0 clickable"
                      @click.exact="openPhoto()"
               >
               </v-img>

diff --git a/frontend/src/dialog/photo/edit/files.vue b/frontend/src/dialog/photo/edit/files.vue
@@ -30,7 +30,7 @@
                                    aspect-ratio="1"
                                    max-width="112"
                                    max-height="112"
-                                   class="accent lighten-2 elevation-0 clickable my-1"
+                                   class="card darken-1 elevation-0 clickable my-1"
                                    @click.exact="openFile(file)"
                             >
                             </v-img>

diff --git a/frontend/src/dialog/photo/edit/people.vue b/frontend/src/dialog/photo/edit/people.vue
@@ -23,12 +23,12 @@
                   :data-id="marker.UID"
                   style="user-select: none;"
                   :class="marker.classes()"
-                  class="result accent lighten-3">
-            <div class="card-background accent lighten-3"></div>
+                  class="result card">
+            <div class="card-background card"></div>
             <v-img :src="marker.thumbnailUrl('tile_320')"
                    :transition="false"
                    aspect-ratio="1"
-                   class="accent lighten-2">
+                   class="card darken-1">
               <v-btn v-if="!marker.SubjUID && !marker.Invalid" :ripple="false" :depressed="false" class="input-reject"
                      icon flat small absolute :title="$gettext('Remove')"
                      @click.stop.prevent="onReject(marker)">

diff --git a/frontend/src/options/themes.js b/frontend/src/options/themes.js
@@ -10,6 +10,7 @@ let themes = {
     colors: {
       application: "#F5F5F5",
       form: "#eeeeee",
+      card: "#bdbdbd",
       primary: "#FFCA28",
       "primary-button": "#212121",
       "secondary-dark": "#212121",
@@ -40,6 +41,7 @@ let themes = {
     colors: {
       application: "#525252",
       form: "#e5e4e2",
+      card: "#444444",
       primary: "#c8bdb1",
       "primary-button": "#726e69",
       "secondary-dark": "#c8bdb1",
@@ -70,6 +72,7 @@ let themes = {
     colors: {
       application: "#eceff1",
       form: "#eceff1",
+      card: "#bdbdbd",
       primary: "#80deea",
       "primary-button": "#757575",
       "secondary-dark": "#757575",
@@ -100,6 +103,7 @@ let themes = {
     colors: {
       application: "#FDEDF5",
       form: "#fafafa",
+      card: "#bdbdbd",
       primary: "#ffb3cc",
       "primary-button": "#EA3495",
       "secondary-dark": "#EA3495",
@@ -123,43 +127,14 @@ let themes = {
       "navigation-home": "#891A55",
     },
   },
-  seaweed: {
-    name: "seaweed",
-    dark: false,
-    sponsor: false,
-    colors: {
-      application: "#fafafa",
-      form: "#fafafa",
-      primary: "#26a69a",
-      "primary-button": "#3b5e5b",
-      "secondary-dark": "#1c7d73",
-      secondary: "#b0bec5",
-      "secondary-light": "#c1ccd1",
-      accent: "#b0bec5",
-      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: "#333333",
-      navigation: "#37474f",
-      "navigation-home": "#263238",
-    },
-  },
   lavender: {
     name: "lavender",
     dark: false,
     sponsor: false,
     colors: {
       application: "#fafafa",
       form: "#fafafa",
+      card: "#bdbdbd",
       primary: "#9ca2c9",
       "primary-button": "#6c6f84",
       "secondary-dark": "#475185",
@@ -190,6 +165,7 @@ let themes = {
     colors: {
       application: "#eeeeee",
       form: "#eeeeee",
+      card: "#bdbdbd",
       primary: "#a5b3c0",
       "primary-button": "#212121",
       "secondary-dark": "#212121",
@@ -220,6 +196,7 @@ let themes = {
     colors: {
       application: "#e5e4e2",
       form: "#e5e4e2",
+      card: "#bdbdbd",
       primary: "#c8bdb1",
       "primary-button": "#353839",
       "secondary-dark": "#353839",
@@ -250,6 +227,7 @@ let themes = {
     colors: {
       application: "#444",
       form: "#eeeeee",
+      card: "#3c3f41",
       primary: "#c4f1e5",
       "primary-button": "#74817d",
       "secondary-dark": "#c8e3e7",
@@ -280,6 +258,7 @@ let themes = {
     colors: {
       application: "#444",
       form: "#eeeeee",
+      card: "#3c3f41",
       primary: "#ffb700",
       "primary-button": "#918c7d",
       "secondary-dark": "#ffb700",
@@ -310,6 +289,7 @@ let themes = {
     colors: {
       application: "#212121",
       form: "#AFB42B",
+      card: "#3c3f41",
       primary: "#04acaf",
       "primary-button": "#444444",
       "secondary-dark": "#04acaf",
@@ -340,6 +320,7 @@ let themes = {
     colors: {
       application: "#212121",
       form: "#AFB42B",
+      card: "#3c3f41",
       primary: "#814fd9",
       "primary-button": "#7e57c2",
       "secondary-dark": "#814fd9",
@@ -370,6 +351,7 @@ let themes = {
     colors: {
       application: "#353535",
       form: "#eeeeee",
+      card: "#3c3f41",
       primary: "#AFB4D4",
       "primary-button": "#545465",
       "secondary-dark": "#9BA0C5",
@@ -399,12 +381,13 @@ let themes = {
     title: "Electra",
     name: "electra",
     colors: {
-      application: "#161025",
+      application: "#26243a",
       form: "#eeeeee",
+      card: "#3b394e",
       primary: "#D3CBFF",
       "primary-button": "#53478a",
       "secondary-dark": "#9c8aef",
-      secondary: "#0f0723",
+      secondary: "#0c0910",
       "secondary-light": "#2f2b44",
       accent: "#262238",
       error: "#e57373",
@@ -420,7 +403,7 @@ let themes = {
       share: "#9575cd",
       love: "#ef5350",
       terminal: "#070121",
-      navigation: "#070121",
+      navigation: "#0f0e1f",
       "navigation-home": "#02000e",
     },
   },
@@ -484,11 +467,6 @@ let options = [
     value: "raspberry",
     disabled: false,
   },
-  {
-    text: $gettext("Seaweed"),
-    value: "seaweed",
-    disabled: false,
-  },
   {
     text: $gettext("Shadow"),
     value: "shadow",