WIP: Add parameter-based color customization to template backend #80
@@ -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)) {
|
||||||
|
|||||||
Reference in New Issue
Block a user