aboutsummaryrefslogtreecommitdiffstats
path: root/src/features/accentColor/index.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/features/accentColor/index.js')
-rw-r--r--src/features/accentColor/index.js67
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 @@
1import { reaction } from 'mobx';
2import themeInfo from '../../assets/themeInfo.json';
3import { DEFAULT_APP_SETTINGS } from '../../config';
4
5const 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
9const ADDITIONAL_STYLES = `
10.franz-form__button {
11 background: inherit !important;
12 border: 2px solid [ACCENT] !important;
13}
14`;
15
16function createAccentStyleElement() {
17 const styles = document.createElement('style');
18 styles.id = STYLE_ELEMENT_ID;
19
20 document.querySelector('head').appendChild(styles);
21}
22
23function setAccentStyle(style) {
24 const styleElement = document.getElementById(STYLE_ELEMENT_ID);
25
26 styleElement.innerHTML = style;
27}
28
29function 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
45export 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}