beenull/photoprism
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Frontend: Add new "Neon" theme

Browse source 
Signed-off-by: Michael Mayer <michael@photoprism.app>
This commit is contained in:
Michael Mayer 2022-12-23 03:03:46 +01:00
parent a22edb29a5
commit fe2caec8bf
3 changed files with 163 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/css/themes.css
View file

@ -1,8 +1,9 @@
@import url("themes/grayscale.css");
@import url("themes/vanta.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");

111
frontend/src/css/themes/neon.css Normal file
View file

@ -0,0 +1,111 @@
/* Neon Theme */
body.dark-theme.theme-neon {
background: #212121 !important;
}
.theme-neon .v-content__wrap,
.theme-neon .p-page,
.theme-neon .form,
.theme-neon .v-content {
background: #212121 !important;
}
#photoprism.theme-neon .theme--light.v-small-dialog__content,
#photoprism.theme-neon .theme--light.v-sheet,
#photoprism.theme-neon .theme--light.v-card {
background: #212121;
}
.theme-neon .application.theme--light {
background: #212121;
}
#photoprism.theme-neon .theme--light .v-table {
background: #262626;
}
#photoprism.theme-neon .theme--light.v-table thead th,
#photoprism.theme-neon .theme--light.v-table tbody td {
color: #fff;
}
#photoprism.theme-neon .theme--light.v-table tbody tr:hover {
background: #333333;
}
#photoprism.theme-neon .theme--light.v-chip,
#photoprism.theme-neon .v-card__actions .theme--light.v-text-field--solo > .v-input__control > .v-input__slot {
background: #333;
}
#photoprism.theme-neon .theme--light.v-text-field--solo > .v-input__control > .v-input__slot {
background: #262626;
}
#photoprism.theme-neon .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon {
color: #999 !important;
}
#photoprism.theme-neon .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon,
#photoprism.theme-neon .theme--light.v-input--is-disabled .v-label,
#photoprism.theme-neon .theme--light.v-input--is-disabled input,
#photoprism.theme-neon .theme--light.v-input--is-disabled textarea {
color: #ccc;
}
#photoprism.theme-neon,
#photoprism.theme-neon .p-page a,
#photoprism.theme-neon .v-datatable a,
#photoprism.theme-neon .theme--light.v-expansion-panel .v-expansion-panel__container,
#photoprism.theme-neon .theme--light.v-tabs__bar .v-tabs__div,
#photoprism.theme-neon .theme--light {
color: #fff;
}
#photoprism.theme-neon .theme--light.v-list {
background: #262626;
}
#photoprism.theme-neon a.text-link {
color: #c32b94 !important;
}
#photoprism.theme-neon .theme--light.v-select .v-select__selections {
color: #eee;
}
#photoprism.theme-neon .theme--light.v-list .v-list__tile__sub-title,
#photoprism.theme-neon .accent--text {
color: #b50080 !important;
}
#photoprism.theme-neon .theme--light.v-input:not(.v-input--is-disabled) input,
#photoprism.theme-neon .theme--light.v-input:not(.v-input--is-disabled) textarea {
color: #fff;
}
#photoprism.theme-neon .theme--light.v-btn.v-btn--disabled,
#photoprism.theme-neon .theme--light.v-btn.v-btn--disabled .v-btn__loading,
#photoprism.theme-neon .theme--light.v-btn.v-btn--disabled .v-icon {
color: #999 !important;
}
#photoprism.theme-neon .theme--light.v-list .v-list__tile__mask {
color: #cccccc;
background: transparent;
}
#photoprism.theme-neon .mobile-dial .v-speed-dial__list .v-btn {
color: white;
background-color: #4c0733;
}
#photoprism.theme-neon .mobile-dial .v-speed-dial__list .v-btn.highlight {
background-color: #6d0850;
}
#photoprism.theme-neon .mobile-dial .v-speed-dial__list .v-btn:hover,
#photoprism.theme-neon .mobile-dial .v-speed-dial__list .v-btn.highlight:hover {
background-color: #7d0f60;
}

64
frontend/src/options/themes.js
View file

@ -251,6 +251,37 @@ let themes = {
"navigation-home": "#000000",
},
},
abyss: {
name: "abyss",
dark: true,
sponsor: true,
colors: {
application: "#212121",
form: "#AFB42B",
card: "#3c3f41",
primary: "#814fd9",
"primary-button": "#7e57c2",
"secondary-dark": "#814fd9",
secondary: "#111111",
"secondary-light": "#1a1a1a",
accent: "#090c10",
error: "#e57373",
info: "#00acc1",
success: "#4db6ac",
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",
},
},
vanta: {
name: "vanta",
dark: true,
@ -282,32 +313,32 @@ let themes = {
"navigation-home": "#000000",
},
},
abyss: {
name: "abyss",
neon: {
name: "neon",
dark: true,
sponsor: true,
colors: {
application: "#212121",
form: "#AFB42B",
card: "#3c3f41",
primary: "#814fd9",
"primary-button": "#7e57c2",
"secondary-dark": "#814fd9",
primary: "#d50b98", // "#e30ca2",
"primary-button": "#93116e",
"secondary-dark": "#c32b94",
secondary: "#111111",
"secondary-light": "#1a1a1a",
accent: "#090c10",
error: "#e57373",
info: "#00acc1",
info: "#5a94dd",
success: "#4db6ac",
warning: "#ffd740",
remove: "#9575cd",
restore: "#64b5f6",
album: "#7e57c2",
download: "#673ab7",
private: "#512da8",
edit: "#4527a0",
share: "#311b92",
warning: "#e3d181",
love: "#ef5350",
remove: "#e35333",
restore: "#64b5f6",
album: "#ffab40",
download: "#07bd9f",
private: "#48bcd6",
edit: "#48bcd6",
share: "#0070a0",
terminal: "#333333",
navigation: "#0d0d0d",
"navigation-home": "#000000",
@ -416,6 +447,11 @@ let options = [
value: "vanta",
disabled: false,
},
{
text: $gettext("Neon"),
value: "neon",
disabled: false,
},
{
text: $gettext("Shadow"),
value: "shadow",