diff --git a/src/language/en-GB/tpl_mokocassiopeia.ini b/src/language/en-GB/tpl_mokocassiopeia.ini
index 0eb9c00..a323293 100644
--- a/src/language/en-GB/tpl_mokocassiopeia.ini
+++ b/src/language/en-GB/tpl_mokocassiopeia.ini
@@ -111,6 +111,51 @@ TPL_MOKO_THEME_FAB_ENABLED_DESC="Display a persistent, accessible theme toggle."
TPL_MOKO_THEME_FAB_POS="Floating switch position"
TPL_MOKO_THEME_FAB_POS_DESC="Screen corner for the toggle."
+; ===== Custom colour parameters =====
+TPL_MOKOCASSIOPEIA_CUSTOM_COLORS_LIGHT_LABEL="Custom Colours - Light Mode"
+TPL_MOKOCASSIOPEIA_CUSTOM_COLORS_DARK_LABEL="Custom Colours - Dark Mode"
+TPL_MOKOCASSIOPEIA_CUSTOM_COLORS_DESC="Override CSS colour variables with custom values below. Leave blank to use theme defaults. These settings override values from colour palette files. Changes apply immediately when you save the template."
+
+; Light mode colour fields
+TPL_MOKOCASSIOPEIA_LIGHT_COLOR_PRIMARY_LABEL="Brand Primary Colour"
+TPL_MOKOCASSIOPEIA_LIGHT_COLOR_PRIMARY_DESC="Main brand colour used throughout the template (CSS variable: --color-primary)"
+TPL_MOKOCASSIOPEIA_LIGHT_ACCENT_PRIMARY_LABEL="Accent Primary Colour"
+TPL_MOKOCASSIOPEIA_LIGHT_ACCENT_PRIMARY_DESC="Primary accent colour for highlights and interactive elements (CSS variable: --accent-color-primary)"
+TPL_MOKOCASSIOPEIA_LIGHT_NAV_BG_LABEL="Navigation Background"
+TPL_MOKOCASSIOPEIA_LIGHT_NAV_BG_DESC="Background colour for the main navigation menu (CSS variable: --nav-bg-color)"
+TPL_MOKOCASSIOPEIA_LIGHT_NAV_LINK_LABEL="Navigation Link Colour"
+TPL_MOKOCASSIOPEIA_LIGHT_NAV_LINK_DESC="Text colour for navigation links (CSS variable: --mainmenu-nav-link-color)"
+TPL_MOKOCASSIOPEIA_LIGHT_BODY_BG_LABEL="Body Background"
+TPL_MOKOCASSIOPEIA_LIGHT_BODY_BG_DESC="Main page background colour (CSS variable: --body-bg)"
+TPL_MOKOCASSIOPEIA_LIGHT_BODY_COLOR_LABEL="Body Text Colour"
+TPL_MOKOCASSIOPEIA_LIGHT_BODY_COLOR_DESC="Default text colour for body content (CSS variable: --body-color)"
+TPL_MOKOCASSIOPEIA_LIGHT_LINK_COLOR_LABEL="Link Colour"
+TPL_MOKOCASSIOPEIA_LIGHT_LINK_COLOR_DESC="Colour for regular hyperlinks (CSS variable: --link-color)"
+TPL_MOKOCASSIOPEIA_LIGHT_LINK_HOVER_LABEL="Link Hover Colour"
+TPL_MOKOCASSIOPEIA_LIGHT_LINK_HOVER_DESC="Colour for hyperlinks on hover (CSS variable: --link-hover-color)"
+TPL_MOKOCASSIOPEIA_LIGHT_BS_PRIMARY_LABEL="Bootstrap Primary Colour"
+TPL_MOKOCASSIOPEIA_LIGHT_BS_PRIMARY_DESC="Bootstrap primary colour for buttons, alerts, and components (CSS variable: --primary)"
+
+; Dark mode colour fields
+TPL_MOKOCASSIOPEIA_DARK_COLOR_PRIMARY_LABEL="Brand Primary Colour"
+TPL_MOKOCASSIOPEIA_DARK_COLOR_PRIMARY_DESC="Main brand colour used throughout the template (CSS variable: --color-primary)"
+TPL_MOKOCASSIOPEIA_DARK_ACCENT_PRIMARY_LABEL="Accent Primary Colour"
+TPL_MOKOCASSIOPEIA_DARK_ACCENT_PRIMARY_DESC="Primary accent colour for highlights and interactive elements (CSS variable: --accent-color-primary)"
+TPL_MOKOCASSIOPEIA_DARK_NAV_BG_LABEL="Navigation Background"
+TPL_MOKOCASSIOPEIA_DARK_NAV_BG_DESC="Background colour for the main navigation menu (CSS variable: --nav-bg-color)"
+TPL_MOKOCASSIOPEIA_DARK_NAV_LINK_LABEL="Navigation Link Colour"
+TPL_MOKOCASSIOPEIA_DARK_NAV_LINK_DESC="Text colour for navigation links (CSS variable: --mainmenu-nav-link-color)"
+TPL_MOKOCASSIOPEIA_DARK_BODY_BG_LABEL="Body Background"
+TPL_MOKOCASSIOPEIA_DARK_BODY_BG_DESC="Main page background colour (CSS variable: --body-bg)"
+TPL_MOKOCASSIOPEIA_DARK_BODY_COLOR_LABEL="Body Text Colour"
+TPL_MOKOCASSIOPEIA_DARK_BODY_COLOR_DESC="Default text colour for body content (CSS variable: --body-color)"
+TPL_MOKOCASSIOPEIA_DARK_LINK_COLOR_LABEL="Link Colour"
+TPL_MOKOCASSIOPEIA_DARK_LINK_COLOR_DESC="Colour for regular hyperlinks (CSS variable: --link-color)"
+TPL_MOKOCASSIOPEIA_DARK_LINK_HOVER_LABEL="Link Hover Colour"
+TPL_MOKOCASSIOPEIA_DARK_LINK_HOVER_DESC="Colour for hyperlinks on hover (CSS variable: --link-hover-color)"
+TPL_MOKOCASSIOPEIA_DARK_BS_PRIMARY_LABEL="Bootstrap Primary Colour"
+TPL_MOKOCASSIOPEIA_DARK_BS_PRIMARY_DESC="Bootstrap primary colour for buttons, alerts, and components (CSS variable: --primary)"
+
; ===== Misc =====
MOD_BREADCRUMBS_HERE="YOU ARE HERE:"
diff --git a/src/language/en-US/tpl_mokocassiopeia.ini b/src/language/en-US/tpl_mokocassiopeia.ini
index 4c12993..01a3bdb 100644
--- a/src/language/en-US/tpl_mokocassiopeia.ini
+++ b/src/language/en-US/tpl_mokocassiopeia.ini
@@ -111,6 +111,51 @@ TPL_MOKO_THEME_FAB_ENABLED_DESC="Display a persistent, accessible theme toggle."
TPL_MOKO_THEME_FAB_POS="Floating switch position"
TPL_MOKO_THEME_FAB_POS_DESC="Screen corner for the toggle."
+; ===== Custom color parameters =====
+TPL_MOKOCASSIOPEIA_CUSTOM_COLORS_LIGHT_LABEL="Custom Colors - Light Mode"
+TPL_MOKOCASSIOPEIA_CUSTOM_COLORS_DARK_LABEL="Custom Colors - Dark Mode"
+TPL_MOKOCASSIOPEIA_CUSTOM_COLORS_DESC="Override CSS color variables with custom values below. Leave blank to use theme defaults. These settings override values from color palette files. Changes apply immediately when you save the template."
+
+; Light mode color fields
+TPL_MOKOCASSIOPEIA_LIGHT_COLOR_PRIMARY_LABEL="Brand Primary Color"
+TPL_MOKOCASSIOPEIA_LIGHT_COLOR_PRIMARY_DESC="Main brand color used throughout the template (CSS variable: --color-primary)"
+TPL_MOKOCASSIOPEIA_LIGHT_ACCENT_PRIMARY_LABEL="Accent Primary Color"
+TPL_MOKOCASSIOPEIA_LIGHT_ACCENT_PRIMARY_DESC="Primary accent color for highlights and interactive elements (CSS variable: --accent-color-primary)"
+TPL_MOKOCASSIOPEIA_LIGHT_NAV_BG_LABEL="Navigation Background"
+TPL_MOKOCASSIOPEIA_LIGHT_NAV_BG_DESC="Background color for the main navigation menu (CSS variable: --nav-bg-color)"
+TPL_MOKOCASSIOPEIA_LIGHT_NAV_LINK_LABEL="Navigation Link Color"
+TPL_MOKOCASSIOPEIA_LIGHT_NAV_LINK_DESC="Text color for navigation links (CSS variable: --mainmenu-nav-link-color)"
+TPL_MOKOCASSIOPEIA_LIGHT_BODY_BG_LABEL="Body Background"
+TPL_MOKOCASSIOPEIA_LIGHT_BODY_BG_DESC="Main page background color (CSS variable: --body-bg)"
+TPL_MOKOCASSIOPEIA_LIGHT_BODY_COLOR_LABEL="Body Text Color"
+TPL_MOKOCASSIOPEIA_LIGHT_BODY_COLOR_DESC="Default text color for body content (CSS variable: --body-color)"
+TPL_MOKOCASSIOPEIA_LIGHT_LINK_COLOR_LABEL="Link Color"
+TPL_MOKOCASSIOPEIA_LIGHT_LINK_COLOR_DESC="Color for regular hyperlinks (CSS variable: --link-color)"
+TPL_MOKOCASSIOPEIA_LIGHT_LINK_HOVER_LABEL="Link Hover Color"
+TPL_MOKOCASSIOPEIA_LIGHT_LINK_HOVER_DESC="Color for hyperlinks on hover (CSS variable: --link-hover-color)"
+TPL_MOKOCASSIOPEIA_LIGHT_BS_PRIMARY_LABEL="Bootstrap Primary Color"
+TPL_MOKOCASSIOPEIA_LIGHT_BS_PRIMARY_DESC="Bootstrap primary color for buttons, alerts, and components (CSS variable: --primary)"
+
+; Dark mode color fields
+TPL_MOKOCASSIOPEIA_DARK_COLOR_PRIMARY_LABEL="Brand Primary Color"
+TPL_MOKOCASSIOPEIA_DARK_COLOR_PRIMARY_DESC="Main brand color used throughout the template (CSS variable: --color-primary)"
+TPL_MOKOCASSIOPEIA_DARK_ACCENT_PRIMARY_LABEL="Accent Primary Color"
+TPL_MOKOCASSIOPEIA_DARK_ACCENT_PRIMARY_DESC="Primary accent color for highlights and interactive elements (CSS variable: --accent-color-primary)"
+TPL_MOKOCASSIOPEIA_DARK_NAV_BG_LABEL="Navigation Background"
+TPL_MOKOCASSIOPEIA_DARK_NAV_BG_DESC="Background color for the main navigation menu (CSS variable: --nav-bg-color)"
+TPL_MOKOCASSIOPEIA_DARK_NAV_LINK_LABEL="Navigation Link Color"
+TPL_MOKOCASSIOPEIA_DARK_NAV_LINK_DESC="Text color for navigation links (CSS variable: --mainmenu-nav-link-color)"
+TPL_MOKOCASSIOPEIA_DARK_BODY_BG_LABEL="Body Background"
+TPL_MOKOCASSIOPEIA_DARK_BODY_BG_DESC="Main page background color (CSS variable: --body-bg)"
+TPL_MOKOCASSIOPEIA_DARK_BODY_COLOR_LABEL="Body Text Color"
+TPL_MOKOCASSIOPEIA_DARK_BODY_COLOR_DESC="Default text color for body content (CSS variable: --body-color)"
+TPL_MOKOCASSIOPEIA_DARK_LINK_COLOR_LABEL="Link Color"
+TPL_MOKOCASSIOPEIA_DARK_LINK_COLOR_DESC="Color for regular hyperlinks (CSS variable: --link-color)"
+TPL_MOKOCASSIOPEIA_DARK_LINK_HOVER_LABEL="Link Hover Color"
+TPL_MOKOCASSIOPEIA_DARK_LINK_HOVER_DESC="Color for hyperlinks on hover (CSS variable: --link-hover-color)"
+TPL_MOKOCASSIOPEIA_DARK_BS_PRIMARY_LABEL="Bootstrap Primary Color"
+TPL_MOKOCASSIOPEIA_DARK_BS_PRIMARY_DESC="Bootstrap primary color for buttons, alerts, and components (CSS variable: --primary)"
+
; ===== Misc =====
MOD_BREADCRUMBS_HERE="YOU ARE HERE:"
diff --git a/src/templates/index.php b/src/templates/index.php
index 795669a..0d68290 100644
--- a/src/templates/index.php
+++ b/src/templates/index.php
@@ -118,6 +118,64 @@ try {
$wa->registerAndUseStyle('template.dark.dynamic', $templatePath . '/css/colors/dark/' . $colorDarkKey . '.css');
}
+// Custom color parameters - generate inline CSS for color overrides
+$customColorCSS = '';
+
+// Light mode custom colors
+$lightColors = [
+ 'light_color_primary' => '--color-primary',
+ 'light_accent_primary' => '--accent-color-primary',
+ 'light_nav_bg' => '--nav-bg-color',
+ 'light_nav_link' => '--mainmenu-nav-link-color',
+ 'light_body_bg' => '--body-bg',
+ 'light_body_color' => '--body-color',
+ 'light_link_color' => '--link-color',
+ 'light_link_hover' => '--link-hover-color',
+ '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 = [
+ 'dark_color_primary' => '--color-primary',
+ 'dark_accent_primary' => '--accent-color-primary',
+ 'dark_nav_bg' => '--nav-bg-color',
+ 'dark_nav_link' => '--mainmenu-nav-link-color',
+ 'dark_body_bg' => '--body-bg',
+ 'dark_body_color' => '--body-color',
+ 'dark_link_color' => '--link-color',
+ 'dark_link_hover' => '--link-hover-color',
+ 'dark_bootstrap_primary' => '--primary',
+];
+
+$darkOverrides = [];
+foreach ($darkColors as $param => $cssVar) {
+ $value = $this->params->get($param, '');
+ 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
+if (!empty($customColorCSS)) {
+ $wa->addInlineStyle($customColorCSS);
+}
+
// Scripts
$wa->useScript('template.js');
diff --git a/src/templates/templateDetails.xml b/src/templates/templateDetails.xml
index 646857b..27ebbbf 100644
--- a/src/templates/templateDetails.xml
+++ b/src/templates/templateDetails.xml
@@ -198,6 +198,51 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+