diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index fbcc53d7be..545261225a 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -44,6 +44,9 @@ const defaultDeviceSettings = {
apiViaStream: true,
autoPopout: false,
darkmode: false,
+ darkTheme: 'dark',
+ lightTheme: 'light',
+ themes: [],
enableSounds: true,
soundVolume: 0.5,
lang: null,
diff --git a/src/client/app/common/scripts/theme.ts b/src/client/app/theme.ts
similarity index 74%
rename from src/client/app/common/scripts/theme.ts
rename to src/client/app/theme.ts
index 7a1c6abb76..1147ff300d 100644
--- a/src/client/app/common/scripts/theme.ts
+++ b/src/client/app/theme.ts
@@ -1,22 +1,21 @@
import * as tinycolor from 'tinycolor2';
-const lightTheme = require('../../../theme/light');
-const darkTheme = require('../../../theme/dark');
type Theme = {
meta: {
id: string;
name: string;
- inherit: string;
+ author: string;
+ base?: string;
vars: any;
};
} & {
[key: string]: string;
};
-export default function(theme: Theme) {
- if (theme.meta.inherit) {
- const inherit = [lightTheme, darkTheme].find(x => x.meta.id == theme.meta.inherit);
- theme = Object.assign({}, inherit, theme);
+export function applyTheme(theme: Theme, persisted = true) {
+ if (theme.meta.base) {
+ const base = [lightTheme, darkTheme].find(x => x.meta.id == theme.meta.base);
+ theme = Object.assign({}, base, theme);
}
const props = compile(theme);
@@ -26,7 +25,9 @@ export default function(theme: Theme) {
document.documentElement.style.setProperty(`--${k}`, v.toString());
});
- localStorage.setItem('theme', JSON.stringify(props));
+ if (persisted) {
+ localStorage.setItem('theme', JSON.stringify(props));
+ }
}
function compile(theme: Theme): { [key: string]: string } {
@@ -87,3 +88,13 @@ function compile(theme: Theme): { [key: string]: string } {
function genValue(c: tinycolor.Instance): string {
return c.toRgbString();
}
+
+export const lightTheme = require('../theme/light.json');
+export const darkTheme = require('../theme/dark.json');
+export const halloweenTheme = require('../theme/halloween.json');
+
+export const builtinThemes = [
+ lightTheme,
+ darkTheme,
+ halloweenTheme
+];
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 015225ddab..74447b8f2f 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -1,6 +1,6 @@
{
"meta": {
- "id": "9978f7f9-5616-44fd-a704-cc5985efdd63",
+ "id": "dark",
"name": "Dark",
"author": "syuilo",
"vars": {
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index 6e92db95ff..fb34db57a8 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -3,10 +3,9 @@
"id": "42e4f09b-67d5-498c-af7d-29faa54745b0",
"name": "Halloween",
"author": "syuilo",
- "inherit": "9978f7f9-5616-44fd-a704-cc5985efdd63",
+ "base": "dark",
"vars": {
"primary": "#d67036",
- "primaryForeground": "#fff",
"secondary": "#1f1d30",
"text": "#b1bee3"
}
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 3d131f066a..1b6604e642 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -1,6 +1,6 @@
{
"meta": {
- "id": "406cfea3-a4e7-486c-9057-30ede1353c3f",
+ "id": "light",
"name": "Light",
"author": "syuilo",
"vars": {