Merge color mode (#16) into 1.11.0

# Conflicts:
#	media/webview.css

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 pin 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>
@@ -267,6 +269,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,
@@ -346,6 +347,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,