Theming & UI Customization
Relevant source files
The following files were used as context for generating this wiki page:
- app/src/main/kotlin/com/shadowcheck/mobile/rebuilt/ui/theme/ThemeConfig.kt
- app/src/main/kotlin/com/shadowcheck/mobile/rebuilt/ui/screens/ComprehensiveThemeEditor.kt
- app/src/main/kotlin/com/shadowcheck/mobile/ui/screens/settings/ThemeBuilderScreen.kt
- app/src/main/kotlin/com/shadowcheck/mobile/rebuilt/presentation/theme/Theme.kt
- app/src/main/kotlin/com/shadowcheck/mobile/ui/Sidebar.kt
- app/src/main/kotlin/com/shadowcheck/mobile/rebuilt/ui/screens/SettingsScreen.kt
The ShadowCheck Mobile application features a robust and highly granular theming system built with Jetpack Compose. It allows users to modify almost every aspect of the visual interface, from global color schemes and typography to specific element dimensions and icon selections. This flexibility is supported by a persistent configuration system that ensures user preferences are maintained across sessions.
The theming architecture is divided into global styles (colors, spacing, and animations) and per-element customizations, enabling specialized layouts for different screens such as Home, List, and Detail views.
Sources: app/src/main/kotlin/com/shadowcheck/mobile/rebuilt/ui/theme/ThemeConfig.kt:1-120, app/src/main/kotlin/com/shadowcheck/mobile/rebuilt/ui/screens/ComprehensiveThemeEditor.kt:1-100
Theme Architecture & Data Models
The core of the customization system relies on two primary data structures: ThemeConfig and ElementStyle.
ThemeConfig
This class acts as the central repository for global UI settings. It includes definitions for primary/accent colors, button behaviors, global card styles, and typography scales. It also handles the mapping of specific functional icons (e.g., WiFi, Bluetooth) to string identifiers that the UI uses to resolve vector assets.
ElementStyle
The ElementStyle data class provides granular control over specific UI components. It allows for overrides of dimensions (height/width), alignment, and arrangement for specific sections of the app.
Theme Management & Persistence
Theme settings are persisted using Android SharedPreferences. The ThemeConfig class includes methods to serialize and deserialize the current state to a private preference file named "theme_config".
The following table outlines the persistence keys and types used:
| Preference Key | Data Type | Default Value | Description |
|---|---|---|---|
primaryColor | Int (Hash) | 0xFF00BCD4 | Main brand color |
backgroundColor | Int (Hash) | 0xFF0D1B2A | Global background color |
buttonCornerRadius | Float | 8.0f | Rounding for button edges |
fontFamily | String | "Default" | Selected typeface |
animationDuration | Int | 300 | Duration of UI transitions in ms |
isDarkMode | Boolean | true | Toggle for dark/light mode |
Sources: app/src/main/kotlin/com/shadowcheck/mobile/rebuilt/ui/theme/ThemeConfig.kt:85-132, app/src/main/kotlin/com/shadowcheck/mobile/ui/screens/settings/ThemeBuilderScreen.kt:33-51
UI Customization Tools
The application provides two distinct editors for theme modification: the Theme Builder and the Comprehensive Theme Studio.
Comprehensive Theme Editor
This editor provides a multi-tabbed interface for real-time manipulation of the ThemeConfig. It utilizes a "Live Preview" panel that instantly reflects changes made in the editor panel.
- Colors Tab: HSV-based color pickers for primary, surface, and background colors.
- Icons Tab: A dropdown selection system for mapping system icons (e.g., changing the default "Wifi" icon to "Router").
- Elements Tab: Direct control over
ElementStyleproperties for specific screens. - Export/Import: Functions to serialize the current theme to a JSON string for sharing via the clipboard.
Icon Resolution
The system resolves string identifiers to ImageVector assets through the getIconByName utility function. This allows the UI to dynamically swap icons for cellular towers, bluetooth devices, and navigation items without code changes.
Sources: app/src/main/kotlin/com/shadowcheck/mobile/rebuilt/ui/screens/ComprehensiveThemeEditor.kt:180-210
Application Integration
The custom theme is applied globally through the ShadowCheckTheme wrapper, which integrates the ShadowCheckColors object into the standard Material 3 ColorScheme.
The Sidebar component specifically utilizes ShadowCheckColors for its active/inactive states and brand labeling, ensuring navigation stays consistent with the user's selected primary color.
Sources: app/src/main/kotlin/com/shadowcheck/mobile/rebuilt/presentation/theme/Theme.kt:22-45, app/src/main/kotlin/com/shadowcheck/mobile/ui/Sidebar.kt:28-50
Conclusion
Theming and UI Customization in ShadowCheck Mobile is a centralized system that balances developer-defined defaults with deep user control. By decoupling visual properties into ThemeConfig and ElementStyle, the application allows for screen-specific adjustments while maintaining a cohesive global brand identity. The inclusion of import/export capabilities further extends this by allowing community-driven theme sharing.
Sources: app/src/main/kotlin/com/shadowcheck/mobile/rebuilt/ui/theme/ThemeConfig.kt