diff options
author | 2019-11-28 17:07:32 +0100 | |
---|---|---|
committer | 2019-11-28 17:07:32 +0100 | |
commit | 6eb6f75223d3eebcf31b33897d72f07fe93f02ad (patch) | |
tree | 572e681b535ba102dd10df9096b6e0ae72e0506b /src/features/accentColor/index.js | |
parent | Disable artifacts storage on AppVeyor (diff) | |
download | ferdium-app-6eb6f75223d3eebcf31b33897d72f07fe93f02ad.tar.gz ferdium-app-6eb6f75223d3eebcf31b33897d72f07fe93f02ad.tar.zst ferdium-app-6eb6f75223d3eebcf31b33897d72f07fe93f02ad.zip |
Add appearance feature handler
Diffstat (limited to 'src/features/accentColor/index.js')
-rw-r--r-- | src/features/accentColor/index.js | 67 |
1 files changed, 0 insertions, 67 deletions
diff --git a/src/features/accentColor/index.js b/src/features/accentColor/index.js deleted file mode 100644 index 90fbcab43..000000000 --- a/src/features/accentColor/index.js +++ /dev/null | |||
@@ -1,67 +0,0 @@ | |||
1 | import { reaction } from 'mobx'; | ||
2 | import themeInfo from '../../assets/themeInfo.json'; | ||
3 | import { DEFAULT_APP_SETTINGS } from '../../config'; | ||
4 | |||
5 | const STYLE_ELEMENT_ID = 'accent-color'; | ||
6 | |||
7 | // Additional styles needed to make accent colors work properly | ||
8 | // "[ACCENT]" will be replaced with the accent color | ||
9 | const ADDITIONAL_STYLES = ` | ||
10 | .franz-form__button { | ||
11 | background: inherit !important; | ||
12 | border: 2px solid [ACCENT] !important; | ||
13 | } | ||
14 | `; | ||
15 | |||
16 | function createAccentStyleElement() { | ||
17 | const styles = document.createElement('style'); | ||
18 | styles.id = STYLE_ELEMENT_ID; | ||
19 | |||
20 | document.querySelector('head').appendChild(styles); | ||
21 | } | ||
22 | |||
23 | function setAccentStyle(style) { | ||
24 | const styleElement = document.getElementById(STYLE_ELEMENT_ID); | ||
25 | |||
26 | styleElement.innerHTML = style; | ||
27 | } | ||
28 | |||
29 | function generateAccentStyle(color) { | ||
30 | let style = ''; | ||
31 | |||
32 | Object.keys(themeInfo).forEach((property) => { | ||
33 | style += ` | ||
34 | ${themeInfo[property]} { | ||
35 | ${property}: ${color}; | ||
36 | } | ||
37 | `; | ||
38 | }); | ||
39 | |||
40 | style += ADDITIONAL_STYLES.replace(/\[ACCENT\]/g, color); | ||
41 | |||
42 | return style; | ||
43 | } | ||
44 | |||
45 | export default function initAccentColor(stores) { | ||
46 | const { settings } = stores; | ||
47 | createAccentStyleElement(); | ||
48 | |||
49 | // Update accent color | ||
50 | reaction( | ||
51 | () => ( | ||
52 | settings.all.app.accentColor | ||
53 | ), | ||
54 | (color) => { | ||
55 | if (color === DEFAULT_APP_SETTINGS.accentColor) { | ||
56 | // Reset accent style to return to default color scheme | ||
57 | setAccentStyle(''); | ||
58 | } else { | ||
59 | const style = generateAccentStyle(color); | ||
60 | setAccentStyle(style); | ||
61 | } | ||
62 | }, | ||
63 | { | ||
64 | fireImmediately: true, | ||
65 | }, | ||
66 | ); | ||
67 | } | ||