formaat-design / reshaped

Community repository for storing examples, reporting issues and tracking roadmap
https://reshaped.so
97 stars 3 forks source link

Use a different palette to generate theme for dark mode #232

Closed hahahumble closed 1 month ago

hahahumble commented 3 months ago

If I want to change the background color of a Button in dark mode, how should I do it? Or can dark mode use a different palette to generate theme? Because I found that some palettes used to generate dark mode are hard to see.

Example :

primary: "#0891b2",
critical: "#e22c2c",
positive: "#118850",
neutral: "#ededed",

Screenshot in dark mode:

image-b89Jo640

Screenshot in light mode:

image-wnnC45Rv

blvdmitry commented 1 month ago

We've implemented this to the upcoming v3 release alongside the updated theming generation. While the release is planned for early July, we will be releasing canary releases with the first one happening somewhere next week.

// current implementation
generateThemeColors({ primary: "#0369a1" }),

// now optionally support full token syntax
generateThemeColors({ primary: { hex: "#0369a1", hexDark: "#..." }),