Skip to content

Implement dynamic theme switching in Storybook and reset default theme to 'default' #29

@ryota-murakami

Description

@ryota-murakami

📋 Task Description

Currently, Storybook stories with theme props are hardcoded to use the 'sunrise' theme. This prevents testing components with the default theme and other theme variations. We need to:

  1. Reset default theme from 'sunrise' to 'default'
  2. Implement theme switching addon/control in Storybook
  3. Allow manual theme selection per story variant

🎯 Objectives

  • Identify all stories with hardcoded theme props (e.g., BoardCard.stories.tsx)
  • Change theme default from 'sunrise' to 'default'
  • Implement Storybook theme switcher control
  • Enable per-story theme override capability
  • Document theme switching usage in stories
  • Test all 14 available themes render correctly

📋 Current Themes Available

Light themes:

  • default, sunrise, sandstone, mint, sky, lavender, rose

Dark themes:

  • dark, midnight, graphite, forest, ocean, plum, rust

🛠️ Implementation Approach

  1. Update mock data in stories: theme: 'sunrise'theme: 'default'
  2. Add theme arg to story args for manual override
  3. Consider Storybook addon or global parameter for theme switching
  4. Verify theme application across all component stories

📚 References

  • Theme configuration: lib/theme.ts
  • BoardCard story: components/Boards/BoardCard.stories.tsx:22
  • Theme system: 14 predefined CSS themes in styles/themes/

✅ Acceptance Criteria

  • Default theme is 'default', not 'sunrise'
  • Users can switch themes in Storybook UI
  • All theme variants render without errors
  • Documentation updated for story authors

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentationenhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions