feat: Superset UI styling extension framework #27011
Conversation
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
|
Thank you for opening the PR, but I'm afraid it's taking things backward in terms of where the project intends to go. Superset was originaly built with LESS styling, but that has posed a lot of issues over the years in terms of growth, maintenance, and customization. Because of that, we're actually trying to progressively get RID of all of the LESS code in Superset. We're steering toward Emotion to use CSS-in-JS techniques that will give us contained styling of our component system, and also supports theming and customization in numerous ways. The |
|
If you want to contribute to the "themability" of Superset, I'm sure we can orient you in the right direction so you can work on the most impactful and most visible areas of the codebase. |
|
@mistercrunch we are eager to contribute to the "themability" of Superset. Could you please provide guidance on the most impactful and visible areas of the codebase? We are keen to make a meaningful impact. |
|
@SatishMulchandani are you available in Superset Slack? I think it would be great to organize around this effort. @michael-s-molina and I can give you all the context required to make a successful contribution toward themability. Feel free to reach out |
|
Closing this out since it hasn't been touched in quite some time, but we'd be happy to reopen it if you ever want to revisit/update it! |
#25012
feat: Superset UI styling extension framework #27011
SUMMARY
Customizing Buttons and Navigation in Superset through Theming
Superset has allowed limited UI customization via the THEME_OVERRIDES configuration. This exposes only font and colour changes for certain elements like buttons and navigation links.
This approach has some drawbacks:
• Styles are restricted to typography and colours only. Properties like borders, shadows, opacity and more remain inaccessible.
• Identical HTML attributes for semantic elements make selective styling difficult. The "Create Dashboard" primary call-to-action button uses the same classes as secondary "Bulk Action" buttons.
• Classes and selectors for customization are not clearly documented.
To address this, theming capabilities have been enhanced significantly:
• A new theme file can override styles for most UI elements based on class names, HTML tags and component hierarchy. Examples now exist for styling specific buttons, dropdowns, tables and more.
• Full access to modify colours, fonts, spacing, borders, shadows and more for targeted elements.
• Improved documentation for Superset's React hierarchy and class names to simplify theme crafting.
This grants administrators more flexibility in customizing branding aesthetics, tweaking interactions, enhancing readability and ensuring accessibility needs without wrestling overrides at a component level.
The updated theming system aims to balance standardization that aids rapid development with customization pathways vital for diverse dashboard consumers.
Apache Superset’s extension to customize Superset's Appearance with Theming:
This extension allows administrators to customize various aspects of the superset UI appearance without needing to override React components.
What Can Be Customized?
The theming file
theme.lessallows changing colors, typography, borders, shadows, and more for elements like:And more based on their HTML tags, CSS classes and attributes.
How Theming Works?
• Defining Styles: This involves specifying the visual properties of various elements such as text, buttons, backgrounds, etc. Styles can include attributes like colors, fonts, borders, and more.
For example:
// Color mixins
.setColor(@name, @color: black) {
.bg-@{name} {
background-color: @color !important;
}
.text-@{name} {
color: @color !important;
}
.border-@{name} {
border-color: @color !important;
}
.placeholder-@{name} {
border-color: @color !important;
}
}
• Creating Theme Files: Theme files contain the style definitions and are often separate from the core application code. This separation allows for easier maintenance and updates.
For example:
// Primary button theme
.btn-primary {
.bg-blue-600;
.border-blue-600;
}
// Input theme
input.form-control {
.font-sans;
.bg-white;
.border;
.border-gray-600;
.placeholder-gray-600;
.text-sm;
.text-gray-800;
}
• Importing Themes: This process involves loading the appropriate theme files and applying the defined styles.
Import theme.less file in /superset-frontend/src/theme.ts file.
// Importing custom theme.
import './assets/stylesheets/custom/theme.less';
• Restart Superset server to apply the defined styles
Benefits
Enabling custom theme in the application
• Import theme.less file in /superset-frontend/src/theme.ts file.
// Importing custom theme.
import './assets/stylesheets/custom/theme.less';
To enable custom loading indicator in the application
• Change the Loader image path from src/assets/images/loading.gif to src/assets/images/custom/loading.gif in the following files:
o /superset-frontend/src/components/Loading/index.tsx
o /superset-frontend/src/components/Loading/Loading.test.tsx
o /superset/templates/superset/basic.html
o /superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx
ADDITIONAL INFORMATION