[5.0] Add parameter for setting template link color in dark mode (#41925)

* Add parameter for setting template link color in dark mode

* Update administrator/language/en-GB/tpl_atum.ini

---------

Co-authored-by: Quy <[email protected]>
Co-authored-by: Harald Leithner <[email protected]>

Author: 3 people

administrator/language/en-GB/tpl_atum.ini

@@ -9,6 +9,7 @@ TPL_ATUM_BACKEND_LOGIN="Joomla Administrator Login"
 TPL_ATUM_COLORS_HUE="Choose your hue value for the dark template colour"
 TPL_ATUM_COLORS_SETTINGS_BG_LIGHT_LABEL="Light Background"
 TPL_ATUM_COLORS_SETTINGS_LABEL="Colour Settings"
+TPL_ATUM_COLORS_SETTINGS_LINK_COLOR_DARK_LABEL="Link Colour (Dark Mode)"
 TPL_ATUM_COLORS_SETTINGS_LINK_COLOR_LABEL="Link Colour"
 TPL_ATUM_COLORS_SETTINGS_MONOCHROME_LABEL="Set Colour to Monochrome"
 TPL_ATUM_COLORS_SETTINGS_SPECIAL_COLOR_LABEL="Special Colour"

administrator/templates/atum/index.php

@@ -64,6 +64,9 @@
 $linkColor = $this->params->get('link-color', '#2a69b8');
 list($r, $g, $b) = sscanf($linkColor, "#%02x%02x%02x");
 
+$linkColorDark = $this->params->get('link-color-dark', '#7fa5d4');
+list($rd, $gd, $bd) = sscanf($linkColorDark, "#%02x%02x%02x");
+
 // Enable assets
 $wa->usePreset('template.atum.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
     ->useStyle('template.active.language')
@@ -76,7 +79,11 @@
 		--link-color: ' . $linkColor . ';
 		--link-color-rgb: ' . $r . ',' . $g . ',' . $b . ';
 		--template-special-color: ' . $this->params->get('special-color', '#001B4C') . ';
-	}');
+	}')
+    ->addInlineStyle('@media (prefers-color-scheme: dark) { :root {
+		--link-color: ' . $linkColorDark . ';
+		--link-color-rgb: ' . $rd . ',' . $gd . ',' . $bd . ';
+	}}');
 
 // Override 'template.active' asset to set correct ltr/rtl dependency
 $wa->registerStyle('template.active', '', [], [], ['template.atum.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr')]);

administrator/templates/atum/templateDetails.xml

@@ -87,6 +87,13 @@
 					default="#2a69b8"
 					filter="color"
 				/>
+				<field
+					name="link-color-dark"
+					type="color"
+					label="TPL_ATUM_COLORS_SETTINGS_LINK_COLOR_DARK_LABEL"
+					default="#7fa5d4"
+					filter="color"
+				/>
 				<field
 					name="special-color"
 					type="color"