Closed aliyss closed 1 year ago
Hi! Well, first of all thank you for trying it out :)
Initially, your post tempted me to say "sure, let's build ways to fine-tune the color palette right into the plugin". However, I see no clear line between what should be included and what shouldn't. Lightening or darkening one of the palettes could be useful, but then... why not allow a config option to lighten/darken just one of the colors instead of all of them at once, or perform other operations over them such as changing saturation?
Also, as soon as we start fine-tuning the colors, we invalidate Google's color research into safe contrast, which may be dangerous to do dynamically based on user input.
I see two routes you can take:
You can fork the project. Then, transform the colors
object in line 7 of index.js
to apply color operations over the resulting colors (I've used chroma-js for these before, but there's lots of packages you can use) . If you keep to hex color format, the rest of the plugin should work. For dynamic colors, do the same after the tailwindThemeFromColor
function is called in the updateTheme.js
file.
If your project doesn't really need dynamic color and you want to fine-tune the palette just once, you can just use the Material Theme Builder as a starter, build the theme object manually, tweak the HEX values by hand, then use tailwind-material-surfaces
and tailwind-mode-aware-colors
packages instead of this one, as you won't be generating any new palettes but using a hardcoded one.
Please let me know if this makes sense, I'm glad to help if you need me to.
Thanks a lot for the explanation. I see that it might not make sense for the colors to be modified.
I do need the dynamic colours, so will probably opt for option 1. Thanks for the hints.
Hiya
First of all thanks for the package.
I wanted to ask if it is already possible or if one could extend the package, so that it allows for a config, where one could fine grain the output by passing in a darkener / lightener to generate the results.
Here's an example of the output I am trying to achieve:
Default
Darker
I saw that there is a
Scheme.dark
function which leads to material-color-utilities being called, but that can't be extended. So in my opinion the colors would have to be changed after they are generated.