diff --git a/frontend/src/css/themes.css b/frontend/src/css/themes.css index 1ef934ee1..3d355d8f1 100644 --- a/frontend/src/css/themes.css +++ b/frontend/src/css/themes.css @@ -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"); diff --git a/frontend/src/css/themes/neon.css b/frontend/src/css/themes/neon.css new file mode 100644 index 000000000..909e66c3d --- /dev/null +++ b/frontend/src/css/themes/neon.css @@ -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; +} \ No newline at end of file diff --git a/frontend/src/options/themes.js b/frontend/src/options/themes.js index 68f552aa5..ecb4f27ab 100644 --- a/frontend/src/options/themes.js +++ b/frontend/src/options/themes.js @@ -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",