Step 10: Add a Theme

Import the theme CSS and set the theme prop:

import '@zvndev/yable-themes'

// Use the stripe theme
<Table table={table} theme="stripe" striped stickyHeader />

// Or the compact theme for dense data
<Table table={table} theme="compact" compact bordered />

Dark Mode

Dark mode activates automatically when the user's system preference is dark. To force a mode, set data-yable-theme on the document element or on any container — a pinned container overrides the inherited theme (including the OS preference) for its subtree:

<!-- Force dark for one grid -->
<div data-yable-theme="dark">
  <table table="{table}" />
</div>

<!-- Force light for one grid, even on a dark-OS machine or inside a dark app -->
<div data-yable-theme="light">
  <table table="{table}" />
</div>

Custom Token Overrides

Apply a custom accent color to the table's container:

.my-brand-table {
  --yable-accent: #7c3aed;
  --yable-accent-hover: #6d28d9;
  --yable-accent-light: rgba(124, 58, 237, 0.08);
}

<div className="my-brand-table">
  <Table table={table} striped />
</div>

---