style: use garish colors in MultiIndex demo for clarity

Each theme property gets a distinct loud color so readers can see
exactly which key targets which piece of the grid.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: paddymul

docs/source/articles/theme-customization.rst

@@ -539,23 +539,27 @@ and ``groupby().agg()``. Three theme properties target the header area:
     ], names=['Category', 'Detail'])
     df = pd.DataFrame(..., columns=cols)
 
-    # The theme
+Every property below uses a deliberately garish color so you can see
+exactly what it controls:
+
+.. code-block:: python
+
     component_config = {'theme': {
         'colorScheme': 'dark',
-        'accentColor': '#26c6da',
-        'accentHoverColor': '#00acc1',
-        'backgroundColor': '#0d1117',
-        'foregroundColor': '#c9d1d9',
-        'oddRowBackgroundColor': '#161b22',
-        'borderColor': '#30363d',
-        'headerBorderColor': '#58a6ff',
-        'headerBackgroundColor': '#161b22',
+        'accentColor': '#ff00ff',          # purple — column selection highlight
+        'accentHoverColor': '#ff6600',     # orange — hover state
+        'backgroundColor': '#0000cc',      # blue — main table background
+        'foregroundColor': '#00ffcc',       # teal — text color
+        'oddRowBackgroundColor': '#cc0000', # red — alternating row stripe
+        'borderColor': '#ff69b4',          # pink — ALL grid borders
+        'headerBorderColor': '#00ff00',    # green — column header dividers only
+        'headerBackgroundColor': '#8b4513', # brown — header row background
     }}
 
 .. raw:: html
 
    <iframe src="../themes/multiindex-headers.html"
-           style="width:100%; height:360px; border:1px solid #30363d; border-radius:4px; margin:1em 0;">
+           style="width:100%; height:360px; border:1px solid #ff69b4; border-radius:4px; margin:1em 0;">
    </iframe>
 
 

scripts/generate_theme_static_html.py

@@ -323,16 +323,16 @@ def themed_html(df, title, theme_config):
         "MultiIndex Headers",
         {
             "colorScheme": "dark",
-            "accentColor": "#26c6da",
-            "accentHoverColor": "#00acc1",
-            "backgroundColor": "#0d1117",
-            "foregroundColor": "#c9d1d9",
-            "oddRowBackgroundColor": "#161b22",
-            "borderColor": "#30363d",
-            "headerBorderColor": "#58a6ff",
-            "headerBackgroundColor": "#161b22",
+            "accentColor": "#ff00ff",  # purple/magenta — column selection
+            "accentHoverColor": "#ff6600",  # orange — hover state
+            "backgroundColor": "#0000cc",  # blue — main table background
+            "foregroundColor": "#00ffcc",  # teal — text color
+            "oddRowBackgroundColor": "#cc0000",  # red — alternating row stripe
+            "borderColor": "#ff69b4",  # pink — all grid borders
+            "headerBorderColor": "#00ff00",  # green — column header dividers
+            "headerBackgroundColor": "#8b4513",  # brown — header row background
         },
-        "MultiIndex column headers with styled group separators. borderColor controls all grid borders including header separators; headerBorderColor targets column dividers; headerBackgroundColor colors the header rows.",
+        "Garish colors so you can see exactly which property targets which piece.",
         "multiindex",
     ),
 ]