[Theme] Quartz SSG Theme for Tabulator #4851
Description
Is your feature request related to a problem? Please describe.*
Tabulator currently ships themes for Simple, Midnight, Modern, Bootstrap, Bulma, Semantic UI, and Materialize - but has no official theme for Quartz SSG, a widely-used static site generator for Markdown-based digital gardens and knowledge bases. Users who embed Tabulator tables inside a Quartz site must manually override styles to match Quartz's CSS custom property system (--light, --dark, --secondary, ...), which is non-trivial and undocumented.
Describe the solution you'd like
Add a new official theme tabulator_quartz.scss under src/scss/themes/.
The theme follows the exact same structure as existing themes (e.g. tabulator_midnight.scss): SCSS variables as compile-time fallbacks, a @use "../tabulator.scss" with (...) pass-through, and a runtime CSS variable override block that maps all visual tokens to Quartz's CSS custom properties
(var(--light, fallback), var(--secondary, fallback), ...)
This allows the theme to:
- Integrate seamlessly with Quartz's light/dark mode toggle with zero additional JavaScript
- Respect user-customized Quartz color palettes automatically at runtime
- Work as a drop-in: load after
tabulator.min.css, no build step required for Quartz users
Coverage includes: header, column hover/sort/drag states, rows (even/odd/hover/selected), footer/pagination, responsive collapse sub-panel, popup containers, context menus, edit list, and toggle component.
I am willing to implement this myself and submit a PR following the contribution guidelines. The theme has already been developed and validated against Tabulator v6.3.1 with Quartz v4.
Note on portability: Although designed for Quartz, this theme is usable in any project via the hardcoded hex fallbacks (e.g. var(--light, #faf8f8)). Non-Quartz users will get a clean light theme out of the box. The limitation is that colors will not adapt dynamically to their site's design system - all tokens resolve to the Quartz default palette unless the host project defines the same CSS custom property names (--light, --dark, --secondary, etc.).
Describe alternatives you've considered
- Documenting a CSS snippet in the wiki: does not result in a first-class theme and requires users to maintain it themselves across Tabulator upgrades.
- Using an existing dark theme (e.g. Midnight) as a base: Midnight uses hardcoded hex values and does not adapt to Quartz's runtime color system, breaking on user-customized palettes.
Additional context
- Quartz SSG repo: https://github.com/jackyzha0/quartz
- Quartz theming system: CSS custom properties injected via
joinStyles()inquartz/util/theme.ts, with:root { --light: ... }for light mode and:root[saved-theme="dark"] { --light: ... }for dark mode - The proposed theme file is ready for review. Happy to open the PR immediately upon confirmation that this contribution is welcome.