The best way to create a preview of the different themes?

[alexis-opolka]

Hi 👋🏼 ,

I'm currently working on implementing a preview of the different schemes available in Primer React and I was asking myself
what is the best way to create a React component capable of letting the user see enough differences between each scheme.

As such, I'm left with those questions and I would like to know what you think is the best way to proceed. ^-^

• What are the most eye-catching elements a user typically wants to have in a preview?

• Is it better to make it simple and draw the shapes with their respective colour scheme somewhat like a draft? Or is it better to create a "minified" page with actual content on it?

• Is using the useTheme hook the good thing to do, like:

  const {theme} = useTheme();
  const themeToPreview = theme?.["colorSchemes"]?.[scheme.value]?.["colors"];

What would be your answers for the above questions?
If you think I missed an interesting matter or didn't ask myself the good questions, please feel free to let me know. 😄

[broccolinisoup]

Hi @alexis-opolka 👋🏻

Thank you for this discussion post, I loved your questions! 🔥 I asked this to my team as well and here are a couple of ideas that we think might help you to shape your project 😌

If you are building this specifically for @primer/react, showing interactive components would be really cool. Like https://reshaped.so/ they have a few interactive components on the main page and it is really cool to see how they look in different themes.

Or another idea could be what Radix does. They have live examples on the themes page and they render the entire page with the chosen theme. https://www.radix-ui.com/

You could also look into GitHub Appearance settings and I think it is similar to what you were mentioning? (draw the shapes with their respective colour scheme somewhat like a draft)

I hope these give you some ideas and let me know if you have any further questions!

Thanks again for posting this discussion and good luck with your project!

[alexis-opolka]

Hi @broccolinisoup

Sorry to reply so late, I wasn't able to work on my project until a few weeks ago.
I was indeed trying to create a preview similar to the GitHub Appearance settings page and here's what I've got so far:

What do you think? Did I miss anything important to highlight?

[broccolinisoup]

Hey! No worries, it looks great - however works best for your project!

I'm going to mark this discussion as answered and feel free to reach out to us if you have any other questions! Thanks!