diff --git a/package.json b/package.json
index 1b786d1a3..a3e3b56be 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
"@types/single-line-log": "1.1.0",
"@types/speakeasy": "2.0.2",
"@types/systeminformation": "3.23.0",
+ "@types/tinycolor2": "1.4.1",
"@types/tmp": "0.0.33",
"@types/uuid": "3.4.4",
"@types/webpack": "4.4.12",
@@ -194,6 +195,7 @@
"systeminformation": "3.45.6",
"syuilo-password-strength": "0.0.1",
"textarea-caret": "3.1.0",
+ "tinycolor2": "1.4.1",
"tmp": "0.0.33",
"ts-loader": "4.4.1",
"ts-node": "7.0.1",
diff --git a/src/client/app/app.styl b/src/client/app/app.styl
index 3911f83a6..2f0095944 100644
--- a/src/client/app/app.styl
+++ b/src/client/app/app.styl
@@ -27,7 +27,7 @@ body
z-index 65536
.bar
- background $theme-color
+ background var(--primary)
position fixed
z-index 65537
@@ -44,7 +44,7 @@ body
right 0px
width 100px
height 100%
- box-shadow 0 0 10px $theme-color, 0 0 5px $theme-color
+ box-shadow 0 0 10px var(--primary), 0 0 5px var(--primary)
opacity 1
transform rotate(3deg) translate(0px, -4px)
@@ -64,8 +64,8 @@ body
box-sizing border-box
border solid 2px transparent
- border-top-color $theme-color
- border-left-color $theme-color
+ border-top-color var(--primary)
+ border-left-color var(--primary)
border-radius 50%
animation progress-spinner 400ms linear infinite
diff --git a/src/client/app/common/scripts/theme.ts b/src/client/app/common/scripts/theme.ts
index 7fbac7f57..2cad547c0 100644
--- a/src/client/app/common/scripts/theme.ts
+++ b/src/client/app/common/scripts/theme.ts
@@ -1,3 +1,5 @@
+import * as tinycolor from 'tinycolor2';
+
export default function(theme: { [key: string]: string }) {
const props = compile(theme);
@@ -10,56 +12,47 @@ export default function(theme: { [key: string]: string }) {
}
function compile(theme: { [key: string]: string }): { [key: string]: string } {
- function getRgba(code: string): number[] {
+ function getColor(code: string): tinycolor.Instance {
// ref
if (code[0] == '@') {
- return getRgba(theme[code.substr(1)]);
+ return getColor(theme[code.substr(1)]);
}
- let m;
-
- //#region #RGB
- m = code.match(/^#([0-9a-f]{3})$/i);
- if (m) {
- return [
- parseInt(m[1].charAt(0), 16) * 0x11,
- parseInt(m[1].charAt(1), 16) * 0x11,
- parseInt(m[1].charAt(2), 16) * 0x11,
- 255
- ];
- }
- //#endregion
-
- //#region #RRGGBB
- m = code.match(/^#([0-9a-f]{6})$/i);
- if (m) {
- return [
- parseInt(m[1].substr(0, 2), 16),
- parseInt(m[1].substr(2, 2), 16),
- parseInt(m[1].substr(4, 2), 16),
- 255
- ];
- }
- //#endregion
-
- return [0, 0, 0, 255];
+ return tinycolor(code);
}
const props = {};
Object.entries(theme).forEach(([k, v]) => {
if (k == 'meta') return;
- const [r, g, b, a] = getRgba(v);
- props[k] = genValue(r, g, b, a);
- props[`${k}-r`] = r;
- props[`${k}-g`] = g;
- props[`${k}-b`] = b;
- props[`${k}-a`] = a;
+ const c = getColor(v);
+ props[k] = genValue(c);
+ props[`${k}-r`] = c.toRgb().r;
+ props[`${k}-g`] = c.toRgb().g;
+ props[`${k}-b`] = c.toRgb().b;
+ props[`${k}-a`] = c.toRgb().a;
});
+ const primary = getColor(props['primary']);
+
+ for (let i = 1; i < 10; i++) {
+ const color = primary.clone().setAlpha(i / 10);
+ props['primaryAlpha0' + i] = genValue(color);
+ }
+
+ for (let i = 1; i < 100; i++) {
+ const color = primary.clone().lighten(i);
+ props['primaryLighten' + i] = genValue(color);
+ }
+
+ for (let i = 1; i < 100; i++) {
+ const color = primary.clone().darken(i);
+ props['primaryDarken' + i] = genValue(color);
+ }
+
return props;
}
-function genValue(r: number, g: number, b: number, a: number): string {
- return a != 255 ? `rgba(${r}, ${g}, ${b}, ${a})` : `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
+function genValue(c: tinycolor.Instance): string {
+ return c.toRgbString();
}
diff --git a/src/client/app/common/views/components/autocomplete.vue b/src/client/app/common/views/components/autocomplete.vue
index ea05afd6d..99a87520a 100644
--- a/src/client/app/common/views/components/autocomplete.vue
+++ b/src/client/app/common/views/components/autocomplete.vue
@@ -259,7 +259,7 @@ export default Vue.extend({
diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index e6267ed20..2e3ffd171 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -216,7 +216,7 @@ export default Vue.extend({
diff --git a/src/client/app/desktop/views/components/ui.header.search.vue b/src/client/app/desktop/views/components/ui.header.search.vue
index 9a36e52fc..d5794dc88 100644
--- a/src/client/app/desktop/views/components/ui.header.search.vue
+++ b/src/client/app/desktop/views/components/ui.header.search.vue
@@ -28,7 +28,7 @@ export default Vue.extend({
diff --git a/src/client/app/mobile/views/components/dialog.vue b/src/client/app/mobile/views/components/dialog.vue
index 6a0d74c75..fff44a28c 100644
--- a/src/client/app/mobile/views/components/dialog.vue
+++ b/src/client/app/mobile/views/components/dialog.vue
@@ -91,7 +91,7 @@ export default Vue.extend({
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 68be9f8ac..6daf375ed 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -223,7 +223,7 @@ export default Vue.extend({
diff --git a/src/client/app/mobile/views/pages/notifications.vue b/src/client/app/mobile/views/pages/notifications.vue
index bddcd457b..ce33332fa 100644
--- a/src/client/app/mobile/views/pages/notifications.vue
+++ b/src/client/app/mobile/views/pages/notifications.vue
@@ -34,7 +34,7 @@ export default Vue.extend({