Dark Mode & Theming

By Fahad Murtaza • Updated July 2026

TableCrafter ships with automatic high-contrast and reduced-motion theming driven by OS preferences, plus a dark-aware loading skeleton. There is no full dark table theme out of the box, but every visual surface is a plain CSS class you can override to build one.

What TableCrafter does automatically

Theming in TableCrafter is preference-driven, not attribute-driven. When a table initializes, the script inspects the visitor's operating-system settings and applies matching classes to the table container. There is nothing to configure in the shortcode for this to work.

• Dark loading skeleton — the shimmer placeholder shown while data loads switches to dark gray tones under @media (prefers-color-scheme: dark).
• High-contrast theme — if the OS reports prefers-contrast: high, the tc-high-contrast class is added and a small set of CSS variables takes over colors.
• Reduced motion — if the OS reports prefers-reduced-motion: reduce, the tc-reduced-motion class is added and animations/transitions are effectively disabled.

There is no theme or dark shortcode attribute

The [tablecrafter] shortcode has no color, theme, skin, or class attribute. Its real attributes are data and behavior oriented:

To theme a table you target it by its id (set one with the id attribute) or by the container class, then write CSS. The shortcode itself stays focused on data.

// Give the table a stable id you can target in CSS
[tablecrafter source="https://example.com/data.csv" id="pricing-table" search="true" export="true"]

The container classes you target

Two wrapper classes exist depending on how the table is rendered. Both are stable hooks for your CSS.

High-contrast theming via CSS variables

The one place TableCrafter exposes CSS custom properties is the high-contrast theme. When tc-high-contrast is active, four variables are defined on the wrapper and consumed across the table. These are the only theming variables in the plugin.

Because these variables are scoped to .tc-high-contrast, you can redefine them in your theme to recolor the high-contrast experience without touching the plugin:

/* Recolor the high-contrast theme (only active when the OS
   reports prefers-contrast: high) */
.tc-wrapper.tc-high-contrast {
  --tc-border-color: #0a0a0a;
  --tc-text-color:   #0a0a0a;
  --tc-bg-color:     #ffffff;
  --tc-focus-color:  #0044cc;
}

Building a full dark table yourself

For a true dark theme across the whole table, wrap your overrides in @media (prefers-color-scheme: dark) and restyle the real classes. None of these are variables, so you set colors directly. The classes below are all present in the rendered markup:

@media (prefers-color-scheme: dark) {
  #pricing-table .tc-table-container {
    background: #1f2430;
    border-color: #374151;
  }
  #pricing-table .tc-table th {
    background-color: #2a3142;
    color: #e5e7eb;
  }
  #pricing-table .tc-table td {
    color: #d1d5db;
    border-bottom-color: #374151;
  }
  #pricing-table .tc-table tr:hover {
    background-color: #2a3142;
  }
  #pricing-table .tc-link { color: #60a5fa; }
}

Reduced motion

When the OS requests reduced motion, TableCrafter adds tc-reduced-motion to the wrapper, which forces animation and transition durations to near-zero and disables smooth scrolling. This applies to the loading shimmer, sort transitions, and editable-cell highlights. You generally do not need to touch this, but you can extend it for custom animations you add:

.tc-wrapper.tc-reduced-motion .my-custom-anim {
  animation: none !important;
}

Where to add your CSS

Because there is no theme picker in the admin, theming is done with CSS. Add your overrides in any of these standard WordPress locations:

1. Appearance → Customize → Additional CSS for quick, site-wide rules.
2. Your child theme's style.css for version-controlled overrides.
3. A small plugin or wp_enqueue_style snippet if you need the CSS to load alongside other functionality.

The TableCrafter admin screen itself lives under the TableCrafter top-level menu in wp-admin; it manages data sources and shortcodes, not colors.

Summary

• Automatic, no-config: dark loading skeleton, high-contrast theme (4 CSS variables), reduced motion — all driven by OS preferences.
• No theme/dark/class shortcode attribute — theming is done with CSS against stable .tc- classes.
• The only CSS variables are --tc-border-color, --tc-text-color, --tc-bg-color, and --tc-focus-color, scoped to .tc-high-contrast.
• For a full dark table, override the real classes inside @media (prefers-color-scheme: dark), scoped to your table's id.

Next steps: see accessibility.html for the keyboard navigation and ARIA behavior that the high-contrast and reduced-motion themes build on, and shortcode-reference.html for the complete list of real [tablecrafter] attributes you can pair with your custom styling.