# Example: Composition order Independent dark-mode and accent-override toggles on the same wrapper prove the layer order: the override wins in both light and dark because it resolves after the theme, not because of where it sits relative to the dark block. Source: https://pretable.ai/examples/theming-composition-order.md ```tsx CompositionOrderGrid.tsx "use client"; import { useLayoutEffect, useRef, useState, type CSSProperties } from "react"; import { PretableSurface } from "@pretable/react"; import { columns } from "./columns"; import { alerts, type Alert } from "./data"; const VIEWPORT_HEIGHT = 200; // `data-theme="dark"` is scoped to the wrapper below (not ``) purely so // this one demo goes dark without repainting the rest of the docs page — see // [Light / dark switching](/docs/theming/light-dark). The accent override // below is inline `style` on the same wrapper for the same reason a real app // would write it in a `:root` block: both resolve after the theme, on the // same element, so both beat the theme regardless of which mode is active. function overrideStyle(overridden: boolean): CSSProperties { return overridden ? ({ "--pretable-accent": "#ff5722" } as CSSProperties) : {}; } export function CompositionOrderGrid() { const [dark, setDark] = useState(false); const [overridden, setOverridden] = useState(false); const wrapperRef = useRef(null); const [resolvedAccent, setResolvedAccent] = useState(""); useLayoutEffect(() => { if (!wrapperRef.current) return; setResolvedAccent( getComputedStyle(wrapperRef.current) .getPropertyValue("--pretable-accent") .trim(), ); }, [dark, overridden]); return (

ariaLabel="Alerts" columns={columns} getRowId={(row) => row.id} rows={alerts} viewportHeight={VIEWPORT_HEIGHT} />

Resolved --pretable-accent: {resolvedAccent}. The override applies in both modes — toggle dark mode with the override on and the color doesn't change back to the theme's.

); } ``` ```ts columns.ts import type { PretableColumn } from "@pretable/react"; import type { Alert } from "./data"; export const columns: PretableColumn[] = [ { id: "rule", header: "Rule", widthPx: 220 }, { id: "severity", header: "Severity", widthPx: 110 }, ]; ``` ```ts data.ts export interface Alert { id: string; rule: string; severity: "Info" | "Warning" | "Critical"; } export const alerts: Alert[] = [ { id: "a1", rule: "Disk usage > 80%", severity: "Warning" }, { id: "a2", rule: "Node unreachable", severity: "Critical" }, { id: "a3", rule: "Backup completed", severity: "Info" }, ]; ```