MokoConsulting/MokoCassiopeia
1
1
Fork 0
Code Issues 2 Pull Requests Actions Packages Releases 1 Activity

Add custom color parameters to template backend

Browse Source 
Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2026-02-20 10:43:19 +00:00
parent 1324370ed1
commit 2d588afa3f
4 changed files with 193 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/language/en-GB/tpl_mokocassiopeia.ini
View File

@@ -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:"

45
src/language/en-US/tpl_mokocassiopeia.ini
View File

@@ -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:"

58
src/templates/index.php
View File

@@ -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');

45
src/templates/templateDetails.xml
View File

@@ -198,6 +198,51 @@
<option value="colors_custom">TPL_MOKOCASSIOPEIA_COLOR_NAME_CUSTOM</option>
</field>
<!-- Custom Colors (Light Mode) -->
<field name="theme_sep_custom_light" type="spacer" label="TPL_MOKOCASSIOPEIA_CUSTOM_COLORS_LIGHT_LABEL" hr="false" class="text fw-bold" />
<field name="customColorNote" type="note" description="TPL_MOKOCASSIOPEIA_CUSTOM_COLORS_DESC" class="alert alert-info" />
<field name="light_color_primary" type="color" label="TPL_MOKOCASSIOPEIA_LIGHT_COLOR_PRIMARY_LABEL"
description="TPL_MOKOCASSIOPEIA_LIGHT_COLOR_PRIMARY_DESC" default="" />
<field name="light_accent_primary" type="color" label="TPL_MOKOCASSIOPEIA_LIGHT_ACCENT_PRIMARY_LABEL"
description="TPL_MOKOCASSIOPEIA_LIGHT_ACCENT_PRIMARY_DESC" default="" />
<field name="light_nav_bg" type="color" label="TPL_MOKOCASSIOPEIA_LIGHT_NAV_BG_LABEL"
description="TPL_MOKOCASSIOPEIA_LIGHT_NAV_BG_DESC" default="" />
<field name="light_nav_link" type="color" label="TPL_MOKOCASSIOPEIA_LIGHT_NAV_LINK_LABEL"
description="TPL_MOKOCASSIOPEIA_LIGHT_NAV_LINK_DESC" default="" />
<field name="light_body_bg" type="color" label="TPL_MOKOCASSIOPEIA_LIGHT_BODY_BG_LABEL"
description="TPL_MOKOCASSIOPEIA_LIGHT_BODY_BG_DESC" default="" />
<field name="light_body_color" type="color" label="TPL_MOKOCASSIOPEIA_LIGHT_BODY_COLOR_LABEL"
description="TPL_MOKOCASSIOPEIA_LIGHT_BODY_COLOR_DESC" default="" />
<field name="light_link_color" type="color" label="TPL_MOKOCASSIOPEIA_LIGHT_LINK_COLOR_LABEL"
description="TPL_MOKOCASSIOPEIA_LIGHT_LINK_COLOR_DESC" default="" />
<field name="light_link_hover" type="color" label="TPL_MOKOCASSIOPEIA_LIGHT_LINK_HOVER_LABEL"
description="TPL_MOKOCASSIOPEIA_LIGHT_LINK_HOVER_DESC" default="" />
<field name="light_bootstrap_primary" type="color" label="TPL_MOKOCASSIOPEIA_LIGHT_BS_PRIMARY_LABEL"
description="TPL_MOKOCASSIOPEIA_LIGHT_BS_PRIMARY_DESC" default="" />
<!-- Custom Colors (Dark Mode) -->
<field name="theme_sep_custom_dark" type="spacer" label="TPL_MOKOCASSIOPEIA_CUSTOM_COLORS_DARK_LABEL" hr="false" class="text fw-bold" />
<field name="dark_color_primary" type="color" label="TPL_MOKOCASSIOPEIA_DARK_COLOR_PRIMARY_LABEL"
description="TPL_MOKOCASSIOPEIA_DARK_COLOR_PRIMARY_DESC" default="" />
<field name="dark_accent_primary" type="color" label="TPL_MOKOCASSIOPEIA_DARK_ACCENT_PRIMARY_LABEL"
description="TPL_MOKOCASSIOPEIA_DARK_ACCENT_PRIMARY_DESC" default="" />
<field name="dark_nav_bg" type="color" label="TPL_MOKOCASSIOPEIA_DARK_NAV_BG_LABEL"
description="TPL_MOKOCASSIOPEIA_DARK_NAV_BG_DESC" default="" />
<field name="dark_nav_link" type="color" label="TPL_MOKOCASSIOPEIA_DARK_NAV_LINK_LABEL"
description="TPL_MOKOCASSIOPEIA_DARK_NAV_LINK_DESC" default="" />
<field name="dark_body_bg" type="color" label="TPL_MOKOCASSIOPEIA_DARK_BODY_BG_LABEL"
description="TPL_MOKOCASSIOPEIA_DARK_BODY_BG_DESC" default="" />
<field name="dark_body_color" type="color" label="TPL_MOKOCASSIOPEIA_DARK_BODY_COLOR_LABEL"
description="TPL_MOKOCASSIOPEIA_DARK_BODY_COLOR_DESC" default="" />
<field name="dark_link_color" type="color" label="TPL_MOKOCASSIOPEIA_DARK_LINK_COLOR_LABEL"
description="TPL_MOKOCASSIOPEIA_DARK_LINK_COLOR_DESC" default="" />
<field name="dark_link_hover" type="color" label="TPL_MOKOCASSIOPEIA_DARK_LINK_HOVER_LABEL"
description="TPL_MOKOCASSIOPEIA_DARK_LINK_HOVER_DESC" default="" />
<field name="dark_bootstrap_primary" type="color" label="TPL_MOKOCASSIOPEIA_DARK_BS_PRIMARY_LABEL"
description="TPL_MOKOCASSIOPEIA_DARK_BS_PRIMARY_DESC" default="" />
<!-- Typography -->
<field name="theme_sep_typo" type="spacer" label="Typography" hr="false" class="text fw-bold" />
<field name="useFontScheme" type="groupedlist" label="TPL_MOKOCASSIOPEIA_FONT_LABEL" description="TPL_MOKOCASSIOPEIA_FONT_LABEL_DESC" default="media/templates/site/mokocassiopeia/css/colors/fonts-local_roboto.css">