adds theming class. supports light/dark mode styles

Co-authored-by: Copilot <copilot@github.com>

lib/main.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:just_audio_background/just_audio_background.dart';
 import 'package:webview_flutter/webview_flutter.dart';
 
+import 'app_theme_business_object.dart';
 import 'streaming_audio_business_object.dart';
 
 Future<void> main() async {
@@ -35,9 +36,9 @@ class _MyAppState extends State<MyApp> {
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Split Screen Player',
-      theme: ThemeData(
-        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blueGrey),
-      ),
+      theme: AppThemeBusinessObject.lightTheme(),
+      darkTheme: AppThemeBusinessObject.darkTheme(),
+      themeMode: ThemeMode.system,
       home: MainPage(audio: _audio),
       debugShowCheckedModeBanner: false,
     );
@@ -92,6 +93,8 @@ class _MainPageState extends State<MainPage> {
 
   @override
   Widget build(BuildContext context) {
+    final themeColors = AppThemeBusinessObject.colorsFor(context);
+
     return Scaffold(
       body: SafeArea(
         child: Column(
@@ -103,9 +106,9 @@ class _MainPageState extends State<MainPage> {
                 child: Container(
                   width: double.infinity,
                   decoration: BoxDecoration(
-                    border: Border.all(color: Colors.black26, width: 2),
+                    border: Border.all(color: themeColors.webViewBorder, width: 2),
                     borderRadius: BorderRadius.circular(8),
-                    color: Colors.white,
+                    color: themeColors.webViewBackground,
                   ),
                   child: ClipRRect(
                     borderRadius: BorderRadius.circular(6),
@@ -127,13 +130,13 @@ class _MainPageState extends State<MainPage> {
                       begin: Alignment.topLeft,
                       end: Alignment.bottomRight,
                       colors: [
-                        Colors.lightBlue.shade50,
-                        Colors.lightBlue.shade100,
+                        themeColors.controlsGradientStart,
+                        themeColors.controlsGradientEnd,
                       ],
                     ),
-                    boxShadow: const [
+                    boxShadow: [
                       BoxShadow(
-                        color: Color(0x22000000),
+                        color: themeColors.controlsShadow,
                         blurRadius: 14,
                         offset: Offset(0, 6),
                       ),
@@ -154,7 +157,7 @@ class _MainPageState extends State<MainPage> {
                       const SizedBox(width: 16),
                       Text(
                         _audio.isPlaying ? 'Playing' : 'Stopped',
-                        style: const TextStyle(color: Colors.black87),
+                        style: TextStyle(color: themeColors.statusText),
                       ),
                     ],
                   ),