From f4dcd69c923d7a01e4374fa848d7a9c239848e0f Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 20 Feb 2026 10:45:06 +0000
Subject: [PATCH] Add documentation for parameter-based color customization

Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com>
---
 README.md                    | 18 +++++++++++++
 docs/CLIENT_FORK_WORKFLOW.md | 52 ++++++++++++++++++++++++++++++++++++
 2 files changed, 70 insertions(+)

diff --git a/README.md b/README.md
index f7ae954..ffe99ac 100644
--- a/README.md
+++ b/README.md
@@ -57,6 +57,7 @@ MokoCassiopeia is a modern, lightweight enhancement layer built on top of Joomla
 
 - **Dark Mode Support**: Built-in light/dark mode toggle with system preference detection
 - **Color Palettes**: Standard, Alternative, and Custom color schemes
+- **Parameter-Based Colors**: Edit key brand colors directly in template settings (no CSS files required)
 - **Theme Persistence**: User preferences saved via localStorage
 - **Theme Control Options**: Switch, radio buttons, or hidden controls
 - **Auto Dark Mode**: Optional automatic dark mode based on time/system settings
@@ -69,6 +70,7 @@ MokoCassiopeia is a modern, lightweight enhancement layer built on top of Joomla
 - **Font Options**: Local and web fonts (Roboto, Fira Sans, Noto Sans)
 - **Sticky Header**: Optional sticky navigation
 - **Back to Top**: Floating back-to-top button
+- **400+ CSS Variables**: Complete control over colors, spacing, and styling
 
 ### Analytics & Tracking
 
@@ -164,6 +166,22 @@ Access template configuration via **System → Site Templates → MokoCassiopeia
 - **Light Mode Palette**: Standard, Alternative, or Custom
 - **Dark Mode Palette**: Standard, Alternative, or Custom
 
+**Custom Colors - Light Mode:**
+- **Brand Primary Color**: Main brand color throughout the template
+- **Accent Primary Color**: Accent color for highlights and interactive elements
+- **Navigation Background**: Background color for the main navigation menu
+- **Navigation Link Color**: Text color for navigation links
+- **Body Background**: Main page background color
+- **Body Text Color**: Default text color for body content
+- **Link Color**: Color for regular hyperlinks
+- **Link Hover Color**: Color for hyperlinks on hover
+- **Bootstrap Primary Color**: Bootstrap primary color for buttons, alerts, and components
+
+**Custom Colors - Dark Mode:**
+- Same 9 color options as Light Mode, but optimized for dark backgrounds
+
+> **Note**: Custom color parameters override values from color palette CSS files. Leave fields blank to use palette defaults. Changes apply immediately when you save the template.
+
 **Typography:**
 - **Font Scheme**: Local (Roboto) or Web fonts (Fira Sans, Roboto+Noto Sans)
 
diff --git a/docs/CLIENT_FORK_WORKFLOW.md b/docs/CLIENT_FORK_WORKFLOW.md
index 131ceaf..beba3d3 100644
--- a/docs/CLIENT_FORK_WORKFLOW.md
+++ b/docs/CLIENT_FORK_WORKFLOW.md
@@ -195,6 +195,58 @@ After running the workflow or script, you should:
 
 ---
 
+## Color Customization Methods
+
+You now have **two ways** to customize colors for your client fork:
+
+### Method 1: Parameter-Based Customization (Recommended for Simple Branding)
+
+**Best for**: Quick brand color changes without editing CSS files
+
+1. Log into Joomla admin
+2. Navigate to System → Site Templates → MokoCassiopeia
+3. Click on the template name to edit
+4. Go to the "Theme" tab
+5. Scroll to "Custom Colours - Light Mode" and "Custom Colours - Dark Mode" sections
+6. Use the color pickers to set:
+   - Brand Primary Color
+   - Accent Primary Color
+   - Navigation Background & Link Color
+   - Body Background & Text Color
+   - Link & Link Hover Colors
+   - Bootstrap Primary Color
+7. Save the template
+
+**Advantages**:
+- ✅ No CSS files to edit
+- ✅ Visual color picker interface
+- ✅ Changes apply immediately
+- ✅ Easy to revert by clearing the fields
+- ✅ No file management required
+
+**Limitations**:
+- Only 9 essential colors per theme can be customized
+- For advanced customization, use Method 2
+
+### Method 2: CSS File Customization (Advanced)
+
+**Best for**: Complete control over all 400+ CSS variables
+
+1. Edit `src/media/css/colors/light/colors_custom.css`
+2. Edit `src/media/css/colors/dark/colors_custom.css`
+3. Update any of the 400+ CSS variables
+4. Commit and deploy the changes
+
+**Advantages**:
+- ✅ Complete control over all variables
+- ✅ Can customize spacing, borders, shadows, etc.
+- ✅ Supports complex color schemes
+- ✅ Version controlled with your fork
+
+**Note**: Parameter-based colors (Method 1) will override CSS file colors (Method 2) if both are set.
+
+---
+
 ## Troubleshooting
 
 ### Workflow Fails with "CONFIRM" Error