[5.2] atum light mode - Fix modal window link color (#44176)

* Fix dark color scheme link color * Fix missing curly brace * Add missing hover color * Added phpcs:disable Side Effects to prevent drone warning * Disable drone on the function * Remove drone comments * Move function to fix drone errors * again drone issues * Made sugested changes to get drone to behave * Convert indentation from tabs to spaces
joomla · Nov 7, 2024 · 2f401da · 2f401da
1 parent 50a859b
commit 2f401da
Showing 1 changed file with 28 additions and 12 deletions.
diff --git 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 @@
 ?>
 
 <!DOCTYPE html>
-<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>"<?php echo $themeModeAttr; ?>>
+<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" <?php echo $themeModeAttr; ?>>
+
 <head>
     <jdoc:include type="metas" />
     <jdoc:include type="styles" />
     <jdoc:include type="scripts" />
 </head>
+
 <body class="contentpane component">
     <jdoc:include type="message" />
     <jdoc:include type="component" />
 </body>
+
 </html>