UI: Add Electra theme #2916

Signed-off-by: Michael Mayer <michael@photoprism.app>

frontend/src/css/themes.css

@@ -4,6 +4,7 @@
 @import url("themes/yellowstone.css");
 @import url("themes/abyss.css");
 @import url("themes/gemstone.css");
+@import url("themes/electra.css");
 
 /* General Styles */
 

frontend/src/css/themes/electra.css

@@ -0,0 +1,96 @@
+/* Electra Theme */
+
+body.dark-theme.theme-electra {
+    background: #161025 !important;
+}
+
+#photoprism.theme-electra .theme--light.v-text-field--solo>.v-input__control>.v-input__slot{
+    background: rgba(250, 250, 255, 0.1);
+}
+
+#photoprism.container.theme-electra {
+    background-image: linear-gradient(160deg, #808080 0%, #262626 100%);
+}
+
+#photoprism.container.theme-electra div.loading-animation {
+    color: #AFB4D4 !important;
+    caret-color: #AFB4D4 !important;
+}
+
+#photoprism.container.theme-electra div.loading-animation .loading-underlay {
+    stroke: rgba(196, 241, 229, 0.3);
+}
+
+.theme-electra .v-content__wrap,
+.theme-electra .p-page,
+.theme-electra .form,
+.theme-electra .v-content {
+    background: #161025 !important;
+}
+
+#photoprism.theme-electra .theme--light.v-small-dialog__content,
+#photoprism.theme-electra .theme--light.v-sheet,
+#photoprism.theme-electra .theme--light.v-card {
+    background: #161025;
+}
+
+.theme-electra .application.theme--light {
+    background: #161025;
+}
+
+#photoprism.theme-electra .theme--light .v-table {
+    background: #161025;
+}
+
+#photoprism. .theme--light.v-table thead th,
+#photoprism.theme-electra .theme--light.v-table tbody td {
+    color: #fff;
+}
+
+#photoprism.theme-electra .theme--light.v-table tbody tr:hover {
+    background: #23164f;
+}
+
+#photoprism.theme-electra .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon {
+    color: #999 !important;
+}
+
+#photoprism.theme-electra .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon,
+#photoprism.theme-electra .theme--light.v-input--is-disabled .v-label,
+#photoprism.theme-electra .theme--light.v-input--is-disabled input,
+#photoprism.theme-electra .theme--light.v-input--is-disabled textarea {
+    color: #ccc;
+}
+
+#photoprism.theme-electra .theme--light.v-list {
+    background: #434057;
+}
+
+#photoprism.theme-electra a.text-link {
+    color: #D2CEEB !important;
+}
+
+#photoprism.theme-electra .footer .body-link {
+    color: #D2CEEB !important;
+}
+
+#photoprism.theme-electra .theme--light.v-list .v-list__tile__sub-title,
+#photoprism.theme-electra .accent--text {
+    color: #D3CBFF !important;
+}
+
+#photoprism.theme-electra .theme--light.v-input:not(.v-input--is-disabled) input,
+#photoprism.theme-electra .theme--light.v-input:not(.v-input--is-disabled) textarea {
+    color: #fff;
+}
+
+#photoprism.theme-electra .theme--light.v-btn.v-btn--disabled,
+#photoprism.theme-electra .theme--light.v-btn.v-btn--disabled .v-btn__loading,
+#photoprism.theme-electra .theme--light.v-btn.v-btn--disabled .v-icon {
+    color: #999 !important;
+}
+
+#photoprism.theme-electra .theme--light.v-list .v-list__tile__mask {
+    color: #cccccc;
+    background: transparent;
+}

frontend/src/options/themes.js

@@ -340,9 +340,9 @@ let themes = {
     colors: {
       application: "#212121",
       form: "#AFB42B",
-      primary: "#7e57c2",
+      primary: "#814fd9",
       "primary-button": "#7e57c2",
-      "secondary-dark": "#7e57c2",
+      "secondary-dark": "#814fd9",
       secondary: "#111111",
       "secondary-light": "#1a1a1a",
       accent: "#090c10",
@@ -393,6 +393,37 @@ let themes = {
       "navigation-home": "#131316",
     },
   },
+  electra: {
+    dark: true,
+    sponsor: true,
+    title: "Electra",
+    name: "electra",
+    colors: {
+      application: "#161025",
+      form: "#eeeeee",
+      primary: "#D3CBFF",
+      "primary-button": "#53478a",
+      "secondary-dark": "#9c8aef",
+      secondary: "#0f0723",
+      "secondary-light": "#2f2b44",
+      accent: "#262238",
+      error: "#e57373",
+      info: "#00acc1",
+      success: "#4db6ac",
+      warning: "#ffd740",
+      remove: "#e57373",
+      restore: "#64b5f6",
+      album: "#ffab00",
+      download: "#00bfa5",
+      private: "#00b8d4",
+      edit: "#00b8d4",
+      share: "#9575cd",
+      love: "#ef5350",
+      terminal: "#070121",
+      navigation: "#070121",
+      "navigation-home": "#02000e",
+    },
+  },
 };
 
 /* Available Themes */
@@ -418,6 +449,11 @@ let options = [
     value: "abyss",
     disabled: false,
   },
+  {
+    text: $gettext("Electra"),
+    value: "electra",
+    disabled: false,
+  },
   {
     text: $gettext("Moonlight"),
     value: "moonlight",