UI Framework & Theming
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
MoodTune utilizes a modern Flutter-based UI framework designed to provide a cohesive visual experience across iOS and Android platforms. The interface is built upon the shadcn_ui component library, which offers a set of accessible and customizable widgets. The application is strictly themed with a dark color palette, utilizing a customized slate color scheme to maintain consistency throughout various functional screens, including audio analysis, music catalog browsing, and user history.
The visual identity of MoodTune is deeply integrated with its core functionality. The app maps specific musical moods to distinct visual identities and color palettes. This system ensures that the results of the mood analysis are not only presented textually but are also reinforced by the UI's theming, creating an immersive feedback loop for the user.
Sources: CLAUDE.md:120-123, README.md:16-18
Core UI Components and Libraries
The UI is constructed using a hierarchy of Flutter packages and custom configurations. The primary building block is shadcn_ui, which provides high-level components like buttons and cards, while the base routing and app structure are handled by standard Cupertino and Material wrappers.
Framework Stack
| Component | Implementation |
|---|---|
| UI Library | shadcn_ui (version 0.43.0) |
| Base App Class | ShadApp.custom |
| Platform Wrapper | CupertinoApp.router |
| Icons | cupertino_icons and custom SVG assets |
| Fonts | Inter Tight (Weights 500, 700) |
Sources: CLAUDE.md:120-123, pubspec.yaml:26, 40, logo/README.md:26
Component Architecture
The application follows a clean architecture pattern where UI components are housed within the presentation layer of each feature. These components are categorized into view (full pages) and widgets (reusable UI elements).
The diagram shows the hierarchical relationship between the root application configuration and the specific UI components used in feature views.
Sources: CLAUDE.md:41-58, 120-123
Visual Identity and Theming
MoodTune employs a "Forced Dark" theme strategy. The primary color scheme is based on ShadSlateColorScheme, ensuring a consistent, high-contrast dark mode across all devices.
Mood-Based Visual Identities
A unique aspect of the theming system is the dynamic visual identity applied based on the analysis results. There are four primary mood identities, each with a specific color palette and visual style:
- Upbeat
- Serene
- Charged
- Reflective
Sources: README.md:16-18, CLAUDE.md:120-123
Brand Color Constants
The core branding utilizes a specific set of colors defined for the logo and application assets, which influence the overall UI design:
- Ink:
#2d2a26(Primary text and wordmark) - Cream:
#efece6(Backgrounds and glyph features) - Peach:
#d99d77(Accent color) - Sunset Gradient: Transitions from
#e9b489(warm sand) through#d4885f(terracotta) to#b16a8a(plum).
Sources: logo/README.md:11-15, app-icon/README.md:15-20
Assets and Branding Implementation
Logo and Typography
The MoodTune logo (the "Notehead") is implemented as SVG assets. The logo lockup uses the Inter Tight font (weight 700). The framework is configured to use currentColor for SVG assets, allowing the UI to programmatically control logo colors based on the surrounding theme context.
<!-- Example of wordmark font inclusion defined in assets -->
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@700&display=swap" rel="stylesheet">
Sources: logo/README.md:7-10, 26-30, app-icon/README.md:23-26
Iconography
The application uses custom-designed icons, including a lowercase "m" monogram on a sunset gradient for the app launcher. For adaptive Android icons, the gradient fills the safe zone while the cream "m" serves as the foreground glyph.
The class diagram illustrates the dependency of the application's icon assets on the defined brand color palette.
Sources: app-icon/README.md:7-12, 15-20, pubspec.yaml:57-65
Conclusion
The UI Framework of MoodTune is centered on a customized implementation of shadcn_ui that enforces a dark aesthetic while allowing for dynamic, mood-driven color variations. By combining standardized component libraries with highly specific brand assets (Inter Tight typography and a curated sunset palette), the system achieves a balance between professional utility and expressive musical analysis.
Sources: CLAUDE.md:120-123, README.md:16-18