Add Theme Color Selector for Dynamic Component Previews - Merge conflicts resolved

[0xharkirat]

Add Theme Color Selector for Dynamic Component Previews

Demo Video on YouTube

Overview

This pull request introduces a new feature to the Flutter Shadcn UI documentation: a theme color selector. Users can now dynamically update the preview of all components by selecting a different theme color from a dropdown menu. Additionally, the Flutter Playground code has been updated to accept the themeColor query parameter and dynamically apply the selected theme color.

Note: You need to build the Flutter Playground web app and deploy it to preview the current changes. Alternatively, you can use my hosted version with the updated changes at: https://flutter-shadcn-playground.web.app/.

Changes Made

Documentation Updates

• Theme Color Selector:

  • Added a dropdown menu for selecting different theme colors in the documentation.
  • Observes changes to the data-theme-color attribute to dynamically update the component previews.

• Dynamic Preview Updates:

  • The iframe containing the Flutter component previews dynamically updates based on:
    • theme: Light/Dark mode.
    • themeColor: The selected theme color.
  • Ensures both theme and themeColor parameters are preserved in the iframe's src.

• Default Behavior:

  • Retains the existing functionality for light/dark mode toggling.
  • Falls back to the default theme color (zinc) when no color is selected.

Flutter Playground Updates

• Query Parameter Support:

  • Added support for the themeColor query parameter in the Flutter Playground.
  • The theme (light/dark mode) and themeColor parameters are parsed from the URL.

• Dynamic Theme Application:

  • Implemented a function to dynamically apply the selected theme color:

    @override
    Widget build(BuildContext context) {
        final theme = Uri.base.queryParameters['theme'] ?? 'light';
        final themeColor = Uri.base.queryParameters['themeColor'] ?? 'zinc'; // default theme color is zinc
    
        return ShadApp.router(
        title: 'shadcn-ui Flutter Playground',
        routerConfig: router,
        themeMode: theme == 'dark' ? ThemeMode.dark : ThemeMode.light,
        debugShowCheckedModeBanner: false,
        theme: ShadThemeData(
            colorScheme: getShadColorScheme(themeColor, false),
            brightness: Brightness.light,
        ),
        darkTheme: ShadThemeData(
            colorScheme: getShadColorScheme(themeColor, true),
            brightness: Brightness.dark,
        ),
        );
    }

• Color Scheme Mapping:

  • Introduced the getShadColorScheme function to handle theme color mapping:

    ShadColorScheme getShadColorScheme(String themeColor, bool isDarkMode) {
      switch (themeColor.toLowerCase()) {
        case 'blue':
          return isDarkMode ? const ShadBlueColorScheme.dark() : const ShadBlueColorScheme.light();
        // Other colors follow the same pattern...
        case 'zinc':
        default:
          return isDarkMode ? const ShadZincColorScheme.dark() : const ShadZincColorScheme.light();
      }
    }

Preview src link updated:

Example from button.mdx:
Updated the preview src links to follow the new concise format:

## Primary

<Preview src="button?style=primary"> // see here I have removed the playground link
```dart
ShadButton(
  child: const Text('Primary'),
  onPressed: () {},
)

</Preview>

Default Preview src:

• Updated all component preview src links to use a concise format (e.g., button?style=primary).
• Introduced a defaultPrefix variable in Preview.astro to construct the full URL dynamically.

Example:

  // Default prefix for flutter playground site on localmachine
  // const defaultPrefix = "http://localhost:12345/"; 

  // Default prefix for flutter playground site hosted by the author.
  // this needs to be build again & deployed again
  // const defaultPrefix = "https://shadcn-ui-playground.pages.dev/"; 

  // Default prefix for flutter playground site hosted by the contributor (Harkirat Singh).
  // use this site to see the current changes
  const defaultPrefix = "https://flutter-shadcn-playground.web.app/" 
  const fullSrc = `${defaultPrefix}${src}`;

This allows for flexibility in hosting the Flutter Playground locally or using hosted URLs.

Implementation Details

1. Theme Color Selector:

   • Observes data-theme and data-theme-color attribute changes using MutationObserver.
   • Updates the iframe src dynamically to reflect the selected theme and theme color query parameters.

2. Default Prefix in Preview.astro:

   • Introduced the defaultPrefix variable to manage the base URL for the Flutter Playground..
   • Supports switching between local and hosted environments by simply changing the prefix.

3. Persistent State:

   • The selected theme color is stored in localStorage for persistence across sessions.

4. Flutter Playground Enhancements:

   • Dynamically parses and applies theme and themeColor query parameters.
   • Added fallback behavior for default values (e.g., zinc for themeColor).

How to Test

1. Component Previews:

   • Open the documentation locally or on the deployed preview.
   • Navigate to a component page (e.g., Button).
   • Use the dropdown menu to select a theme color.
   • Verify that:
     • The preview updates dynamically with the selected theme color.
     • The iframe URL includes both theme and themeColor query parameters.

2. Flutter Playground:

   • Open the Flutter Playground locally or hosted at https://flutter-shadcn-playground.web.app/button?themeColor=orange.
   • Test various combinations of theme and themeColor parameters to ensure proper behavior.

3. Fallback Behavior:

   • Remove the theme and themeColor query parameters from the URL and verify that:
   • The default theme (light) and theme color (zinc) are applied.

---

Thank you for reviewing this pull request! Please let me know if there are additional changes or improvements required.

[0xharkirat]

I don't know why it is saying this branch must not contain merge commits, I have not merged anything onto my branch. I have rebased the changes to my branch. All the conflicts are resolved. I have to close the previous one due to same issue.

[0xharkirat]

I have also moved the router configuration into separate file router.dart

[nank1ro]

1. Can you update the CSS of the select color like the theme mode selector?
   The theme color selector should not have a border.

2. There is a bug. If I'm in the button page, I choose "Orange", I see the button orange correctly. I switch to the Card page, no orange in card

[nank1ro]

Ok removing the is:inline directive fixes the bug I mentioned, btw I don't know how to ignore the following lint.

[0xharkirat]

I have fixed the css of Select Color Dropdown, See:

1. The outline border in both light & dark themes matches the documentation theme.
2. The hover effect is also seen.

theme-selector-css.mp4

[0xharkirat]

Let me know if anything else is remaining. As you have mentioned earlier, the bug of Card not showing the changing to the color theme is also fixed by you. So everything should be working fine.

Also you need to change the default url in Preview.astro to local playground or my hosted playground for development purposes, after you have merged the playground changes, then you can also build the playground for web & change the hosted url to yours.

But I think you already know this. Cheers.

[nank1ro]

LGTM, thanks for the work 🙏