Blueprint: Add support for customizing color themes

[alxmiron]

I guess it would be nice to provide the ability to add/customize a color theme. In many cases, we need more than light/dark themes only

What are your thoughts about relevance and implementation?

[llorca]

What else are you thinking besides light and dark modes? Note that you can already customize the entire color palette

[alxmiron]

In my project I need 4 color themes - default, light, dark and yellow. Ideally, I'd like to have some option to add as many additional palettes as I want, without big changes of existing library code

[DrewDennison]

Disclaimer: I'm not on the Blueprint team

The dark theme just added pt-dark to an outer div container and then the css styles are used for the dark theme. I think the correct near-term solution is for you to add say theme-yellow to your outer most div (.app or body element) and then copy whatever styles you need from the pt-dark sections and customize for your needs.

I'm not sure how much work it would be to refactor all the .pt-dark styles into a single pt-dark.scss file. I haven't seen any discussion in using a CSS in JS library such as styled-components in 2.0 but I might have missed something.

[alxmiron]

I dont want to change current codebase a lot. Of course, copying .pt-dark styles with new color values is the easiest way. But I am thinking about some mixin, that can generate theme-specific styles, based on some config variables, defined in scss. As less changes of source file as possible, to avoid further conflicts

[giladgray]

@AlexMarvelo creating custom themes is theoretically* possible by overriding SCSS variables and compiling a custom blueprint.css. You can even compile the entire project within a CSS class namespace, so all your custom styles would be inside .theme-yellow, for instance: .theme-yellow .pt-button.

Sass customization is officially unsupported by the team. We did our due diligence to allow overriding all variables by adding !default, and by simply using a ton of variables in every component. But that's all we can commit to--we've got enough work with the existing styles and components.

Prior discussions: #123, #184, #194.

* never attempted but the pieces should be in place

[alxmiron]

Thanks for explanations @giladgray

[cmslewis]

@giladgray @llorca - my thought: can we close this? I don't see us prioritizing themes in a first-class way anytime soon (unless Palantir-internal teams suddenly happen to need Themes Number Three, Four, and Five), in which case we can just open a new ticket.

[cmslewis]

(Closing aggressively for now; feel free to re-open if you vehemently disagree.)

[llorca]

yeah, I view regular/.pt-dark as modes more than themes. for actual themes, I don't see us going further than !default customizable Sass variables for now, that stuff works pretty well.