From 6e103510dc81a2721cf26660930475353a638957 Mon Sep 17 00:00:00 2001 From: syuilo Date: Mon, 18 Mar 2019 13:29:58 +0900 Subject: [PATCH] Refactor --- src/client/app/init.ts | 4 +- src/client/app/theme.ts | 60 +++++++++---------- src/client/{theme => themes}/cafe.json5 | 0 src/client/{theme => themes}/colorful.json5 | 0 src/client/{theme => themes}/dark.json5 | 0 .../black.json5 => themes/future.json5} | 0 src/client/{theme => themes}/gray.json5 | 0 .../{theme => themes}/gruvbox-dark.json5 | 0 src/client/{theme => themes}/halloween.json5 | 0 .../japanese-sushi-set.json5 | 0 .../pink.json5 => themes/lavender.json5} | 0 src/client/{theme => themes}/light.json5 | 0 src/client/{theme => themes}/mauve.json5 | 0 src/client/{theme => themes}/monokai.json5 | 0 src/client/{theme => themes}/rainy.json5 | 0 src/client/{theme => themes}/tweet-deck.json5 | 0 16 files changed, 32 insertions(+), 32 deletions(-) rename src/client/{theme => themes}/cafe.json5 (100%) rename src/client/{theme => themes}/colorful.json5 (100%) rename src/client/{theme => themes}/dark.json5 (100%) rename src/client/{theme/black.json5 => themes/future.json5} (100%) rename src/client/{theme => themes}/gray.json5 (100%) rename src/client/{theme => themes}/gruvbox-dark.json5 (100%) rename src/client/{theme => themes}/halloween.json5 (100%) rename src/client/{theme => themes}/japanese-sushi-set.json5 (100%) rename src/client/{theme/pink.json5 => themes/lavender.json5} (100%) rename src/client/{theme => themes}/light.json5 (100%) rename src/client/{theme => themes}/mauve.json5 (100%) rename src/client/{theme => themes}/monokai.json5 (100%) rename src/client/{theme => themes}/rainy.json5 (100%) rename src/client/{theme => themes}/tweet-deck.json5 (100%) diff --git a/src/client/app/init.ts b/src/client/app/init.ts index 057599235..4b9f34161 100644 --- a/src/client/app/init.ts +++ b/src/client/app/init.ts @@ -16,11 +16,11 @@ import App from './app.vue'; import checkForUpdate from './common/scripts/check-for-update'; import MiOS from './mios'; import { version, codename, lang, locale } from './config'; -import { builtinThemes, applyTheme, blackTheme } from './theme'; +import { builtinThemes, applyTheme, futureTheme } from './theme'; import Dialog from './common/views/components/dialog.vue'; if (localStorage.getItem('theme') == null) { - applyTheme(blackTheme); + applyTheme(futureTheme); } //#region FontAwesome diff --git a/src/client/app/theme.ts b/src/client/app/theme.ts index ba5eabad2..0f05f9e64 100644 --- a/src/client/app/theme.ts +++ b/src/client/app/theme.ts @@ -10,26 +10,26 @@ export type Theme = { props: { [key: string]: string }; }; -export const lightTheme: Theme = require('../theme/light.json5'); -export const darkTheme: Theme = require('../theme/dark.json5'); -export const pinkTheme: Theme = require('../theme/pink.json5'); -export const blackTheme: Theme = require('../theme/black.json5'); -export const halloweenTheme: Theme = require('../theme/halloween.json5'); -export const cafeTheme: Theme = require('../theme/cafe.json5'); -export const japaneseSushiSetTheme: Theme = require('../theme/japanese-sushi-set.json5'); -export const gruvboxDarkTheme: Theme = require('../theme/gruvbox-dark.json5'); -export const monokaiTheme: Theme = require('../theme/monokai.json5'); -export const colorfulTheme: Theme = require('../theme/colorful.json5'); -export const rainyTheme: Theme = require('../theme/rainy.json5'); -export const mauveTheme: Theme = require('../theme/mauve.json5'); -export const grayTheme: Theme = require('../theme/gray.json5'); -export const tweetDeckTheme: Theme = require('../theme/tweet-deck.json5'); +export const lightTheme: Theme = require('../themes/light.json5'); +export const darkTheme: Theme = require('../themes/dark.json5'); +export const lavenderTheme: Theme = require('../themes/lavender.json5'); +export const futureTheme: Theme = require('../themes/future.json5'); +export const halloweenTheme: Theme = require('../themes/halloween.json5'); +export const cafeTheme: Theme = require('../themes/cafe.json5'); +export const japaneseSushiSetTheme: Theme = require('../themes/japanese-sushi-set.json5'); +export const gruvboxDarkTheme: Theme = require('../themes/gruvbox-dark.json5'); +export const monokaiTheme: Theme = require('../themes/monokai.json5'); +export const colorfulTheme: Theme = require('../themes/colorful.json5'); +export const rainyTheme: Theme = require('../themes/rainy.json5'); +export const mauveTheme: Theme = require('../themes/mauve.json5'); +export const grayTheme: Theme = require('../themes/gray.json5'); +export const tweetDeckTheme: Theme = require('../themes/tweet-deck.json5'); export const builtinThemes = [ lightTheme, darkTheme, - pinkTheme, - blackTheme, + lavenderTheme, + futureTheme, halloweenTheme, cafeTheme, japaneseSushiSetTheme, @@ -42,41 +42,41 @@ export const builtinThemes = [ tweetDeckTheme, ]; -export function applyTheme(theme: Theme, persisted = true) { - document.documentElement.classList.add('changing-theme'); +export function applyTheme(themes: Theme, persisted = true) { + document.documentElement.classList.add('changing-themes'); setTimeout(() => { - document.documentElement.classList.remove('changing-theme'); + document.documentElement.classList.remove('changing-themes'); }, 1000); // Deep copy - const _theme = JSON.parse(JSON.stringify(theme)); + const _themes = JSON.parse(JSON.stringify(themes)); - if (_theme.base) { - const base = [lightTheme, darkTheme].find(x => x.id == _theme.base); - _theme.vars = Object.assign({}, base.vars, _theme.vars); - _theme.props = Object.assign({}, base.props, _theme.props); + if (_themes.base) { + const base = [lightTheme, darkTheme].find(x => x.id == _themes.base); + _themes.vars = Object.assign({}, base.vars, _themes.vars); + _themes.props = Object.assign({}, base.props, _themes.props); } - const props = compile(_theme); + const props = compile(_themes); for (const [k, v] of Object.entries(props)) { document.documentElement.style.setProperty(`--${k}`, v.toString()); } if (persisted) { - localStorage.setItem('theme', JSON.stringify(props)); + localStorage.setItem('themes', JSON.stringify(props)); } } -function compile(theme: Theme): { [key: string]: string } { +function compile(themes: Theme): { [key: string]: string } { function getColor(code: string): tinycolor.Instance { // ref if (code[0] == '@') { - return getColor(theme.props[code.substr(1)]); + return getColor(themes.props[code.substr(1)]); } if (code[0] == '$') { - return getColor(theme.vars[code.substr(1)]); + return getColor(themes.vars[code.substr(1)]); } // func @@ -98,7 +98,7 @@ function compile(theme: Theme): { [key: string]: string } { const props = {}; - for (const [k, v] of Object.entries(theme.props)) { + for (const [k, v] of Object.entries(themes.props)) { props[k] = genValue(getColor(v)); } diff --git a/src/client/theme/cafe.json5 b/src/client/themes/cafe.json5 similarity index 100% rename from src/client/theme/cafe.json5 rename to src/client/themes/cafe.json5 diff --git a/src/client/theme/colorful.json5 b/src/client/themes/colorful.json5 similarity index 100% rename from src/client/theme/colorful.json5 rename to src/client/themes/colorful.json5 diff --git a/src/client/theme/dark.json5 b/src/client/themes/dark.json5 similarity index 100% rename from src/client/theme/dark.json5 rename to src/client/themes/dark.json5 diff --git a/src/client/theme/black.json5 b/src/client/themes/future.json5 similarity index 100% rename from src/client/theme/black.json5 rename to src/client/themes/future.json5 diff --git a/src/client/theme/gray.json5 b/src/client/themes/gray.json5 similarity index 100% rename from src/client/theme/gray.json5 rename to src/client/themes/gray.json5 diff --git a/src/client/theme/gruvbox-dark.json5 b/src/client/themes/gruvbox-dark.json5 similarity index 100% rename from src/client/theme/gruvbox-dark.json5 rename to src/client/themes/gruvbox-dark.json5 diff --git a/src/client/theme/halloween.json5 b/src/client/themes/halloween.json5 similarity index 100% rename from src/client/theme/halloween.json5 rename to src/client/themes/halloween.json5 diff --git a/src/client/theme/japanese-sushi-set.json5 b/src/client/themes/japanese-sushi-set.json5 similarity index 100% rename from src/client/theme/japanese-sushi-set.json5 rename to src/client/themes/japanese-sushi-set.json5 diff --git a/src/client/theme/pink.json5 b/src/client/themes/lavender.json5 similarity index 100% rename from src/client/theme/pink.json5 rename to src/client/themes/lavender.json5 diff --git a/src/client/theme/light.json5 b/src/client/themes/light.json5 similarity index 100% rename from src/client/theme/light.json5 rename to src/client/themes/light.json5 diff --git a/src/client/theme/mauve.json5 b/src/client/themes/mauve.json5 similarity index 100% rename from src/client/theme/mauve.json5 rename to src/client/themes/mauve.json5 diff --git a/src/client/theme/monokai.json5 b/src/client/themes/monokai.json5 similarity index 100% rename from src/client/theme/monokai.json5 rename to src/client/themes/monokai.json5 diff --git a/src/client/theme/rainy.json5 b/src/client/themes/rainy.json5 similarity index 100% rename from src/client/theme/rainy.json5 rename to src/client/themes/rainy.json5 diff --git a/src/client/theme/tweet-deck.json5 b/src/client/themes/tweet-deck.json5 similarity index 100% rename from src/client/theme/tweet-deck.json5 rename to src/client/themes/tweet-deck.json5