Skip to content

refactor(ui): migrate hardcoded colors in onboarding and badges to QueryaTheme tokens #1509

Closed

Description

@ZhuchkaTriplesix

Summary

A code search for Color(0x...) outside of lib/core/theme/ revealed 37 hardcoded color definitions, bypassing the unified QueryaTheme token system:

  1. Onboarding / Welcome Tour:
    • In lib/features/onboarding/welcome_tour_dialog.dart (lines 63–64, 393–444, 638–644), fixed hex colors are directly instantiated:
      iconColor: const material.Color(0xFF06B6D4), // Cyan
      iconColor: const material.Color(0xFF8B5CF6), // Purple
      iconColor: const material.Color(0xFF3B82F6), // Blue
      iconColor: const material.Color(0xFF10B981), // Emerald
      iconColor: const material.Color(0xFFF59E0B), // Amber
      color: const material.Color(0xFFEC4899),     // Pink
      These colors do not adapt when the user switches between light, dark, high-contrast, or custom themes.
  2. Connection Environment Badges:
    • In lib/shared/widgets/connection_environment_badge.dart (lines 27–29), hardcoded Material colors are used:
      ConnectionEnvironment.development => const material.Color(0xFF4CAF50),
      ConnectionEnvironment.staging => const material.Color(0xFFF59E0B),
      ConnectionEnvironment.production => const material.Color(0xFFEF4444),
      These should be resolved via theme semantic status tokens (workbench.success, workbench.warning, workbench.error).
  3. Buttons & Dialogs:
    • In lib/shared/widgets/querya_button.dart (lines 298–316) and lib/shared/widgets/app_dialog.dart, raw Color(0xFF000000) and Color(0xFFFFFFFF) are used instead of theme foreground/background tokens.

Proposed Solution

  1. Replace hardcoded colors in welcome_tour_dialog.dart with colors derived from context.queryaTheme (e.g. using syntax/editor accent tokens or theme primary colors).
  2. Refactor connection_environment_badge.dart to use semantic workbench colors from context.queryaTheme.workbench.
  3. Ensure all dialog overlays and button contrast colors reference theme tokens.

Acceptance Criteria

  • All UI widgets adapt harmoniously across all installed themes (light, dark, high contrast).
  • No hardcoded Color(0x...) remain in welcome_tour_dialog.dart and connection_environment_badge.dart.

Activity

  1. added
    themeTheming, colors, VS Code themes
    frontendTheme parser epic label: frontend
    uiUser interface components and widgets
    P3Low priority / Polish & Enhancements
    on Oct 12, 2026
  2. added this to the Theme system milestone on Oct 12, 2026
  3. ZhuchkaTriplesix commented on Oct 17, 2026

    @ZhuchkaTriplesix
    MemberAuthor

    Resolved in #1666

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3Low priority / Polish & EnhancementsfrontendTheme parser epic label: frontendthemeTheming, colors, VS Code themesuiUser interface components and widgets

    Type

    No type

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions