diff options
Diffstat (limited to 'src/features')
-rw-r--r-- | src/features/appearance/index.js | 10 |
1 files changed, 8 insertions, 2 deletions
diff --git a/src/features/appearance/index.js b/src/features/appearance/index.js index 3bd6a6575..82a0971eb 100644 --- a/src/features/appearance/index.js +++ b/src/features/appearance/index.js | |||
@@ -18,6 +18,12 @@ function setAppearance(style) { | |||
18 | styleElement.innerHTML = style; | 18 | styleElement.innerHTML = style; |
19 | } | 19 | } |
20 | 20 | ||
21 | // See https://github.com/Qix-/color/issues/53#issuecomment-656590710 | ||
22 | function darkenAbsolute(originalColor, absoluteChange) { | ||
23 | const originalLightness = originalColor.lightness(); | ||
24 | return originalColor.lightness(originalLightness - absoluteChange); | ||
25 | } | ||
26 | |||
21 | function generateAccentStyle(accentColorStr) { | 27 | function generateAccentStyle(accentColorStr) { |
22 | let style = ''; | 28 | let style = ''; |
23 | 29 | ||
@@ -35,10 +41,10 @@ function generateAccentStyle(accentColorStr) { | |||
35 | } catch (e) { | 41 | } catch (e) { |
36 | // Ignore invalid accent color. | 42 | // Ignore invalid accent color. |
37 | } | 43 | } |
38 | const darkerColorStr = accentColor.darken(0.05).hex(); | 44 | const darkerColorStr = darkenAbsolute(accentColor, 5).hex(); |
39 | style += ` | 45 | style += ` |
40 | a.button:hover, button.button:hover { | 46 | a.button:hover, button.button:hover { |
41 | background: ${accentColor.darken(0.1).hex()}; | 47 | background: ${darkenAbsolute(accentColor, 10).hex()}; |
42 | } | 48 | } |
43 | 49 | ||
44 | .franz-form__button:hover, | 50 | .franz-form__button:hover, |