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:

<!-- Force dark -->
<div data-yable-theme="dark">
  <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>

---