diff options
Diffstat (limited to 'src/features/appearance')
-rw-r--r-- | src/features/appearance/index.ts | 46 |
1 files changed, 41 insertions, 5 deletions
diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts index b00b9df3d..da5aa0333 100644 --- a/src/features/appearance/index.ts +++ b/src/features/appearance/index.ts | |||
@@ -27,8 +27,6 @@ function darkenAbsolute(originalColor, absoluteChange) { | |||
27 | } | 27 | } |
28 | 28 | ||
29 | function generateAccentStyle(accentColorStr) { | 29 | function generateAccentStyle(accentColorStr) { |
30 | let style = ''; | ||
31 | |||
32 | let accentColor = color(DEFAULT_APP_SETTINGS.accentColor); | 30 | let accentColor = color(DEFAULT_APP_SETTINGS.accentColor); |
33 | try { | 31 | try { |
34 | accentColor = color(accentColorStr); | 32 | accentColor = color(accentColorStr); |
@@ -36,7 +34,47 @@ function generateAccentStyle(accentColorStr) { | |||
36 | // Ignore invalid accent color. | 34 | // Ignore invalid accent color. |
37 | } | 35 | } |
38 | const darkerColorStr = darkenAbsolute(accentColor, 5).hex(); | 36 | const darkerColorStr = darkenAbsolute(accentColor, 5).hex(); |
39 | style += ` | 37 | return ` |
38 | .theme__dark .app .sidebar .sidebar__button.is-muted, | ||
39 | .theme__dark .app .sidebar .sidebar__button.is-active, | ||
40 | .sidebar .sidebar__button.is-muted, .sidebar .sidebar__button.is-active, | ||
41 | .tab-item.is-active, .settings .account .invoices .invoices__action button, | ||
42 | .settings-navigation .settings-navigation__link.is-active .badge, | ||
43 | a.link, | ||
44 | button.link | ||
45 | .auth .welcome .button:hover | ||
46 | .auth .welcome .button__inverted | ||
47 | .franz-form .franz-form__radio.is-selected | ||
48 | .theme__dark .franz-form__button.franz-form__button--inverted | ||
49 | .franz-form__button.franz-form__button--inverted { | ||
50 | color: ${accentColorStr}; | ||
51 | } | ||
52 | |||
53 | .theme__dark .app .sidebar .sidebar__button.is-muted | ||
54 | .theme__dark .app .sidebar .sidebar__button.is-active | ||
55 | .sidebar .sidebar__button.is-muted | ||
56 | .sidebar .sidebar__button.is-active | ||
57 | .tab-item.is-active | ||
58 | .settings .account .invoices .invoices__action button | ||
59 | .settings-navigation .settings-navigation__link.is-active .badge | ||
60 | a.link | ||
61 | button.link | ||
62 | .auth .welcome .button:hover | ||
63 | .auth .welcome .button__inverted | ||
64 | .franz-form .franz-form__radio.is-selected | ||
65 | .theme__dark .franz-form__button.franz-form__button--inverted | ||
66 | .franz-form__button.franz-form__button--inverted { | ||
67 | background: ${accentColorStr}; | ||
68 | } | ||
69 | |||
70 | .settings .settings__header .separator { | ||
71 | border-right-color: ${accentColorStr}; | ||
72 | } | ||
73 | |||
74 | .franz-form .franz-form__radio.is-selected { | ||
75 | border-color: ${accentColorStr}; | ||
76 | } | ||
77 | |||
40 | a.button:hover, button.button:hover { | 78 | a.button:hover, button.button:hover { |
41 | background: ${darkenAbsolute(accentColor, 10).hex()}; | 79 | background: ${darkenAbsolute(accentColor, 10).hex()}; |
42 | } | 80 | } |
@@ -65,8 +103,6 @@ function generateAccentStyle(accentColorStr) { | |||
65 | background: ${accentColor.lighten(0.35).hex()}; | 103 | background: ${accentColor.lighten(0.35).hex()}; |
66 | } | 104 | } |
67 | `; | 105 | `; |
68 | |||
69 | return style; | ||
70 | } | 106 | } |
71 | 107 | ||
72 | function generateServiceRibbonWidthStyle(widthStr, iconSizeStr, vertical) { | 108 | function generateServiceRibbonWidthStyle(widthStr, iconSizeStr, vertical) { |