Settings: Improved theme options initialization
Signed-off-by: Michael Mayer <michael@photoprism.app>
This commit is contained in:
parent
7f481e88f6
commit
a725bd2db7
|
@ -25,11 +25,14 @@ Additional information can be found in our Developer Guide:
|
||||||
|
|
||||||
import Api from "api.js";
|
import Api from "api.js";
|
||||||
import Event from "pubsub-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 translations from "locales/translations.json";
|
||||||
import { Languages } from "options/options";
|
import { Languages } from "options/options";
|
||||||
import { Photo } from "model/photo";
|
import { Photo } from "model/photo";
|
||||||
import { onSetTheme } from "common/hooks";
|
import { onSetTheme } from "common/hooks";
|
||||||
|
import { onInit } from "common/hooks";
|
||||||
|
|
||||||
|
onInit();
|
||||||
|
|
||||||
export default class Config {
|
export default class Config {
|
||||||
/**
|
/**
|
||||||
|
@ -344,8 +347,8 @@ export default class Config {
|
||||||
let theme = onSetTheme(name, this);
|
let theme = onSetTheme(name, this);
|
||||||
|
|
||||||
if (!theme) {
|
if (!theme) {
|
||||||
this.themeName = name;
|
theme = themes.Get(name);
|
||||||
theme = themes[name] ? themes[name] : themes["default"];
|
this.themeName = theme.name;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.values.settings && this.values.settings.ui) {
|
if (this.values.settings && this.values.settings.ui) {
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
export function onInit() {}
|
||||||
|
|
||||||
export function onSetTheme(/*name, config*/) {
|
export function onSetTheme(/*name, config*/) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 = () => [
|
export const MapsAnimate = () => [
|
||||||
{
|
{
|
||||||
text: $gettext("None"),
|
text: $gettext("None"),
|
||||||
|
|
495
frontend/src/options/themes.js
Normal file
495
frontend/src/options/themes.js
Normal file
|
@ -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);
|
|
@ -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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -325,8 +325,8 @@
|
||||||
<script>
|
<script>
|
||||||
import Settings from "model/settings";
|
import Settings from "model/settings";
|
||||||
import * as options from "options/options";
|
import * as options from "options/options";
|
||||||
|
import * as themes from "options/themes";
|
||||||
import Event from "pubsub-js";
|
import Event from "pubsub-js";
|
||||||
import themes from "options/themes.json";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'PSettingsGeneral',
|
name: 'PSettingsGeneral',
|
||||||
|
@ -340,7 +340,7 @@ export default {
|
||||||
options: options,
|
options: options,
|
||||||
busy: this.$config.loading(),
|
busy: this.$config.loading(),
|
||||||
subscriptions: [],
|
subscriptions: [],
|
||||||
themes: options.Themes(),
|
themes: [],
|
||||||
currentTheme: this.$config.themeName,
|
currentTheme: this.$config.themeName,
|
||||||
mapsStyle: options.MapsStyle(),
|
mapsStyle: options.MapsStyle(),
|
||||||
currentMapsStyle: this.$config.settings().maps.style,
|
currentMapsStyle: this.$config.settings().maps.style,
|
||||||
|
@ -362,12 +362,13 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
load() {
|
load() {
|
||||||
this.$config.load().then(() => {
|
this.$config.load().then(() => {
|
||||||
|
this.themes = themes.Translated();
|
||||||
this.settings.setValues(this.$config.settings());
|
this.settings.setValues(this.$config.settings());
|
||||||
this.busy = false;
|
this.busy = false;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
onChangeTheme(value) {
|
onChangeTheme(value) {
|
||||||
if(!value || !themes[value]) {
|
if(!value || !themes.Get(value)) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -375,7 +376,7 @@ export default {
|
||||||
this.currentTheme = value;
|
this.currentTheme = value;
|
||||||
this.onChange();
|
this.onChange();
|
||||||
}).catch(() => {
|
}).catch(() => {
|
||||||
if (themes[value].sponsor) {
|
if (themes.Get(value).sponsor) {
|
||||||
this.dialog.sponsor = true;
|
this.dialog.sponsor = true;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.settings.ui.theme = this.currentTheme;
|
this.settings.ui.theme = this.currentTheme;
|
||||||
|
|
|
@ -140,7 +140,7 @@ const config = {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.css$/,
|
test: /\.css$/,
|
||||||
include: PATHS.css,
|
include: isCustom ? [PATHS.custom, PATHS.css] : [PATHS.css],
|
||||||
exclude: /node_modules/,
|
exclude: /node_modules/,
|
||||||
use: [
|
use: [
|
||||||
{
|
{
|
||||||
|
|
Loading…
Reference in a new issue