From 997ded6917728ddfe3e56f9ffc4bb6c0d1cad4bb Mon Sep 17 00:00:00 2001
From: theresa <theresagresch@gmail.com>
Date: Tue, 30 Nov 2021 10:35:32 +0100
Subject: [PATCH] Frontend: Add new themes

---
 frontend/src/css/themes/dark-lavender.css | 106 ++++++++++++++++++++++
 frontend/src/css/themes/dark-purple.css   |  93 +++++++++++++++++++
 2 files changed, 199 insertions(+)
 create mode 100644 frontend/src/css/themes/dark-lavender.css
 create mode 100644 frontend/src/css/themes/dark-purple.css

diff --git a/frontend/src/css/themes/dark-lavender.css b/frontend/src/css/themes/dark-lavender.css
new file mode 100644
index 000000000..c120e2b54
--- /dev/null
+++ b/frontend/src/css/themes/dark-lavender.css
@@ -0,0 +1,106 @@
+/* Dark Lavender Theme */
+
+#photoprism.container.theme-dark-lavender {
+    background-image: linear-gradient(160deg, #808080 0%, #262626 100%);
+}
+
+#photoprism.container.theme-dark-lavender div.loading-animation {
+    color: #c4f1e5 !important;
+    caret-color: #c4f1e5 !important;
+}
+
+#photoprism.container.theme-dark-lavender div.loading-animation .loading-underlay {
+    stroke: rgba(196, 241, 229, 0.3);
+}
+
+.theme-dark-lavender .v-content__wrap,
+.theme-dark-lavender .p-page,
+.theme-dark-lavender .form,
+.theme-dark-lavender .v-content {
+    background: #444 !important;
+}
+
+#photoprism.theme-dark-lavender .theme--light.v-small-dialog__content,
+#photoprism.theme-dark-lavender .theme--light.v-sheet,
+#photoprism.theme-dark-lavender .theme--light.v-card {
+    background: #444;
+}
+
+.theme-dark-lavender .application.theme--light {
+    background: #444;
+}
+
+#photoprism.theme-dark-lavender .theme--light .v-table {
+    background: #4E4E4E;
+}
+
+#photoprism.theme-dark-lavender .theme--light.v-table thead th,
+#photoprism.theme-dark-lavender .theme--light.v-table tbody td {
+    color: #fff;
+}
+
+#photoprism.theme-dark-lavender .theme--light.v-table tbody tr:hover {
+    background: #666;
+}
+
+#photoprism.theme-dark-lavender .theme--light.v-chip,
+#photoprism.theme-dark-lavender .v-card__actions .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
+    background: #333;
+}
+
+#photoprism.theme-dark-lavender .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
+    background: #4E4E4E;
+}
+
+#photoprism.theme-dark-lavender .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon {
+    color: #999 !important;
+}
+
+#photoprism.theme-dark-lavender .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon,
+#photoprism.theme-dark-lavender .theme--light.v-input--is-disabled .v-label,
+#photoprism.theme-dark-lavender .theme--light.v-input--is-disabled input,
+#photoprism.theme-dark-lavender .theme--light.v-input--is-disabled textarea {
+    color: #ccc;
+}
+
+#photoprism.theme-dark-lavender,
+#photoprism.theme-dark-lavender .p-page a,
+#photoprism.theme-dark-lavender .v-datatable a,
+#photoprism.theme-dark-lavender .theme--light.v-expansion-panel .v-expansion-panel__container,
+#photoprism.theme-dark-lavender .theme--light.v-tabs__bar .v-tabs__div,
+#photoprism.theme-dark-lavender .theme--light {
+    color: #fff;
+}
+
+#photoprism.theme-dark-lavender .theme--light.v-list {
+    background: #555;
+}
+
+#photoprism.theme-dark-lavender a.text-link {
+    color: #c8e3e7 !important;
+}
+
+#photoprism.theme-dark-lavender .theme--light.v-select .v-select__selections {
+    color: #eee;
+}
+
+#photoprism.theme-dark-lavender .theme--light.v-list .v-list__tile__sub-title,
+#photoprism.theme-dark-lavender .accent--text {
+    color: #7a83b8 !important;
+}
+
+#photoprism.theme-dark-lavender .theme--light.v-input:not(.v-input--is-disabled) input,
+#photoprism.theme-dark-lavender .theme--light.v-input:not(.v-input--is-disabled) textarea {
+    color: #fff;
+}
+
+#photoprism.theme-dark-lavender .theme--light.v-btn.v-btn--disabled,
+#photoprism.theme-dark-lavender .theme--light.v-btn.v-btn--disabled .v-btn__loading,
+#photoprism.theme-dark-lavender .theme--light.v-btn.v-btn--disabled .v-icon {
+    color: #999 !important;
+}
+
+#photoprism.theme-dark-lavender .theme--light.v-list .v-list__tile__mask {
+    color: #cccccc;
+    background: transparent;
+}
diff --git a/frontend/src/css/themes/dark-purple.css b/frontend/src/css/themes/dark-purple.css
new file mode 100644
index 000000000..3a4851b24
--- /dev/null
+++ b/frontend/src/css/themes/dark-purple.css
@@ -0,0 +1,93 @@
+/* Dark Purple Theme */
+
+.theme-dark-purple .v-content__wrap,
+.theme-dark-purple .p-page,
+.theme-dark-purple .form,
+.theme-dark-purple .v-content {
+    background: #212121 !important;
+}
+
+#photoprism.theme-dark-purple .theme--light.v-small-dialog__content,
+#photoprism.theme-dark-purple .theme--light.v-sheet,
+#photoprism.theme-dark-purple .theme--light.v-card {
+    background: #212121;
+}
+
+.theme-dark-purple .application.theme--light {
+    background: #212121;
+}
+
+#photoprism.theme-dark-purple .theme--light .v-table {
+    background: #262626;
+}
+
+#photoprism.theme-dark-purple .theme--light.v-table thead th,
+#photoprism.theme-dark-purple .theme--light.v-table tbody td {
+    color: #fff;
+}
+
+#photoprism.theme-dark-purple .theme--light.v-table tbody tr:hover {
+    background: #333333;
+}
+
+#photoprism.theme-dark-purple .theme--light.v-chip,
+#photoprism.theme-dark-purple .v-card__actions .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
+    background: #333;
+}
+
+#photoprism.theme-dark-purple .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
+    background: #262626;
+}
+
+#photoprism.theme-dark-purple .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon {
+    color: #999 !important;
+}
+
+#photoprism.theme-dark-purple .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon,
+#photoprism.theme-dark-purple .theme--light.v-input--is-disabled .v-label,
+#photoprism.theme-dark-purple .theme--light.v-input--is-disabled input,
+#photoprism.theme-dark-purple .theme--light.v-input--is-disabled textarea {
+    color: #ccc;
+}
+
+#photoprism.theme-dark-purple,
+#photoprism.theme-dark-purple .p-page a,
+#photoprism.theme-dark-purple .v-datatable a,
+#photoprism.theme-dark-purple .theme--light.v-expansion-panel .v-expansion-panel__container,
+#photoprism.theme-dark-purple .theme--light.v-tabs__bar .v-tabs__div,
+#photoprism.theme-dark-purple .theme--light {
+    color: #fff;
+}
+
+#photoprism.theme-dark-purple .theme--light.v-list {
+    background: #262626;
+}
+
+#photoprism.theme-dark-purple a.text-link {
+    color: #c8e3e7 !important;
+}
+
+#photoprism.theme-dark-purple .theme--light.v-select .v-select__selections {
+    color: #eee;
+}
+
+#photoprism.theme-dark-purple .theme--light.v-list .v-list__tile__sub-title,
+#photoprism.theme-dark-purple .accent--text {
+    color: #643da9 !important;
+}
+
+#photoprism.theme-dark-purple .theme--light.v-input:not(.v-input--is-disabled) input,
+#photoprism.theme-dark-purple .theme--light.v-input:not(.v-input--is-disabled) textarea {
+    color: #fff;
+}
+
+#photoprism.theme-dark-purple .theme--light.v-btn.v-btn--disabled,
+#photoprism.theme-dark-purple .theme--light.v-btn.v-btn--disabled .v-btn__loading,
+#photoprism.theme-dark-purple .theme--light.v-btn.v-btn--disabled .v-icon {
+    color: #999 !important;
+}
+
+#photoprism.theme-dark-purple .theme--light.v-list .v-list__tile__mask {
+    color: #cccccc;
+    background: transparent;
+}
\ No newline at end of file