Implement Dark/Light Mode Theme System for AsyncAPI Studio

[onkar717]

Reason/Context

• Why we need this improvement?

  • Currently, there is NO global dark/light mode theme system in AsyncAPI Studio
  • The application only has a fixed dark theme with hardcoded colors, without any option to switch themes
  • Users cannot customize the interface based on their preferences or system settings
  • Users have different preferences for light/dark themes based on their environment and time of day
  • Accessibility needs to be improved for users with visual sensitivities
  • Modern web applications are expected to support theme customization

• How will this change help?

  • Adds missing functionality for theme customization
  • Reduces eye strain by allowing users to choose their preferred theme
  • Improves accessibility by supporting system preferences
  • Enhances user experience with personalization options
  • Aligns with modern web application standards

• Motivation

  • Currently missing a fundamental feature (theme switching)
  • Better user experience for different lighting conditions
  • Improved accessibility compliance
  • Modern and professional look and feel

Description

• What changes have to be introduced?

  1. Theme Toggle Component (Currently Non-Existent)

     • Add theme toggle button in the application header
     • Support three modes: Light, Dark, and System
     • Persist theme preference in local storage

  2. Theme System Implementation (New Feature)

     • Implement Tailwind's dark mode feature
     • Create theme context provider
     • Add smooth transitions between themes
     • Update color system with theme-aware variables

  3. Component Updates Required (Current Components Only Support Dark Theme)

     • Monaco Editor theme
     • Navigation sidebar
     • Main content area
     • Modals and overlays
     • Documentation viewer
     • Toolbars and buttons
     • Form elements
     • Code blocks
     • Visualizations

• Will this be a breaking change?
  No, this will be a non-breaking enhancement. The current dark theme will remain the default, and the new theme system will be opt-in.

• How could it be implemented/designed?

  1. Technical Implementation:

     // Theme context (Currently not implemented)
     interface ThemeContextType {
       theme: 'light' | 'dark' | 'system';
       setTheme: (theme: 'light' | 'dark' | 'system') => void;
     }

  2. Implementation Steps:

     • Add theme context and provider (new addition)
     • Configure Tailwind for dark mode (currently missing)
     • Create theme toggle component (new feature)
     • Add local storage persistence
     • Update component styles to support both themes
     • Add system theme detection
     • Implement smooth transitions

I would like to work on this feature as I have experience with:

• React and TypeScript
• Tailwind CSS theming
• Accessibility implementation
• UI/UX design

Looking forward to contributing to AsyncAPI Studio and implementing this missing functionality! 🚀

[github-actions]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[karthik05122]

Hello I would like to work on it, can you assign this to me? Thanks

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️