diff --git a/administrator/templates/atum/component.php b/administrator/templates/atum/component.php
index dd9aa21b45c14..f230be3517542 100644
--- a/administrator/templates/atum/component.php
+++ b/administrator/templates/atum/component.php
@@ -27,23 +27,36 @@
$linkColorDark = $this->params->get('link-color-dark', '#6fbfdb');
list($rd, $gd, $bd) = sscanf($linkColorDark, "#%02x%02x%02x");
+$adjustColorLightness = function ($r, $g, $b, $percent) {
+ $adjust = function ($color) use ($percent) {
+ $newColor = $color + ($color * $percent / 100);
+ return min(max(0, $newColor), 255);
+ };
+ return [$adjust($r), $adjust($g), $adjust($b)];
+};
+
+list($lighterRd, $lighterGd, $lighterBd) = $adjustColorLightness($rd, $gd, $bd, 10);
+$linkColorDarkHvr = sprintf("%d, %d, %d", $lighterRd, $lighterGd, $lighterBd);
+
// Enable assets
$wa->usePreset('template.atum.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
->useStyle('template.active.language')
->useStyle('template.user')
->addInlineStyle(':root {
- --hue: ' . $matches[1] . ';
- --template-bg-light: ' . $this->params->get('bg-light', 'var(--template-bg-light)') . ';
- --template-text-dark: ' . $this->params->get('text-dark', 'var(--template-text-dark)') . ';
- --template-text-light: ' . $this->params->get('text-light', 'var(--template-text-light)') . ';
- --link-color: ' . $linkColor . ';
+ --hue: ' . $matches[1] . ';
+ --template-bg-light: ' . $this->params->get('bg-light', 'var(--template-bg-light)') . ';
+ --template-text-dark: ' . $this->params->get('text-dark', 'var(--template-text-dark)') . ';
+ --template-text-light: ' . $this->params->get('text-light', 'var(--template-text-light)') . ';
+ --link-color: ' . $linkColor . ';
--link-color-rgb: ' . $r . ',' . $g . ',' . $b . ';
- --template-special-color: ' . $this->params->get('special-color', 'var(--template-special-color)') . ';
- }')
- ->addInlineStyle('@media (prefers-color-scheme: dark) { :root {
- --link-color: ' . $linkColorDark . ';
- --link-color-rgb: ' . $rd . ',' . $gd . ',' . $bd . ';
- }}');
+ --template-special-color: ' . $this->params->get('special-color', 'var(--template-special-color)') . ';
+ }')
+ ->addInlineStyle(':root[data-color-scheme="dark"] {
+ --link-color: ' . $linkColorDark . ';
+ --link-color-rgb: ' . $rd . ',' . $gd . ',' . $bd . ';
+ --link-color-rgb-hvr: ' . $linkColorDarkHvr . ';
+ --template-special-color: #6fbfdb;
+ }');
// No template.js for modals
$wa->disableScript('template.atum');
@@ -75,14 +88,17 @@
?>
->
+>
+
+
+