diff options
-rw-r--r-- | src/features/appearance/index.js | 10 | ||||
-rw-r--r-- | src/styles/tabs.scss | 3 |
2 files changed, 10 insertions, 3 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, |
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss index fb2f1c32a..31a239387 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.scss | |||
@@ -33,7 +33,8 @@ | |||
33 | width: $theme-sidebar-width; | 33 | width: $theme-sidebar-width; |
34 | 34 | ||
35 | &.is-active { | 35 | &.is-active { |
36 | background: lighten($theme-brand-primary, 35%); | 36 | background: change-color($theme-brand-primary, |
37 | $lightness: min(lightness($theme-brand-primary) * 1.35, 100)); | ||
37 | border-left-width: 4px; | 38 | border-left-width: 4px; |
38 | border-left-style: solid; | 39 | border-left-style: solid; |
39 | color: $theme-brand-primary; | 40 | color: $theme-brand-primary; |