WIP: Add parameter-based color customization to template backend #80

Closed
Copilot wants to merge 6 commits from copilot/investigate-template-color-parameters into main
Showing only changes of commit b182beb66d - Show all commits

View File

@@ -121,7 +121,67 @@ try {
// Custom color parameters - generate inline CSS for color overrides // Custom color parameters - generate inline CSS for color overrides
$customColorCSS = ''; $customColorCSS = '';
// Light mode custom colors /**
* Helper function to sanitize color values for CSS
* Accepts hex, rgb, rgba, hsl, hsla, and named colors
* @param string $color The color value to sanitize
* @return string|null Sanitized color or null if invalid
*/
$sanitizeColor = function($color) {
$color = trim($color);
if (empty($color)) {
return null;
}
// Allow hex colors (#fff, #ffffff, #ffffffff)
if (preg_match('/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/', $color)) {
return strtolower($color);
}
// Allow rgb/rgba
if (preg_match('/^rgba?\s*\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}(\s*,\s*[\d.]+)?\s*\)$/i', $color)) {
return strtolower($color);
}
// Allow hsl/hsla
if (preg_match('/^hsla?\s*\(\s*\d{1,3}\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%(\s*,\s*[\d.]+)?\s*\)$/i', $color)) {
return strtolower($color);
}
// Allow named colors (common CSS color names)
$namedColors = ['transparent', 'black', 'white', 'red', 'green', 'blue', 'yellow', 'cyan', 'magenta',
'gray', 'grey', 'silver', 'navy', 'teal', 'aqua', 'lime', 'olive', 'maroon', 'purple', 'fuchsia'];
if (in_array(strtolower($color), $namedColors, true)) {
return strtolower($color);
}
return null;
};
/**
* Helper function to generate CSS overrides for a theme
* @param array $colorMap Array mapping parameter names to CSS variables
* @param string $theme Theme name ('light' or 'dark')
* @return string CSS rules or empty string
*/
$generateThemeCSS = function($colorMap, $theme) use ($sanitizeColor) {
$overrides = [];
foreach ($colorMap as $param => $cssVar) {
$value = $this->params->get($param, '');
$sanitized = $sanitizeColor($value);
if ($sanitized !== null) {
$overrides[] = $cssVar . ': ' . $sanitized . ';';
}
}
if (!empty($overrides)) {
return ":root[data-bs-theme='" . $theme . "'] {\n" . implode("\n", $overrides) . "\n}\n";
}
return '';
};
// Define color mappings for light and dark modes
$lightColors = [ $lightColors = [
'light_color_primary' => '--color-primary', 'light_color_primary' => '--color-primary',
'light_accent_primary' => '--accent-color-primary', 'light_accent_primary' => '--accent-color-primary',
@@ -134,19 +194,6 @@ $lightColors = [
'light_bootstrap_primary' => '--primary', 'light_bootstrap_primary' => '--primary',
]; ];
$lightOverrides = [];
foreach ($lightColors as $param => $cssVar) {
$value = $this->params->get($param, '');
if (!empty($value)) {
$lightOverrides[] = $cssVar . ': ' . $value . ';';
}
}
if (!empty($lightOverrides)) {
$customColorCSS .= ":root[data-bs-theme='light'] {\n" . implode("\n", $lightOverrides) . "\n}\n";
}
// Dark mode custom colors
$darkColors = [ $darkColors = [
'dark_color_primary' => '--color-primary', 'dark_color_primary' => '--color-primary',
'dark_accent_primary' => '--accent-color-primary', 'dark_accent_primary' => '--accent-color-primary',
@@ -159,17 +206,9 @@ $darkColors = [
'dark_bootstrap_primary' => '--primary', 'dark_bootstrap_primary' => '--primary',
]; ];
$darkOverrides = []; // Generate CSS for both themes
foreach ($darkColors as $param => $cssVar) { $customColorCSS .= $generateThemeCSS($lightColors, 'light');
$value = $this->params->get($param, ''); $customColorCSS .= $generateThemeCSS($darkColors, 'dark');
if (!empty($value)) {
$darkOverrides[] = $cssVar . ': ' . $value . ';';
}
}
if (!empty($darkOverrides)) {
$customColorCSS .= ":root[data-bs-theme='dark'] {\n" . implode("\n", $darkOverrides) . "\n}\n";
}
// Add custom color CSS to document if any overrides are defined // Add custom color CSS to document if any overrides are defined
if (!empty($customColorCSS)) { if (!empty($customColorCSS)) {