• Table
  • Docs
  • Examples
  • Pricing
GitHubGet started
Getting started
Basics
  • Fixed row height
  • Fixed column width
  • Auto-detected column width
  • Truncated text with hover tooltips
  • Animated pagination
  • Animated page size change
  • Animated table states
Design
  • Supports CSS styling of ‹table›
  • Custom content in tables using Custom Elements
  • Shadows
  • Rounded corners
  • Dark/Light mode
  • Material design
  • Bootstrap design
Details
  • Island Details as Expansion Panels
  • Default Details as a regular row below
Filtering and Sorting
  • Toolbar with Search
  • Custom user filters
  • Filter Drawer
  • Custom sorting rules
AI
  • MCP server for AI coding agents
Frameworks
  • Angular data table
  • Preact data table
  • React data table
  • Solid data table
  • Svelte data table
  • Vue 3 data table
Server-side rendering
  • Prerendering
Accessibility & localization
  • Texts and localization
  • Keyboard and focus
  • Screen readers
  1. Docs, Bro
  2. Design
  3. Dark/Light mode
v1.2.0

Dark/Light mode

You can set the value to auto, and the Table, Bro will follow the system color scheme defined by the prefers-color-scheme media query.

Alternatively, you can set it to light or dark to force a specific mode.

Filters
Orders
No
Description
Price
Loading
Items per page:
5
0 of 0
import type {BroConfig} from '@table-bro/core';

const config: BroConfig = {
  theme: 'auto' // 'light' | 'dark'
};
← Rounded corners
Material design →
DJ
Cookies, Bro

We use Google Analytics to understand how you use our site and to make it better.
Learn more in our Privacy Policy

Privacy PolicyTerms of ServiceLicense Agreement
LinkedInbro@table-bro.com
Sort