diff options
| -rw-r--r-- | apps/theming/lib/Themes/CommonThemeTrait.php | 13 | ||||
| -rw-r--r-- | apps/theming/lib/Util.php | 12 |
2 files changed, 19 insertions, 6 deletions
diff --git a/apps/theming/lib/Themes/CommonThemeTrait.php b/apps/theming/lib/Themes/CommonThemeTrait.php index 17591c232bb..e4afa892089 100644 --- a/apps/theming/lib/Themes/CommonThemeTrait.php +++ b/apps/theming/lib/Themes/CommonThemeTrait.php @@ -38,8 +38,9 @@ trait CommonThemeTrait { * will change in between. */ protected function generatePrimaryVariables(string $colorMainBackground, string $colorMainText): array { + $isBrightColor = $this->util->isBrightColor($colorMainBackground); $colorPrimaryLight = $this->util->mix($this->primaryColor, $colorMainBackground, -80); - $colorPrimaryElement = $this->util->elementColor($this->primaryColor); + $colorPrimaryElement = $this->util->elementColor($this->primaryColor, $isBrightColor); $colorPrimaryElementDefault = $this->util->elementColor($this->defaultPrimaryColor); $colorPrimaryElementLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80); @@ -65,13 +66,15 @@ trait CommonThemeTrait { // used for buttons, inputs... '--color-primary-element' => $colorPrimaryElement, - '--color-primary-element-default-hover' => $this->util->mix($colorPrimaryElementDefault, $colorMainBackground, 60), - '--color-primary-element-text' => $this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff', '--color-primary-element-hover' => $this->util->mix($colorPrimaryElement, $colorMainBackground, 60), - '--color-primary-element-light' => $colorPrimaryElementLight, - '--color-primary-element-light-text' => $this->util->mix($colorPrimaryElement, $this->util->invertTextColor($colorPrimaryElementLight) ? '#000000' : '#ffffff', -20), '--color-primary-element-light-hover' => $this->util->mix($colorPrimaryElementLight, $colorMainText, 90), + '--color-primary-element-light-text' => $this->util->mix($colorPrimaryElement, $this->util->invertTextColor($colorPrimaryElementLight) ? '#000000' : '#ffffff', -20), + '--color-primary-element-light' => $colorPrimaryElementLight, '--color-primary-element-text-dark' => $this->util->darken($this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff', 7), + '--color-primary-element-text' => $this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff', + + // default global primary element hover. To be used with --color-primary-default + '--color-primary-element-default-hover' => $this->util->mix($colorPrimaryElementDefault, $colorMainBackground, 60), // to use like this: background-image: var(--gradient-primary-background); '--gradient-primary-background' => 'linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%)', diff --git a/apps/theming/lib/Util.php b/apps/theming/lib/Util.php index a85dacd3de2..e856802cb05 100644 --- a/apps/theming/lib/Util.php +++ b/apps/theming/lib/Util.php @@ -52,10 +52,20 @@ class Util { } /** + * Should we invert the text on this background color? * @param string $color rgb color value * @return bool */ - public function invertTextColor($color) { + public function invertTextColor(string $color): bool { + return $this->isBrightColor($color); + } + + /** + * Is this color too bright ? + * @param string $color rgb color value + * @return bool + */ + public function isBrightColor(string $color): bool { $l = $this->calculateLuma($color); if ($l > 0.6) { return true; |