Themes: Improve styles and add new "Snow" theme based on nordtheme.com

Signed-off-by: Michael Mayer <michael@photoprism.app>
photoprism · Jan 5, 2023 · 93251d7 · 93251d7
1 parent a356457
commit 93251d7
Show file tree

Hide file tree

Showing 14 changed files with 282 additions and 28 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/src/component/photo/toolbar.vue b/frontend/src/component/photo/toolbar.vue
@@ -55,6 +55,7 @@
                       :menu-props="{'maxHeight':346}"
                       flat solo hide-details
                       color="secondary-dark"
+                      background-color="secondary"
                       item-value="ID"
                       item-text="Name"
                       :items="countryOptions"
@@ -69,6 +70,7 @@
                       :menu-props="{'maxHeight':346}"
                       flat solo hide-details
                       color="secondary-dark"
+                      background-color="secondary"
                       item-value="ID"
                       item-text="Name"
                       :items="cameraOptions"
@@ -81,6 +83,7 @@
                       :label="$gettext('View')"
                       flat solo hide-details
                       color="secondary-dark"
+                      background-color="secondary"
                       :items="options.views"
                       @change="(v) => {setView(v)}">
             </v-select>
@@ -91,6 +94,7 @@
                       :menu-props="{'maxHeight':400}"
                       flat solo hide-details
                       color="secondary-dark"
+                      background-color="secondary"
                       :items="options.sorting"
                       @change="(v) => {updateQuery({'order': v})}">
             </v-select>
@@ -101,6 +105,7 @@
                       :menu-props="{'maxHeight':346}"
                       flat solo hide-details
                       color="secondary-dark"
+                      background-color="secondary"
                       item-value="value"
                       item-text="text"
                       :items="yearOptions()"
@@ -113,6 +118,7 @@
                       :menu-props="{'maxHeight':346}"
                       flat solo hide-details
                       color="secondary-dark"
+                      background-color="secondary"
                       item-value="value"
                       item-text="text"
                       :items="monthOptions()"
@@ -124,6 +130,7 @@
                         :label="labels.lens"
                         flat solo hide-details
                         color="secondary-dark"
+                        background-color="secondary-light"
                         item-value="ID"
                         item-text="Model"
                         v-model="filter.lens"
@@ -136,6 +143,7 @@
                       :menu-props="{'maxHeight':346}"
                       flat solo hide-details
                       color="secondary-dark"
+                      background-color="secondary"
                       item-value="Slug"
                       item-text="Name"
                       :items="colorOptions()"
@@ -148,6 +156,7 @@
                       :menu-props="{'maxHeight':346}"
                       flat solo hide-details
                       color="secondary-dark"
+                      background-color="secondary"
                       item-value="Slug"
                       item-text="Name"
                       :items="categoryOptions"

diff --git a/frontend/src/css/themes.css b/frontend/src/css/themes.css
@@ -6,6 +6,7 @@
 @import url("themes/neon.css");
 @import url("themes/gemstone.css");
 @import url("themes/carbon.css");
+@import url("themes/snow.css");
 
 /* General Styles */
 

diff --git a/frontend/src/css/themes/abyss.css b/frontend/src/css/themes/abyss.css
@@ -25,7 +25,7 @@ body.dark-theme.theme-abyss,
 }
 
 #photoprism.theme-abyss .theme--light.v-table tbody tr:hover {
-    background: #333333;
+    background: #342C43;
 }
 
 #photoprism.theme-abyss .theme--light.v-chip,

diff --git a/frontend/src/css/themes/carbon.css b/frontend/src/css/themes/carbon.css
@@ -42,7 +42,7 @@ body.dark-theme.theme-carbon,
 }
 
 #photoprism.theme-carbon .theme--light.v-table tbody tr:hover {
-    background: #34314e;
+    background: #302c3d;
 }
 
 #photoprism.theme-carbon .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon {

diff --git a/frontend/src/css/themes/gemstone.css b/frontend/src/css/themes/gemstone.css
@@ -38,7 +38,7 @@ body.dark-theme.theme-gemstone,
 }
 
 #photoprism.theme-gemstone .theme--light.v-table tbody tr:hover {
-    background: #666;
+    background: #47474b;
 }
 
 #photoprism.theme-gemstone .theme--light.v-chip,

diff --git a/frontend/src/css/themes/grayscale.css b/frontend/src/css/themes/grayscale.css
@@ -44,7 +44,7 @@ body.dark-theme.theme-grayscale {
 }
 
 #photoprism.theme-grayscale .theme--light.v-table tbody tr:hover {
-    background: #666;
+    background: #555;
 }
 
 #photoprism.theme-grayscale .theme--light.v-chip,

diff --git a/frontend/src/css/themes/shadow.css b/frontend/src/css/themes/shadow.css
@@ -44,7 +44,7 @@ body.dark-theme.theme-shadow {
 }
 
 #photoprism.theme-shadow .theme--light.v-table tbody tr:hover {
-    background: #666;
+    background: #555;
 }
 
 #photoprism.theme-shadow .theme--light.v-chip,