From a725bd2db77c2b8392797e7ed502f539fe3e60f2 Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@photoprism.app>
Date: Mon, 11 Jul 2022 03:13:09 +0200
Subject: [PATCH] Settings: Improved theme options initialization

Signed-off-by: Michael Mayer <michael@photoprism.app>
---
 frontend/src/common/config.js           |   9 +-
 frontend/src/common/hooks.js            |   2 +
 frontend/src/options/options.js         |  73 ----
 frontend/src/options/themes.js          | 495 ++++++++++++++++++++++++
 frontend/src/options/themes.json        | 379 ------------------
 frontend/src/pages/settings/general.vue |   9 +-
 frontend/webpack.config.js              |   2 +-
 7 files changed, 509 insertions(+), 460 deletions(-)
 create mode 100644 frontend/src/options/themes.js
 delete mode 100644 frontend/src/options/themes.json

diff --git a/frontend/src/common/config.js b/frontend/src/common/config.js
index eb6731842..000b0c425 100644
--- a/frontend/src/common/config.js
+++ b/frontend/src/common/config.js
@@ -25,11 +25,14 @@ Additional information can be found in our Developer Guide:
 
 import Api from "api.js";
 import Event from "pubsub-js";
-import themes from "options/themes.json";
+import * as themes from "options/themes";
 import translations from "locales/translations.json";
 import { Languages } from "options/options";
 import { Photo } from "model/photo";
 import { onSetTheme } from "common/hooks";
+import { onInit } from "common/hooks";
+
+onInit();
 
 export default class Config {
   /**
@@ -344,8 +347,8 @@ export default class Config {
     let theme = onSetTheme(name, this);
 
     if (!theme) {
-      this.themeName = name;
-      theme = themes[name] ? themes[name] : themes["default"];
+      theme = themes.Get(name);
+      this.themeName = theme.name;
     }
 
     if (this.values.settings && this.values.settings.ui) {
diff --git a/frontend/src/common/hooks.js b/frontend/src/common/hooks.js
index 42543d5f5..28cc5b32d 100644
--- a/frontend/src/common/hooks.js
+++ b/frontend/src/common/hooks.js
@@ -1,3 +1,5 @@
+export function onInit() {}
+
 export function onSetTheme(/*name, config*/) {
   return false;
 }
diff --git a/frontend/src/options/options.js b/frontend/src/options/options.js
index e0452f11a..60fda8131 100644
--- a/frontend/src/options/options.js
+++ b/frontend/src/options/options.js
@@ -214,79 +214,6 @@ export const Languages = () => [
   },
 ];
 
-let themes = [
-  {
-    text: $gettext("Default"),
-    value: "default",
-    disabled: false,
-  },
-  {
-    text: $gettext("Grayscale"),
-    value: "grayscale",
-    disabled: false,
-  },
-  {
-    text: $gettext("Vanta"),
-    value: "vanta",
-    disabled: false,
-  },
-  {
-    text: $gettext("Abyss"),
-    value: "abyss",
-    disabled: false,
-  },
-  {
-    text: $gettext("Moonlight"),
-    value: "moonlight",
-    disabled: false,
-  },
-  {
-    text: $gettext("Onyx"),
-    value: "onyx",
-    disabled: false,
-  },
-  {
-    text: $gettext("Cyano"),
-    value: "cyano",
-    disabled: false,
-  },
-  {
-    text: $gettext("Lavender"),
-    value: "lavender",
-    disabled: false,
-  },
-  {
-    text: $gettext("Gemstone"),
-    value: "gemstone",
-    disabled: false,
-  },
-  {
-    text: $gettext("Raspberry"),
-    value: "raspberry",
-    disabled: false,
-  },
-  {
-    text: $gettext("Seaweed"),
-    value: "seaweed",
-    disabled: false,
-  },
-  {
-    text: $gettext("Shadow"),
-    value: "shadow",
-    disabled: false,
-  },
-  {
-    text: $gettext("Yellowstone"),
-    value: "yellowstone",
-    disabled: false,
-  },
-];
-
-export const Themes = () => themes;
-export const SetThemes = (v) => {
-  themes = v;
-};
-
 export const MapsAnimate = () => [
   {
     text: $gettext("None"),
diff --git a/frontend/src/options/themes.js b/frontend/src/options/themes.js
new file mode 100644
index 000000000..ba3adbd06
--- /dev/null
+++ b/frontend/src/options/themes.js
@@ -0,0 +1,495 @@
+import { $gettext } from "common/vm";
+
+/* Theme Styles */
+
+let themes = {
+  default: {
+    name: "default",
+    dark: false,
+    sponsor: false,
+    colors: {
+      application: "#F5F5F5",
+      form: "#eeeeee",
+      primary: "#FFCA28",
+      "primary-button": "#212121",
+      "secondary-dark": "#212121",
+      secondary: "#bdbdbd",
+      "secondary-light": "#e0e0e0",
+      accent: "#757575",
+      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: "#333333",
+      navigation: "#212121",
+      "navigation-home": "#000000",
+    },
+  },
+  grayscale: {
+    name: "grayscale",
+    dark: true,
+    sponsor: false,
+    colors: {
+      application: "#525252",
+      form: "#e5e4e2",
+      primary: "#c8bdb1",
+      "primary-button": "#726e69",
+      "secondary-dark": "#c8bdb1",
+      secondary: "#444",
+      "secondary-light": "#5E5E5E",
+      accent: "#333",
+      error: "#e57373",
+      info: "#5a94dd",
+      success: "#4db6ac",
+      warning: "#e3d181",
+      love: "#ef5350",
+      remove: "#e35333",
+      restore: "#64b5f6",
+      album: "#ffab40",
+      download: "#07bd9f",
+      private: "#48bcd6",
+      edit: "#48bcd6",
+      share: "#0070a0",
+      terminal: "#333333",
+      navigation: "#353839",
+      "navigation-home": "#212121",
+    },
+  },
+  cyano: {
+    name: "cyano",
+    dark: false,
+    sponsor: false,
+    colors: {
+      application: "#eceff1",
+      form: "#eceff1",
+      primary: "#80deea",
+      "primary-button": "#757575",
+      "secondary-dark": "#757575",
+      secondary: "#b0bec5",
+      "secondary-light": "#eeeeee",
+      accent: "#757575",
+      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: "#333333",
+      navigation: "#006064",
+      "navigation-home": "#37474f",
+    },
+  },
+  raspberry: {
+    name: "raspberry",
+    dark: false,
+    sponsor: false,
+    colors: {
+      application: "#FDEDF5",
+      form: "#fafafa",
+      primary: "#ffb3cc",
+      "primary-button": "#EA3495",
+      "secondary-dark": "#EA3495",
+      secondary: "#F6C5DC",
+      "secondary-light": "#FDD8E7",
+      accent: "#B994A5",
+      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: "#a97599",
+      navigation: "#A21F65",
+      "navigation-home": "#891A55",
+    },
+  },
+  seaweed: {
+    name: "seaweed",
+    dark: false,
+    sponsor: false,
+    colors: {
+      application: "#fafafa",
+      form: "#fafafa",
+      primary: "#26a69a",
+      "primary-button": "#3b5e5b",
+      "secondary-dark": "#1c7d73",
+      secondary: "#b0bec5",
+      "secondary-light": "#c1ccd1",
+      accent: "#b0bec5",
+      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: "#333333",
+      navigation: "#37474f",
+      "navigation-home": "#263238",
+    },
+  },
+  lavender: {
+    name: "lavender",
+    dark: false,
+    sponsor: false,
+    colors: {
+      application: "#fafafa",
+      form: "#fafafa",
+      primary: "#9ca2c9",
+      "primary-button": "#6c6f84",
+      "secondary-dark": "#475185",
+      secondary: "#dee0ed",
+      "secondary-light": "#eef0f6",
+      accent: "#8c8c8c",
+      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: "#333333",
+      navigation: "#1b1e32",
+      "navigation-home": "#121421",
+    },
+  },
+  moonlight: {
+    name: "moonlight",
+    dark: false,
+    sponsor: false,
+    colors: {
+      application: "#eeeeee",
+      form: "#eeeeee",
+      primary: "#a5b3c0",
+      "primary-button": "#212121",
+      "secondary-dark": "#212121",
+      secondary: "#bdbdbd",
+      "secondary-light": "#e0e0e0",
+      accent: "#757575",
+      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: "#333333",
+      navigation: "#212121",
+      "navigation-home": "#000000",
+    },
+  },
+  onyx: {
+    name: "onyx",
+    dark: false,
+    sponsor: false,
+    colors: {
+      application: "#e5e4e2",
+      form: "#e5e4e2",
+      primary: "#c8bdb1",
+      "primary-button": "#353839",
+      "secondary-dark": "#353839",
+      secondary: "#a8a8a8",
+      "secondary-light": "#cdccca",
+      accent: "#656565",
+      error: "#e57373",
+      info: "#5a94dd",
+      success: "#4db6ac",
+      warning: "#e3d181",
+      love: "#ef5350",
+      remove: "#e35333",
+      restore: "#64b5f6",
+      album: "#ffab40",
+      download: "#07bd9f",
+      private: "#48bcd6",
+      edit: "#48bcd6",
+      share: "#0070a0",
+      terminal: "#333333",
+      navigation: "#353839",
+      "navigation-home": "#212121",
+    },
+  },
+  shadow: {
+    name: "shadow",
+    dark: true,
+    sponsor: true,
+    colors: {
+      application: "#444",
+      form: "#eeeeee",
+      primary: "#c4f1e5",
+      "primary-button": "#74817d",
+      "secondary-dark": "#c8e3e7",
+      secondary: "#585858",
+      "secondary-light": "#666",
+      accent: "#333",
+      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: "#333333",
+      navigation: "#212121",
+      "navigation-home": "#000000",
+    },
+  },
+  yellowstone: {
+    name: "yellowstone",
+    dark: true,
+    sponsor: true,
+    colors: {
+      application: "#444",
+      form: "#eeeeee",
+      primary: "#ffb700",
+      "primary-button": "#918c7d",
+      "secondary-dark": "#ffb700",
+      secondary: "#585858",
+      "secondary-light": "#666",
+      accent: "#333",
+      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: "#333333",
+      navigation: "#111",
+      "navigation-home": "#000000",
+    },
+  },
+  vanta: {
+    name: "vanta",
+    dark: true,
+    sponsor: true,
+    colors: {
+      application: "#212121",
+      form: "#AFB42B",
+      primary: "#04acaf",
+      "primary-button": "#444444",
+      "secondary-dark": "#04acaf",
+      secondary: "#111111",
+      "secondary-light": "#1a1a1a",
+      accent: "#090c10",
+      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: "#333333",
+      navigation: "#0d0d0d",
+      "navigation-home": "#000000",
+    },
+  },
+  abyss: {
+    name: "abyss",
+    dark: true,
+    sponsor: true,
+    colors: {
+      application: "#212121",
+      form: "#AFB42B",
+      primary: "#7e57c2",
+      "primary-button": "#7e57c2",
+      "secondary-dark": "#7e57c2",
+      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",
+    },
+  },
+  gemstone: {
+    name: "gemstone",
+    dark: true,
+    sponsor: true,
+    colors: {
+      application: "#353535",
+      form: "#eeeeee",
+      primary: "#AFB4D4",
+      "primary-button": "#545465",
+      "secondary-dark": "#9BA0C5",
+      secondary: "#272727",
+      "secondary-light": "#424242",
+      accent: "#333",
+      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: "#4A464F",
+      navigation: "#1C1C21",
+      "navigation-home": "#131316",
+    },
+  },
+};
+
+/* Available Themes */
+
+let options = [
+  {
+    text: $gettext("Default"),
+    value: "default",
+    disabled: false,
+  },
+  {
+    text: $gettext("Grayscale"),
+    value: "grayscale",
+    disabled: false,
+  },
+  {
+    text: $gettext("Vanta"),
+    value: "vanta",
+    disabled: false,
+  },
+  {
+    text: $gettext("Abyss"),
+    value: "abyss",
+    disabled: false,
+  },
+  {
+    text: $gettext("Moonlight"),
+    value: "moonlight",
+    disabled: false,
+  },
+  {
+    text: $gettext("Onyx"),
+    value: "onyx",
+    disabled: false,
+  },
+  {
+    text: $gettext("Cyano"),
+    value: "cyano",
+    disabled: false,
+  },
+  {
+    text: $gettext("Lavender"),
+    value: "lavender",
+    disabled: false,
+  },
+  {
+    text: $gettext("Gemstone"),
+    value: "gemstone",
+    disabled: false,
+  },
+  {
+    text: $gettext("Raspberry"),
+    value: "raspberry",
+    disabled: false,
+  },
+  {
+    text: $gettext("Seaweed"),
+    value: "seaweed",
+    disabled: false,
+  },
+  {
+    text: $gettext("Shadow"),
+    value: "shadow",
+    disabled: false,
+  },
+  {
+    text: $gettext("Yellowstone"),
+    value: "yellowstone",
+    disabled: false,
+  },
+];
+
+/* Theme Functions */
+
+export const Get = (name) => {
+  if (typeof themes[name] === "undefined") {
+    return themes[options[0].value];
+  }
+
+  return themes[name];
+};
+
+export const Set = (name, val) => (themes[name] = val);
+
+export const Translated = () => {
+  return options.map((v) => {
+    if (v.disabled) {
+      return null;
+    }
+
+    return {
+      text: $gettext(v.text),
+      value: v.value,
+    };
+  });
+};
+
+export const Options = () => options;
+
+export const SetOptions = (v) => (options = v);
diff --git a/frontend/src/options/themes.json b/frontend/src/options/themes.json
deleted file mode 100644
index 803114da6..000000000
--- a/frontend/src/options/themes.json
+++ /dev/null
@@ -1,379 +0,0 @@
-{
-  "default": {
-    "dark": false,
-    "sponsor": false,
-    "colors": {
-      "application": "#F5F5F5",
-      "form": "#eeeeee",
-      "primary": "#FFCA28",
-      "primary-button": "#212121",
-      "secondary-dark": "#212121",
-      "secondary": "#bdbdbd",
-      "secondary-light": "#e0e0e0",
-      "accent": "#757575",
-      "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": "#333333",
-      "navigation": "#212121",
-      "navigation-home": "#000000"
-    }
-  },
-  "grayscale": {
-    "dark": true,
-    "sponsor": false,
-    "colors": {
-      "application": "#525252",
-      "form": "#e5e4e2",
-      "primary": "#c8bdb1",
-      "primary-button": "#726e69",
-      "secondary-dark": "#c8bdb1",
-      "secondary": "#444",
-      "secondary-light": "#5E5E5E",
-      "accent": "#333",
-      "error": "#e57373",
-      "info": "#5a94dd",
-      "success": "#4db6ac",
-      "warning": "#e3d181",
-      "love": "#ef5350",
-      "remove": "#e35333",
-      "restore": "#64b5f6",
-      "album": "#ffab40",
-      "download": "#07bd9f",
-      "private": "#48bcd6",
-      "edit": "#48bcd6",
-      "share": "#0070a0",
-      "terminal": "#333333",
-      "navigation": "#353839",
-      "navigation-home": "#212121"
-    }
-  },
-  "cyano": {
-    "dark": false,
-    "sponsor": false,
-    "colors": {
-      "application": "#eceff1",
-      "form": "#eceff1",
-      "primary": "#80deea",
-      "primary-button": "#757575",
-      "secondary-dark": "#757575",
-      "secondary": "#b0bec5",
-      "secondary-light": "#eeeeee",
-      "accent": "#757575",
-      "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": "#333333",
-      "navigation": "#006064",
-      "navigation-home": "#37474f"
-    }
-  },
-  "raspberry": {
-    "dark": false,
-    "sponsor": false,
-    "colors": {
-      "application": "#FDEDF5",
-      "form": "#fafafa",
-      "primary": "#ffb3cc",
-      "primary-button": "#EA3495",
-      "secondary-dark": "#EA3495",
-      "secondary": "#F6C5DC",
-      "secondary-light": "#FDD8E7",
-      "accent": "#B994A5",
-      "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": "#a97599",
-      "navigation": "#A21F65",
-      "navigation-home": "#891A55"
-    }
-  },
-  "seaweed": {
-    "dark": false,
-    "sponsor": false,
-    "colors": {
-      "application": "#fafafa",
-      "form": "#fafafa",
-      "primary": "#26a69a",
-      "primary-button": "#3b5e5b",
-      "secondary-dark": "#1c7d73",
-      "secondary": "#b0bec5",
-      "secondary-light": "#c1ccd1",
-      "accent": "#b0bec5",
-      "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": "#333333",
-      "navigation": "#37474f",
-      "navigation-home": "#263238"
-    }
-  },
-  "lavender": {
-    "dark": false,
-    "sponsor": false,
-    "colors": {
-      "application": "#fafafa",
-      "form": "#fafafa",
-      "primary": "#9ca2c9",
-      "primary-button": "#6c6f84",
-      "secondary-dark": "#475185",
-      "secondary": "#dee0ed",
-      "secondary-light": "#eef0f6",
-      "accent": "#8c8c8c",
-      "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": "#333333",
-      "navigation": "#1b1e32",
-      "navigation-home": "#121421"
-    }
-  },
-  "moonlight": {
-    "dark": false,
-    "sponsor": false,
-    "colors": {
-      "application": "#eeeeee",
-      "form": "#eeeeee",
-      "primary": "#a5b3c0",
-      "primary-button": "#212121",
-      "secondary-dark": "#212121",
-      "secondary": "#bdbdbd",
-      "secondary-light": "#e0e0e0",
-      "accent": "#757575",
-      "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": "#333333",
-      "navigation": "#212121",
-      "navigation-home": "#000000"
-    }
-  },
-  "onyx": {
-    "dark": false,
-    "sponsor": false,
-    "colors": {
-      "application": "#e5e4e2",
-      "form": "#e5e4e2",
-      "primary": "#c8bdb1",
-      "primary-button": "#353839",
-      "secondary-dark": "#353839",
-      "secondary": "#a8a8a8",
-      "secondary-light": "#cdccca",
-      "accent": "#656565",
-      "error": "#e57373",
-      "info": "#5a94dd",
-      "success": "#4db6ac",
-      "warning": "#e3d181",
-      "love": "#ef5350",
-      "remove": "#e35333",
-      "restore": "#64b5f6",
-      "album": "#ffab40",
-      "download": "#07bd9f",
-      "private": "#48bcd6",
-      "edit": "#48bcd6",
-      "share": "#0070a0",
-      "terminal": "#333333",
-      "navigation": "#353839",
-      "navigation-home": "#212121"
-    }
-  },
-  "shadow": {
-    "dark": true,
-    "sponsor": true,
-    "colors": {
-      "application": "#444",
-      "form": "#eeeeee",
-      "primary": "#c4f1e5",
-      "primary-button": "#74817d",
-      "secondary-dark": "#c8e3e7",
-      "secondary": "#585858",
-      "secondary-light": "#666",
-      "accent": "#333",
-      "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": "#333333",
-      "navigation": "#212121",
-      "navigation-home": "#000000"
-    }
-  },
-  "yellowstone": {
-    "dark": true,
-    "sponsor": true,
-    "colors": {
-      "application": "#444",
-      "form": "#eeeeee",
-      "primary": "#ffb700",
-      "primary-button": "#918c7d",
-      "secondary-dark": "#ffb700",
-      "secondary": "#585858",
-      "secondary-light": "#666",
-      "accent": "#333",
-      "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": "#333333",
-      "navigation": "#111",
-      "navigation-home": "#000000"
-    }
-  },
-  "vanta": {
-    "dark": true,
-    "sponsor": true,
-    "colors": {
-      "application": "#212121",
-      "form": "#AFB42B",
-      "primary": "#04acaf",
-      "primary-button": "#444444",
-      "secondary-dark": "#04acaf",
-      "secondary": "#111111",
-      "secondary-light": "#1a1a1a",
-      "accent": "#090c10",
-      "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": "#333333",
-      "navigation": "#0d0d0d",
-      "navigation-home": "#000000"
-    }
-  },
-  "abyss": {
-    "dark": true,
-    "sponsor": true,
-    "colors": {
-      "application": "#212121",
-      "form": "#AFB42B",
-      "primary": "#7e57c2",
-      "primary-button": "#7e57c2",
-      "secondary-dark": "#7e57c2",
-      "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"
-    }
-  },
-  "gemstone": {
-    "dark": true,
-    "sponsor": true,
-    "colors": {
-      "application": "#353535",
-      "form": "#eeeeee",
-      "primary": "#AFB4D4",
-      "primary-button": "#545465",
-      "secondary-dark": "#9BA0C5",
-      "secondary": "#272727",
-      "secondary-light": "#424242",
-      "accent": "#333",
-      "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": "#4A464F",
-      "navigation": "#1C1C21",
-      "navigation-home": "#131316"
-    }
-  }
-}
diff --git a/frontend/src/pages/settings/general.vue b/frontend/src/pages/settings/general.vue
index bbffb50d5..def2672b8 100644
--- a/frontend/src/pages/settings/general.vue
+++ b/frontend/src/pages/settings/general.vue
@@ -325,8 +325,8 @@
 <script>
 import Settings from "model/settings";
 import * as options from "options/options";
+import * as themes from "options/themes";
 import Event from "pubsub-js";
-import themes from "options/themes.json";
 
 export default {
   name: 'PSettingsGeneral',
@@ -340,7 +340,7 @@ export default {
       options: options,
       busy: this.$config.loading(),
       subscriptions: [],
-      themes: options.Themes(),
+      themes: [],
       currentTheme: this.$config.themeName,
       mapsStyle: options.MapsStyle(),
       currentMapsStyle: this.$config.settings().maps.style,
@@ -362,12 +362,13 @@ export default {
   methods: {
     load() {
       this.$config.load().then(() => {
+        this.themes = themes.Translated();
         this.settings.setValues(this.$config.settings());
         this.busy = false;
       });
     },
     onChangeTheme(value) {
-      if(!value || !themes[value]) {
+      if(!value || !themes.Get(value)) {
         return false;
       }
 
@@ -375,7 +376,7 @@ export default {
         this.currentTheme = value;
         this.onChange();
       }).catch(() => {
-        if (themes[value].sponsor) {
+        if (themes.Get(value).sponsor) {
           this.dialog.sponsor = true;
           this.$nextTick(() => {
             this.settings.ui.theme = this.currentTheme;
diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
index c68576929..f2224396c 100644
--- a/frontend/webpack.config.js
+++ b/frontend/webpack.config.js
@@ -140,7 +140,7 @@ const config = {
       },
       {
         test: /\.css$/,
-        include: PATHS.css,
+        include: isCustom ? [PATHS.custom, PATHS.css] : [PATHS.css],
         exclude: /node_modules/,
         use: [
           {