Add column color mode (#16)

A toolbar toggle that tints every data column with a distinct, theme-aware
background hue, spread by golden-angle rotation so adjacent columns stay far
apart on the wheel for any column count. The hue is injected per column as a
CSS variable on the stable AG Grid col-id; lightness, chroma and alpha live
in CSS and adapt to light, dark and high-contrast themes. The tint is a
translucent OKLCH overlay, so foreground text, frozen rows, selection, find
matches and duplicate highlights keep painting clearly on top. Persisted
globally like zoom, so it is remembered across files and sessions.

Author: Robin-Reiche

media/webview.css

@@ -472,6 +472,43 @@ button .codicon {
 :is(.ag-theme-alpine-dark, .ag-theme-alpine) .ag-floating-top .ag-row {
     background-color: var(--vscode-list-inactiveSelectionBackground, #37373d) !important;
 }
+
+/* ── Column Color Mode ──────────────────────────────────────────────────────
+   Toggled by the toolbar "Color columns" button (features/color-mode.ts), which
+   adds `cm-on` to #grid-container and injects one `--cm-h` hue per column. Each
+   column cell is tinted with a translucent overlay so the theme's own foreground
+   text keeps its contrast and the tint reads as "this column's color".
+
+   Why these rules are NOT !important: every existing highlight — range selection,
+   find match/active, duplicate rows, the focused cell, the frozen-row band — is
+   !important and therefore wins the cascade over this normal-weight tint, so all
+   of them keep painting clearly on top. The tint is also translucent (mixed with
+   `transparent`), so the real row background (striping, hover, the frozen-row
+   tint) shows through underneath. The '#' row-number gutter (col-id "row-index")
+   is never matched, only data columns (col-id "col_*").
+
+   Lightness (--cm-l), chroma (--cm-c) and alpha adapt to the active theme so the
+   color is visible without fighting the text on light, dark or high-contrast
+   themes. Hue varies per column; L/C/alpha do not. color-mix()/oklch() are
+   supported by VS Code's Chromium; on a very old build the declaration is simply
+   ignored and the toggle is a harmless no-op. */
+body.vscode-light #grid-container.cm-on {
+    --cm-l: 0.55; --cm-c: 0.15; --cm-body-a: 15%; --cm-head-a: 30%;
+}
+body.vscode-dark #grid-container.cm-on,
+body.vscode-high-contrast #grid-container.cm-on {
+    --cm-l: 0.74; --cm-c: 0.15; --cm-body-a: 20%; --cm-head-a: 36%;
+}
+/* High contrast: keep tints faint — HC users expect minimal background noise. */
+body.vscode-high-contrast #grid-container.cm-on {
+    --cm-body-a: 10%; --cm-head-a: 20%;
+}
+#grid-container.cm-on .ag-cell[col-id^="col_"] {
+    background-color: color-mix(in oklab, oklch(var(--cm-l) var(--cm-c) var(--cm-h)) var(--cm-body-a), transparent);
+}
+#grid-container.cm-on .ag-header-cell[col-id^="col_"] {
+    background-color: color-mix(in oklab, oklch(var(--cm-l) var(--cm-c) var(--cm-h)) var(--cm-head-a), transparent);
+}
 /* Frozen (pinned-left) column header: a 📌 marker before the column name,
    mirroring the frozen-row pin. The always-pinned '#' gutter (.row-index-header)
    is excluded so only user-frozen columns get the marker. */

src/csvEditorProvider.ts

@@ -177,6 +177,7 @@ export class CsvEditorProvider implements vscode.CustomEditorProvider<CsvDocumen
 
         const fileName  = path.basename(document.uri.fsPath);
         const zoomIndex = this.context.globalState.get<number>('csvGridEditor.zoomIndex', 4);
+        const colorMode = this.context.globalState.get<boolean>('csvGridEditor.colorMode', false);
 
         webviewPanel.webview.html = getWebviewContent(
             webviewPanel.webview,
@@ -188,7 +189,8 @@ export class CsvEditorProvider implements vscode.CustomEditorProvider<CsvDocumen
             fileName,
             document.isChunked,
             process.platform === 'darwin',
-            zoomIndex
+            zoomIndex,
+            colorMode
         );
 
         // F3: File System Watcher — auto-reload on external changes (non-preview only)
@@ -244,6 +246,9 @@ export class CsvEditorProvider implements vscode.CustomEditorProvider<CsvDocumen
             } else if (msg.type === 'zoomChanged') {
                 this.context.globalState.update('csvGridEditor.zoomIndex', msg.zoomIndex);
 
+            } else if (msg.type === 'colorModeChanged') {
+                this.context.globalState.update('csvGridEditor.colorMode', msg.colorMode);
+
             } else if (msg.type === 'edit' && !document.isPreview) {
                 document.content = msg.text;
                 this._onDidChangeCustomDocument.fire({ document });

src/webview.ts

@@ -10,7 +10,8 @@ export function getWebviewContent(
     fileName: string = '',
     isChunked: boolean = false,
     isMac: boolean = false,
-    zoomIndex: number = 4
+    zoomIndex: number = 4,
+    colorMode: boolean = false
 ): string {
     const nonce = getNonce();
     const mod   = isMac ? '⌘' : 'Ctrl+';
@@ -113,6 +114,7 @@ export function getWebviewContent(
         <div    class="separator"></div>
         <button id="btn-profile"       title="Column Profile"><i class="codicon codicon-graph"></i></button>
         <button id="btn-columns"       title="Show / hide columns"><i class="codicon codicon-checklist"></i></button>
+        <button id="btn-colormode"     title="Color columns — distinct, theme-aware tint per column"><i class="codicon codicon-symbol-color"></i></button>
         <div    class="separator"></div>
         <button id="btn-find-replace"  title="Find &amp; Replace (${mod}F)"><i class="codicon codicon-search"></i></button>
         <div    class="separator"></div>
@@ -266,6 +268,7 @@ export function getWebviewContent(
         const FILENAME       = '${fileName.replace(/'/g, "\\'")}';
         const IS_CHUNKED          = ${isChunked ? 'true' : 'false'};
         const INITIAL_ZOOM_INDEX  = ${zoomIndex};
+        const INITIAL_COLOR_MODE  = ${colorMode ? 'true' : 'false'};
     </script>
 
     <!-- Bundled webview logic -->

src/webview/features/color-mode.ts

@@ -0,0 +1,81 @@
+import { state, getNumCols } from '../state';
+
+/**
+ * Column color mode. A toolbar toggle that gives every data column a distinct,
+ * theme-adaptive background tint (header stronger, body fainter) so columns are
+ * easy to tell apart, similar to Rainbow CSV but readable on any VS Code theme.
+ *
+ * How the colors work (see also media/webview.css → "Column Color Mode"):
+ *  - Each column gets one hue via golden-angle rotation (137.5°), which keeps
+ *    adjacent columns far apart on the wheel for any column count, even after a
+ *    column is inserted or deleted. Only the per-column hue is injected here as
+ *    a CSS variable (--cm-h) on that column's cells via their stable AG Grid
+ *    `col-id`; the lightness, chroma and alpha live in CSS and adapt to the
+ *    active theme (light / dark / high-contrast).
+ *  - The tint is a translucent overlay (color-mix in OKLCH) painted over the
+ *    real row background, so the theme's own foreground text keeps its contrast
+ *    and frozen rows, selection, find matches and duplicate highlights — all of
+ *    which are !important and higher in the cascade — keep painting clearly on
+ *    top. The row-number gutter (col-id "row-index") is never tinted.
+ *
+ * The toggle is persisted globally (VS Code globalState) exactly like zoom, so
+ * it is remembered across every CSV file and every session.
+ */
+
+const HUE_STYLE_ID = 'cm-col-hues';
+// 360 * (1 - 1/phi). Irrational vs 360°, so successive hues land in the largest
+// remaining gap and never visibly repeat.
+const GOLDEN_ANGLE = 137.50776405003785;
+// Start offset so column 0 isn't pure red.
+const START_HUE = 25;
+
+function persistColorMode(): void {
+    vscodeApi.postMessage({ type: 'colorModeChanged', colorMode: state.colorMode });
+}
+
+function updateButton(): void {
+    document.getElementById('btn-colormode')?.classList.toggle('btn-active', state.colorMode);
+}
+
+// Toggles the `cm-on` class on the grid container (which gates all tint CSS) and,
+// when on, (re)generates the per-column hue rules for the current column count.
+// Safe to call before the grid has data (numCols 0 → empty rule set, class only).
+// Called on setup, on toggle, and at the end of every buildGrid (column add/delete,
+// delimiter change, paging) so freshly built columns pick up their hue.
+export function applyColorMode(): void {
+    const container = document.getElementById('grid-container');
+    if (!container) return;
+    container.classList.toggle('cm-on', state.colorMode);
+
+    let styleEl = document.getElementById(HUE_STYLE_ID) as HTMLStyleElement | null;
+    if (!state.colorMode) {
+        styleEl?.remove();
+        return;
+    }
+    if (!styleEl) {
+        styleEl = document.createElement('style');
+        styleEl.id = HUE_STYLE_ID;
+        document.head.appendChild(styleEl);
+    }
+    const numCols = getNumCols(state.data);
+    let css = '';
+    for (let c = 0; c < numCols; c++) {
+        const hue = ((START_HUE + c * GOLDEN_ANGLE) % 360).toFixed(2);
+        css += `#grid-container.cm-on [col-id="col_${c}"]{--cm-h:${hue};}`;
+    }
+    styleEl.textContent = css;
+}
+
+function toggleColorMode(): void {
+    state.colorMode = !state.colorMode;
+    updateButton();
+    applyColorMode();
+    persistColorMode();
+}
+
+export function setupColorMode(): void {
+    state.colorMode = !!INITIAL_COLOR_MODE;
+    updateButton();
+    applyColorMode();
+    document.getElementById('btn-colormode')?.addEventListener('click', toggleColorMode);
+}

src/webview/features/theme.ts

@@ -13,7 +13,12 @@ export function isDarkTheme(): boolean {
 export function applyGridTheme(): void {
     const container = document.getElementById('grid-container');
     if (!container) return;
-    container.className = isDarkTheme() ? 'ag-theme-alpine-dark' : 'ag-theme-alpine';
+    // Swap only the AG Grid theme class. Toggling via classList (rather than
+    // overwriting className) preserves other state classes on the container —
+    // notably `cm-on` from the column color mode — so switching VS Code theme,
+    // or a buildGrid rebuild, doesn't silently drop the coloring.
+    container.classList.remove('ag-theme-alpine', 'ag-theme-alpine-dark');
+    container.classList.add(isDarkTheme() ? 'ag-theme-alpine-dark' : 'ag-theme-alpine');
 }
 
 export function setupTheme(): void {

src/webview/globals.d.ts

@@ -6,6 +6,7 @@ declare const DELIMITER: string;
 declare const FILENAME: string;
 declare const IS_CHUNKED: boolean;
 declare const INITIAL_ZOOM_INDEX: number;
+declare const INITIAL_COLOR_MODE: boolean;
 
 declare const agGrid: {
     createGrid(container: HTMLElement, options: unknown): any;

src/webview/grid/builder.ts

@@ -9,6 +9,7 @@ import { getFindCellClassRules } from '../features/find-replace';
 import { attachHeaderContextMenus } from '../features/freeze-columns';
 import { applyZoom } from '../features/zoom';
 import { applyGridTheme } from '../features/theme';
+import { applyColorMode } from '../features/color-mode';
 import {
     getRangeCellClassRules,
     onCellMouseDownHandler,
@@ -336,6 +337,10 @@ export function buildGrid(): void {
 
     state.gridApi = agGrid.createGrid(container, gridOptions);
     updateButtons();
+    // Re-apply column color mode for the freshly built columns. buildGrid rebuilds
+    // the column set (insert/delete, delimiter change, paging), so the per-column
+    // hue rules must be regenerated to match the current column count.
+    applyColorMode();
 
     // Double-click on resize handle → auto-size that column. Wired once: the
     // container survives rebuilds, so re-adding would accumulate listeners.

src/webview/grid/refresh.ts

@@ -1,4 +1,5 @@
 import { state, getNumCols } from '../state';
+import { applyColorMode } from '../features/color-mode';
 
 // Splits a freshly-built rowData array into the scrollable body and the frozen
 // reference rows (AG Grid renders the latter in a fixed pinned-top band). Frozen
@@ -81,6 +82,10 @@ export function refreshGrid(): void {
     // refreshGrid only swaps rowData, so the row/column counters in the toolbar
     // and status bar would otherwise go stale after a delete/insert/paste/undo.
     updateCountsDisplay();
+    // Keep the per-column color hues in sync with the live column count. Undo/redo
+    // of a column insert/delete reaches here (not buildGrid), so the hue rules must
+    // be regenerated for the current numCols, not left at the pre-undo count.
+    applyColorMode();
 }
 
 // Recomputes the "<n> rows × <n> columns" toolbar text and the "<n> records"

src/webview/index.ts

@@ -15,6 +15,7 @@ import { setupPaste }          from './features/paste';
 import { setupRangeSelect }    from './features/range-select';
 import { setupRenameColumn }   from './features/rename-column';
 import { setupColumnChooser }  from './features/column-chooser';
+import { setupColorMode }      from './features/color-mode';
 import { setupKeyboard }       from './keyboard';
 import { setupMessaging }      from './messaging';
 
@@ -35,6 +36,7 @@ setupPaste();
 setupRangeSelect();
 setupRenameColumn();
 setupColumnChooser();
+setupColorMode();
 setupKeyboard();
 setupMessaging();
 

src/webview/state.ts

@@ -14,6 +14,14 @@ export const state = {
     ZOOM_STEPS: [60, 70, 80, 90, 100, 110, 125, 150, 175, 200],
     zoomIndex: 4,
     isAutoFitted: false,
+
+    // Column color mode — when on, every data column gets a distinct, theme-adaptive
+    // background tint so columns are easier to tell apart. Persisted globally via
+    // VS Code globalState (csvGridEditor.colorMode), exactly like zoomIndex, so the
+    // toggle is remembered across every CSV file and every session. The actual
+    // colors are pure CSS (features/color-mode.ts + media/webview.css). In-memory
+    // mirror of the persisted flag.
+    colorMode: false,
     autoFitCache: null as any,
     autoFitCacheZoom: -1,