rusackas opened a new pull request, #36749:
URL: https://github.com/apache/superset/pull/36749
### SUMMARY
This PR introduces granular theming capabilities for Apache Superset
dashboards, allowing users to apply themes at the component level (Charts,
Markdown, Rows, Columns, Tabs) in addition to the existing instance and
dashboard-level theming.
**Key Changes:**
1. **ComponentThemeProvider** - New wrapper component that loads and applies
themes to dashboard components with proper inheritance (Instance → Dashboard →
Tab → Row/Column → Chart)
2. **ComponentHeaderControls** - Standardized menu component (vertical dots)
for all dashboard components, replacing inconsistent UI patterns:
- Charts: Added "Apply theme" to existing SliceHeaderControls
- Markdown: Replaced MarkdownModeDropdown with ComponentHeaderControls
- Row/Column: Replaced gear icon with ComponentHeaderControls
- Tabs: Added ComponentHeaderControls
3. **ThemeSelectorModal** - Modal for selecting themes to apply to components
4. **Theme inheritance** - Components inherit themes from their parent
hierarchy and can override specific tokens
**Architecture:**
```
Instance Theme (global default)
└── Dashboard Theme (override)
├── Tab Theme
│ ├── Row/Column Theme
│ │ └── Chart/Markdown Theme
```
### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
_Screenshots to be added after testing_
### TESTING INSTRUCTIONS
1. Open a dashboard in edit mode
2. Hover over any component (Chart, Markdown, Row, Column, or Tabs container)
3. Click the vertical dots menu (⋮) that appears
4. Select "Apply theme" from the menu
5. In the modal, select a theme and click "Apply"
6. Verify the component's styling updates to reflect the selected theme
7. Save the dashboard and reload to verify theme persistence
### ADDITIONAL INFORMATION
- [ ] Has associated issue:
- [ ] Required feature flags:
- [x] Changes UI
- [ ] Includes DB Migration
- [x] Introduces new feature or API
**Note:** This is a draft PR. Backend persistence (Phase 3) will save
component themes to dashboard `json_metadata`. Currently themes are stored in
component metadata on the client side.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
