skills.rest
TheYearIsTwentyGX
TheYearIsTwentyGXCOMMUNITY
Explore all skills by this author →
GitHub

tablegx-theming

Style TableGX components with CSS variables and theme.css tokens.

Updated Jun 9, 2026
Search Tags:#theming#theme#dark-mode#css-variables#tablegx#slot-overrides#per-cell-styling
One-click install
npx skills add https://github.com/TheYearIsTwentyGX/TableGX --skill tablegx-theming
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tablegx-theming
Source: https://github.com/TheYearIsTwentyGX/TableGX/tree/main/skills/tablegx-theming
Command: npx skills add https://github.com/TheYearIsTwentyGX/TableGX --skill tablegx-theming

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Theming TableGX components to match brand visuals using CSS variables.

Core Features & Use Cases

  • Theming via CSS variables and theme.css tokens, enabling brand visuals and dark mode, plus translucent styling for header and pinned sections.
  • Slot-based customization: classNames slots support for ReadOnlyTable, EditableTable, and TabbedTable with column/header styling and skin overrides.
  • Per-cell styling and data-attribute hooks: getCellClassName usage and data-tgx-* selectors for targeted UI regions.

Quick Start

Import '@twentygx/tablegx/theme.css' and override CSS variables in your app's root or dark mode blocks to apply your chosen theme.

Frequently Asked Questions about tablegx-theming

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I theme TableGX tables to match my brand visuals using CSS variables?▼

Theme TableGX tables by importing theme.css and overriding CSS variables in your app's :root or .dark blocks. This applies your brand colors and surfaces to ReadOnlyTable, EditableTable, and TabbedTable variants.

What is the best way to apply dark mode to TableGX components?▼

Apply dark mode to TableGX components by configuring CSS tokens within a .dark selector block in your stylesheet. This updates the component surfaces and colors for dark mode scenarios.

Can I use slot overrides for per-cell styling in an EditableTable?▼

Yes, you can achieve per-cell styling in an EditableTable using classNames slots and the getCellClassName function. This allows targeted UI customization alongside data-tgx attribute selectors.

Does TableGX theming support translucent styling for pinned table sections?▼

Yes, TableGX theming supports translucent styling for both header and pinned sections. You configure this by adjusting the relevant CSS variables and tokens within your theme.css overrides.

How do data-tgx attributes work for targeting specific table UI regions?▼

Data-tgx attributes act as selector hooks for targeting specific UI regions within TableGX components. You use these data-tgx-* selectors in your CSS to apply custom styles to distinct table areas.

What are the limitations of styling TableGX without using CSS variables?▼

Styling TableGX without CSS variables bypasses the centralized theme.css token system, making dark mode switching and brand visual consistency harder to maintain across ReadOnlyTable and TabbedTable variants.

Related Skills

Explore More Design & Creative Skills→
jubalmjubalm
1

shadcn/ui Customization & Theming

Configure CSS variable-based theming for shadcn/ui components with Tailwind.

Community
Advanced
marcusmarcus
1.0k

create-theme

Configure and apply custom Sidecar themes via a configuration file.

Community
Intermediate
rodydavisrodydavis
58

material-3-to-material-2-theme-adapter

Map Material Design 3 color tokens to Material Design 2 theme variables via CSS overrides.

Community
Basic
matlabmatlab
162

matlab-uihtml-design

Generates self-contained HTML/CSS/JS control panels for MATLAB uihtml components with theme-aware styling.

Official
Intermediate