Skip to content

Commit e1405eb

Browse files
lastzerolastzero
committed
UI: Improve theme styles and remove "Seaweed" #2916
Signed-off-by: Michael Mayer <michael@photoprism.app>
1 parent 72fffc9 commit e1405eb

15 files changed

Lines changed: 75 additions & 83 deletions

File tree

‎frontend/package-lock.json‎

Lines changed: 10 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/src/component/photo/cards.vue‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,9 @@
3535
>
3636
<div v-if="index < firstVisibleElementIndex || index > lastVisibileElementIndex"
3737
:data-uid="photo.UID"
38-
class="accent lighten-3 result placeholder"
38+
class="card result placeholder"
3939
>
40-
<div class="accent lighten-2 image"/>
40+
<div class="card darken-1 image"/>
4141
<div v-if="photo.Quality < 3 && context === 'review'" style="width: 100%; height: 34px"/>
4242
<div class="pa-3 card-details">
4343
<div>
@@ -73,17 +73,15 @@
7373
</div>
7474
</div>
7575
<div v-else
76-
tile
7776
:data-id="photo.ID"
7877
:data-uid="photo.UID"
79-
class="result accent lighten-3"
78+
class="result card"
8079
:class="photo.classes()"
8180
@contextmenu.stop="onContextMenu($event, index)">
82-
<div class="card-background accent lighten-3"></div>
81+
<div class="card-background card"></div>
8382
<div :key="photo.Hash"
84-
:alt="photo.Title"
8583
:title="photo.Title"
86-
class="accent lighten-2 clickable image"
84+
class="card darken-1 clickable image"
8785
:style="`background-image: url(${photo.thumbnailUrl('tile_500')})`"
8886
@touchstart.passive="input.touchStart($event, index)"
8987
@touchend.stop.prevent="onClick($event, index)"
@@ -161,15 +159,15 @@
161159
<v-card-actions v-if="!isSharedView && photo.Quality < 3 && context === 'review'" class="card-details pa-0">
162160
<v-layout row wrap align-center>
163161
<v-flex xs6 class="text-xs-center pa-1">
164-
<v-btn color="accent lighten-2"
162+
<v-btn color="card darken-1"
165163
small depressed dark block :round="false"
166164
class="action-archive text-xs-center"
167165
:title="$gettext('Archive')" @click.stop="photo.archive()">
168166
<v-icon dark>clear</v-icon>
169167
</v-btn>
170168
</v-flex>
171169
<v-flex xs6 class="text-xs-center pa-1">
172-
<v-btn color="accent lighten-2"
170+
<v-btn color="card darken-1"
173171
small depressed dark block :round="false"
174172
class="action-approve text-xs-center"
175173
:title="$gettext('Approve')" @click.stop="photo.approve()">

‎frontend/src/component/photo/list.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,14 +52,14 @@
5252
<div
5353
v-if="index < firstVisibleElementIndex || index > lastVisibileElementIndex"
5454
:key="photo.Hash"
55-
class="image accent lighten-2"
55+
class="image card darken-1"
5656
/>
5757
<div
5858
v-else
5959
:key="photo.Hash"
6060
:alt="photo.Title"
6161
:style="`background-image: url(${photo.thumbnailUrl('tile_50')})`"
62-
class="accent lighten-2 clickable image"
62+
class="card darken-1 clickable image"
6363
@touchstart="onMouseDown($event, index)"
6464
@touchend.stop.prevent="onClick($event, index)"
6565
@mousedown="onMouseDown($event, index)"

‎frontend/src/component/photo/mosaic.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,15 @@
4040
<div class="image-container">
4141
<div v-if="index < firstVisibleElementIndex || index > lastVisibileElementIndex"
4242
:data-uid="photo.UID"
43-
class="accent lighten-2 result image"
43+
class="card darken-1 result image"
4444
/>
4545
<div v-else
4646
:key="photo.Hash"
4747
tile
4848
:data-id="photo.ID"
4949
:data-uid="photo.UID"
5050
:style="`background-image: url(${photo.thumbnailUrl('tile_224')})`"
51-
:class="photo.classes().join(' ') + ' accent lighten-2 result clickable image'"
51+
:class="photo.classes().join(' ') + ' card darken-1 result clickable image'"
5252
:alt="photo.Title"
5353
:title="photo.Title"
5454
@contextmenu.stop="onContextMenu($event, index)"

‎frontend/src/css/themes.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,18 @@ body.dark-theme #photoprism .v-tabs .v-badge__badge {
2121
color: #000000;
2222
}
2323

24+
body.dark-theme #photoprism .theme--light.v-table thead th {
25+
color: #ffffff;
26+
}
27+
28+
.card {
29+
background-color: #77787e;
30+
}
31+
32+
body.dark-theme .card {
33+
background-color: #4c4e52;
34+
}
35+
2436
body.dark-theme #photoprism .v-table .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
2537
background: transparent;
2638
}

‎frontend/src/css/themes/electra.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* Electra Theme */
22

33
body.dark-theme.theme-electra {
4-
background: #161025 !important;
4+
background: #26243a !important;
55
}
66

77
#photoprism.theme-electra .theme--light.v-text-field--solo>.v-input__control>.v-input__slot{
@@ -25,21 +25,21 @@ body.dark-theme.theme-electra {
2525
.theme-electra .p-page,
2626
.theme-electra .form,
2727
.theme-electra .v-content {
28-
background: #161025 !important;
28+
background: #26243a !important;
2929
}
3030

3131
#photoprism.theme-electra .theme--light.v-small-dialog__content,
3232
#photoprism.theme-electra .theme--light.v-sheet,
3333
#photoprism.theme-electra .theme--light.v-card {
34-
background: #161025;
34+
background: #26243a;
3535
}
3636

3737
.theme-electra .application.theme--light {
38-
background: #161025;
38+
background: #26243a;
3939
}
4040

4141
#photoprism.theme-electra .theme--light .v-table {
42-
background: #161025;
42+
background: #26243a;
4343
}
4444

4545
#photoprism. .theme--light.v-table thead th,
@@ -48,7 +48,7 @@ body.dark-theme.theme-electra {
4848
}
4949

5050
#photoprism.theme-electra .theme--light.v-table tbody tr:hover {
51-
background: #23164f;
51+
background: #403e54;
5252
}
5353

5454
#photoprism.theme-electra .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon {

‎frontend/src/dialog/photo/edit/details.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<v-img v-touch="{left, right}"
1616
:src="model.thumbnailUrl('tile_500')"
1717
aspect-ratio="1"
18-
class="accent lighten-2 elevation-0 clickable"
18+
class="card darken-1 elevation-0 clickable"
1919
@click.exact="openPhoto()"
2020
>
2121
</v-img>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
aspect-ratio="1"
3131
max-width="112"
3232
max-height="112"
33-
class="accent lighten-2 elevation-0 clickable my-1"
33+
class="card darken-1 elevation-0 clickable my-1"
3434
@click.exact="openFile(file)"
3535
>
3636
</v-img>

‎frontend/src/dialog/photo/edit/people.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,12 @@
2323
:data-id="marker.UID"
2424
style="user-select: none;"
2525
:class="marker.classes()"
26-
class="result accent lighten-3">
27-
<div class="card-background accent lighten-3"></div>
26+
class="result card">
27+
<div class="card-background card"></div>
2828
<v-img :src="marker.thumbnailUrl('tile_320')"
2929
:transition="false"
3030
aspect-ratio="1"
31-
class="accent lighten-2">
31+
class="card darken-1">
3232
<v-btn v-if="!marker.SubjUID && !marker.Invalid" :ripple="false" :depressed="false" class="input-reject"
3333
icon flat small absolute :title="$gettext('Remove')"
3434
@click.stop.prevent="onReject(marker)">

‎frontend/src/options/themes.js‎

Lines changed: 16 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ let themes = {
1010
colors: {
1111
application: "#F5F5F5",
1212
form: "#eeeeee",
13+
card: "#bdbdbd",
1314
primary: "#FFCA28",
1415
"primary-button": "#212121",
1516
"secondary-dark": "#212121",
@@ -40,6 +41,7 @@ let themes = {
4041
colors: {
4142
application: "#525252",
4243
form: "#e5e4e2",
44+
card: "#444444",
4345
primary: "#c8bdb1",
4446
"primary-button": "#726e69",
4547
"secondary-dark": "#c8bdb1",
@@ -70,6 +72,7 @@ let themes = {
7072
colors: {
7173
application: "#eceff1",
7274
form: "#eceff1",
75+
card: "#bdbdbd",
7376
primary: "#80deea",
7477
"primary-button": "#757575",
7578
"secondary-dark": "#757575",
@@ -100,6 +103,7 @@ let themes = {
100103
colors: {
101104
application: "#FDEDF5",
102105
form: "#fafafa",
106+
card: "#bdbdbd",
103107
primary: "#ffb3cc",
104108
"primary-button": "#EA3495",
105109
"secondary-dark": "#EA3495",
@@ -123,43 +127,14 @@ let themes = {
123127
"navigation-home": "#891A55",
124128
},
125129
},
126-
seaweed: {
127-
name: "seaweed",
128-
dark: false,
129-
sponsor: false,
130-
colors: {
131-
application: "#fafafa",
132-
form: "#fafafa",
133-
primary: "#26a69a",
134-
"primary-button": "#3b5e5b",
135-
"secondary-dark": "#1c7d73",
136-
secondary: "#b0bec5",
137-
"secondary-light": "#c1ccd1",
138-
accent: "#b0bec5",
139-
error: "#e57373",
140-
info: "#00acc1",
141-
success: "#4db6ac",
142-
warning: "#ffd740",
143-
remove: "#e57373",
144-
restore: "#64b5f6",
145-
album: "#ffab00",
146-
download: "#00bfa5",
147-
private: "#00b8d4",
148-
edit: "#00b8d4",
149-
share: "#9575cd",
150-
love: "#ef5350",
151-
terminal: "#333333",
152-
navigation: "#37474f",
153-
"navigation-home": "#263238",
154-
},
155-
},
156130
lavender: {
157131
name: "lavender",
158132
dark: false,
159133
sponsor: false,
160134
colors: {
161135
application: "#fafafa",
162136
form: "#fafafa",
137+
card: "#bdbdbd",
163138
primary: "#9ca2c9",
164139
"primary-button": "#6c6f84",
165140
"secondary-dark": "#475185",
@@ -190,6 +165,7 @@ let themes = {
190165
colors: {
191166
application: "#eeeeee",
192167
form: "#eeeeee",
168+
card: "#bdbdbd",
193169
primary: "#a5b3c0",
194170
"primary-button": "#212121",
195171
"secondary-dark": "#212121",
@@ -220,6 +196,7 @@ let themes = {
220196
colors: {
221197
application: "#e5e4e2",
222198
form: "#e5e4e2",
199+
card: "#bdbdbd",
223200
primary: "#c8bdb1",
224201
"primary-button": "#353839",
225202
"secondary-dark": "#353839",
@@ -250,6 +227,7 @@ let themes = {
250227
colors: {
251228
application: "#444",
252229
form: "#eeeeee",
230+
card: "#3c3f41",
253231
primary: "#c4f1e5",
254232
"primary-button": "#74817d",
255233
"secondary-dark": "#c8e3e7",
@@ -280,6 +258,7 @@ let themes = {
280258
colors: {
281259
application: "#444",
282260
form: "#eeeeee",
261+
card: "#3c3f41",
283262
primary: "#ffb700",
284263
"primary-button": "#918c7d",
285264
"secondary-dark": "#ffb700",
@@ -310,6 +289,7 @@ let themes = {
310289
colors: {
311290
application: "#212121",
312291
form: "#AFB42B",
292+
card: "#3c3f41",
313293
primary: "#04acaf",
314294
"primary-button": "#444444",
315295
"secondary-dark": "#04acaf",
@@ -340,6 +320,7 @@ let themes = {
340320
colors: {
341321
application: "#212121",
342322
form: "#AFB42B",
323+
card: "#3c3f41",
343324
primary: "#814fd9",
344325
"primary-button": "#7e57c2",
345326
"secondary-dark": "#814fd9",
@@ -370,6 +351,7 @@ let themes = {
370351
colors: {
371352
application: "#353535",
372353
form: "#eeeeee",
354+
card: "#3c3f41",
373355
primary: "#AFB4D4",
374356
"primary-button": "#545465",
375357
"secondary-dark": "#9BA0C5",
@@ -399,12 +381,13 @@ let themes = {
399381
title: "Electra",
400382
name: "electra",
401383
colors: {
402-
application: "#161025",
384+
application: "#26243a",
403385
form: "#eeeeee",
386+
card: "#3b394e",
404387
primary: "#D3CBFF",
405388
"primary-button": "#53478a",
406389
"secondary-dark": "#9c8aef",
407-
secondary: "#0f0723",
390+
secondary: "#0c0910",
408391
"secondary-light": "#2f2b44",
409392
accent: "#262238",
410393
error: "#e57373",
@@ -420,7 +403,7 @@ let themes = {
420403
share: "#9575cd",
421404
love: "#ef5350",
422405
terminal: "#070121",
423-
navigation: "#070121",
406+
navigation: "#0f0e1f",
424407
"navigation-home": "#02000e",
425408
},
426409
},
@@ -484,11 +467,6 @@ let options = [
484467
value: "raspberry",
485468
disabled: false,
486469
},
487-
{
488-
text: $gettext("Seaweed"),
489-
value: "seaweed",
490-
disabled: false,
491-
},
492470
{
493471
text: $gettext("Shadow"),
494472
value: "shadow",

0 commit comments

Comments
 (0)