diff --git a/lib/app_theme_business_object.dart b/lib/app_theme_business_object.dart
new file mode 100644
index 0000000..279462f
--- /dev/null
+++ b/lib/app_theme_business_object.dart
@@ -0,0 +1,68 @@
+import 'package:flutter/material.dart';
+
+class AppThemeColors {
+  const AppThemeColors({
+    required this.primarySeed,
+    required this.webViewBorder,
+    required this.webViewBackground,
+    required this.controlsGradientStart,
+    required this.controlsGradientEnd,
+    required this.controlsShadow,
+    required this.statusText,
+  });
+
+  final Color primarySeed;
+  final Color webViewBorder;
+  final Color webViewBackground;
+  final Color controlsGradientStart;
+  final Color controlsGradientEnd;
+  final Color controlsShadow;
+  final Color statusText;
+}
+
+class AppThemeBusinessObject {
+  static const AppThemeColors lightColors = AppThemeColors(
+    primarySeed: Color(0xFF607D8B),
+    webViewBorder: Color(0x42000000),
+    webViewBackground: Color(0xFFFFFFFF),
+    controlsGradientStart: Color(0xFFE1F5FE),
+    controlsGradientEnd: Color(0xFFB3E5FC),
+    controlsShadow: Color(0x22000000),
+    statusText: Color(0xDD000000),
+  );
+
+  static const AppThemeColors darkColors = AppThemeColors(
+    primarySeed: Color(0xFF37474F),
+    webViewBorder: Color(0x66FFFFFF),
+    webViewBackground: Color(0xFF0F1417),
+    controlsGradientStart: Color(0xFF1B2731),
+    controlsGradientEnd: Color(0xFF233744),
+    controlsShadow: Color(0x44000000),
+    statusText: Color(0xE6FFFFFF),
+  );
+
+  static bool isDarkMode(BuildContext context) {
+    return MediaQuery.platformBrightnessOf(context) == Brightness.dark;
+  }
+
+  static AppThemeColors colorsFor(BuildContext context) {
+    return isDarkMode(context) ? darkColors : lightColors;
+  }
+
+  static ThemeData lightTheme() {
+    return ThemeData(
+      colorScheme: ColorScheme.fromSeed(seedColor: lightColors.primarySeed),
+      useMaterial3: true,
+    );
+  }
+
+  static ThemeData darkTheme() {
+    return ThemeData(
+      colorScheme: ColorScheme.fromSeed(
+        seedColor: darkColors.primarySeed,
+        brightness: Brightness.dark,
+      ),
+      useMaterial3: true,
+    );
+  }
+}
diff --git a/lib/main.dart b/lib/main.dart
index 198524d..2f9ecd0 100644
--- a/lib/main.dart
+++ b/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),
                       ),
                     ],
                   ),