[material-ui][docs] Open Material UI template with CodeSandbox/StackBlitz

[siriwatknp]

Iterate on #41469

Preview: https://deploy-preview-43604--material-ui.netlify.app/material-ui/getting-started/templates/sign-in/
Preview: https://deploy-preview-43604--material-ui.netlify.app/material-ui/getting-started/templates/dashboard/

Changes

All of the changes are done for SignIn and Dashboard templates only (once this PR is merged, I will open another PR to apply to the rest of the templates).

• Fix the dark mode flicker by adopting the CSS variables and refactor the theme usage to theme.vars.
• Move toggle color mode and theme switching to the docs TemplateFrame.js so that the template code is clean and ready to be used.

TemplateFrame Toolbar

• Add CodeSandbox and StackBlitz buttons
• Changed the ToggleColorMode to buttons and move it to center. (it's too tight to have everything on the right side)
• Changed the theme switcher to icon button with a menu to optimize for small screen

---

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

• docs/data/material/getting-started/faq/faq.md
• docs/data/material/getting-started/templates/templates.md

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 8c64407

[siriwatknp]

No longer need to run the script. The shared theme is the source of truth and it will be bundled with the template when users open CodeSandbox or StackBlitz.

[zanivan]

Hey @siriwatknp I've added a couple tweaks to the Toolbar, and I think it's good to go!

One thing that I think we still need to fix is the template screenshot script. I reckon the toolbar shouldn't be included on those, is it possible? The script is pnpm template:screenshot material-ui

I really like the content of the contributing guide, but its placement on this page feels a bit off. The page is already packed with templates, a Store CTA for premium templates, and Toolpad Core, so adding the guide there might be a bit confusing. How about adding it as a FAQ item like, 'How can I contribute to the free templates?' with a link on the templates page?

[siriwatknp]

Hey @siriwatknp I've added a couple tweaks to the Toolbar, and I think it's good to go!

One thing that I think we still need to fix is the template screenshot script. I reckon the toolbar shouldn't be included on those, is it possible? The script is pnpm template:screenshot material-ui

I really like the content of the contributing guide, but its placement on this page feels a bit off. The page is already packed with templates, a Store CTA for premium templates, and Toolpad Core, so adding the guide there might be a bit confusing. How about adding it as a FAQ item like, 'How can I contribute to the free templates?' with a link on the templates page?

Done!

[zanivan]

LGTM 🚀

[aarongarciah]

some stuff I noticed:

• The color scheme dropdown trigger is displaying up/down arrows, see screenshot below.
  

• The text in the theme dropdown trigger looks a bit too large, the old one felt more balanced in comparison with the options' text size:

  old	new

• I think the bar contents being all blue seems to attract more attention because we use blue as a color accent. Not sure it's intentional or not. I think the problem is the bar is too integrated with the rest of the template, we could try make it very obvious that the bar is not part of the template (another background color?), but that's something for the future.

  old
  

  new
  

[oliviertassinari]

Cool banner, but it looks like we need to continue to iterate on this:

1. Doesn't work on mobile:

Screen.Recording.2024-09-22.at.00.02.25.mov

2. Can't really click on it:

Screen.Recording.2024-09-22.at.00.04.33.mov

[zanivan]

@oliviertassinari sure thing! We're still iterating it on #43708