Feature/dark mode 66

lib/constants/colours.dart

@@ -33,7 +33,36 @@ import 'package:flutter/material.dart';
 // const background = Color(0xFFF5E0C8);
 
 const background = Color(0xFFF0D1AD);
+const backgroundDark = Color(0xFF1A1A1A);
 
 /// A lighter colour for the top and bottom (navbar) elements of the app.
-
 const border = Color(0xFFF5E0C8);
+const borderDark = Color(0xFF2C2C2C);
+
+/// A color for error messages or destructive actions.
+const error = Colors.redAccent;
+
+/// Theme management.
+class ThemeNotifier extends ChangeNotifier {
+  static final ThemeNotifier _instance = ThemeNotifier._internal();
+  factory ThemeNotifier() => _instance;
+  ThemeNotifier._internal();
+
+  ThemeMode _themeMode = ThemeMode.light;
+  ThemeMode get themeMode => _themeMode;
+
+  bool get isDarkMode => _themeMode == ThemeMode.dark;
+
+  void toggleTheme() {
+    _themeMode =
+        _themeMode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
+    notifyListeners();
+  }
+
+  set themeMode(ThemeMode mode) {
+    _themeMode = mode;
+    notifyListeners();
+  }
+}
+
+final themeNotifier = ThemeNotifier();

lib/home.dart

@@ -130,6 +130,12 @@ class HomeState extends State<Home> {
     }
   }
 
+  void _toggleTheme() async {
+    themeNotifier.toggleTheme();
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setBool('isDark', themeNotifier.isDarkMode);
+  }
+
   final List<Widget> _pages = <Widget>[
     const Timer(key: PageStorageKey('timer_page')),
     const Instructions(key: PageStorageKey('text_page')),
@@ -160,7 +166,7 @@ class HomeState extends State<Home> {
             ),
           ],
         ),
-        backgroundColor: border,
+        backgroundColor: Theme.of(context).colorScheme.surface,
         actions: [
           Center(
             child: GestureDetector(
@@ -191,6 +197,22 @@ class HomeState extends State<Home> {
             ),
           ),
           const SizedBox(width: 8),
+          ListenableBuilder(
+            listenable: themeNotifier,
+            builder: (context, child) {
+              return IconButton(
+                icon: Icon(
+                  themeNotifier.isDarkMode
+                      ? Icons.light_mode_outlined
+                      : Icons.dark_mode_outlined,
+                  size: 24,
+                ),
+                onPressed: _toggleTheme,
+                tooltip: 'Toggle light/dark mode',
+              );
+            },
+          ),
+          const SizedBox(width: 8),
           IconButton(
             icon: const Icon(Icons.info_outline, size: 24),
             onPressed: () => showAppAboutDialog(context),

lib/main.dart

@@ -28,62 +28,129 @@ library;
 import 'package:flutter/material.dart';
 
 import 'package:innerpod/home.dart';
+import 'package:innerpod/constants/colours.dart';
+import 'package:shared_preferences/shared_preferences.dart';
 
 //import 'package:innerpod/timer.dart';
 
-void main() {
+void main() async {
   WidgetsFlutterBinding.ensureInitialized();
 
-  // Call MaterialApp() here rather than within InnerPod so that
-  // MaterialLocalizations is found when firing off the showAboutDialog.
+  final prefs = await SharedPreferences.getInstance();
+  final isDark = prefs.getBool('isDark') ?? false;
+  themeNotifier.themeMode = isDark ? ThemeMode.dark : ThemeMode.light;
 
-  runApp(
-    MaterialApp(
-      title: 'Inner Pod',
-      theme: ThemeData(
-        useMaterial3: true,
-        colorScheme: ColorScheme.fromSeed(
-          seedColor: const Color(0xFFF0D1AD),
-          surface: const Color(0xFFFDF7F0), // Lighter cream surface
-          primary: const Color(0xFF8B5E3C), // Earthy brown/gold primary
-          onPrimary: Colors.white,
-          secondary: const Color(0xFFE6B276),
-          surfaceContainerHighest: const Color(0xFFF5E0C8),
-        ),
-        appBarTheme: const AppBarTheme(
-          centerTitle: true,
-          backgroundColor: Colors.transparent,
-          elevation: 0,
-          scrolledUnderElevation: 0,
-          titleTextStyle: TextStyle(
-            color: Color(0xFF5D4037),
-            fontSize: 22,
-            fontWeight: FontWeight.bold,
-          ),
-        ),
-        navigationBarTheme: NavigationBarThemeData(
-          backgroundColor: const Color(0xFFFDF7F0),
-          indicatorColor: const Color(0xFFE6B276).withValues(alpha: 0.5),
-          labelTextStyle: WidgetStateProperty.all(
-            const TextStyle(fontSize: 12, fontWeight: FontWeight.w500),
+  runApp(const InnerPodApp());
+}
+
+class InnerPodApp extends StatelessWidget {
+  const InnerPodApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ListenableBuilder(
+      listenable: themeNotifier,
+      builder: (context, child) {
+        return MaterialApp(
+          title: 'Inner Pod',
+          themeMode: themeNotifier.themeMode,
+          theme: ThemeData(
+            useMaterial3: true,
+            colorScheme: ColorScheme.fromSeed(
+              seedColor: const Color(0xFFF0D1AD),
+              surface: const Color(0xFFFDF7F0),
+              primary: const Color(0xFF8B5E3C),
+              onPrimary: Colors.white,
+              secondary: const Color(0xFFE6B276),
+              surfaceContainerHighest: const Color(0xFFF5E0C8),
+            ),
+            appBarTheme: const AppBarTheme(
+              centerTitle: true,
+              backgroundColor: Colors.transparent,
+              elevation: 0,
+              scrolledUnderElevation: 0,
+              titleTextStyle: TextStyle(
+                color: Color(0xFF5D4037),
+                fontSize: 22,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+            navigationBarTheme: NavigationBarThemeData(
+              backgroundColor: const Color(0xFFFDF7F0),
+              indicatorColor: const Color(0xFFE6B276).withValues(alpha: 0.5),
+              labelTextStyle: WidgetStateProperty.all(
+                const TextStyle(fontSize: 12, fontWeight: FontWeight.w500),
+              ),
+            ),
+            cardTheme: CardThemeData(
+              elevation: 2,
+              shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.circular(24),
+              ),
+              color: Colors.white.withValues(alpha: 0.9),
+            ),
+            elevatedButtonTheme: ElevatedButtonThemeData(
+              style: ElevatedButton.styleFrom(
+                elevation: 0,
+                shape: RoundedRectangleBorder(
+                  borderRadius: BorderRadius.circular(16),
+                ),
+                padding:
+                    const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
+              ),
+            ),
           ),
-        ),
-        cardTheme: CardThemeData(
-          elevation: 2,
-          shape:
-              RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)),
-          color: Colors.white.withValues(alpha: 0.9),
-        ),
-        elevatedButtonTheme: ElevatedButtonThemeData(
-          style: ElevatedButton.styleFrom(
-            elevation: 0,
-            shape:
-                RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
-            padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
+          darkTheme: ThemeData(
+            useMaterial3: true,
+            colorScheme: ColorScheme.fromSeed(
+              seedColor: const Color(0xFF8B5E3C),
+              brightness: Brightness.dark,
+              surface: const Color(0xFF1A1A1A),
+              primary: const Color(0xFFE6B276),
+              onPrimary: Colors.black,
+              secondary: const Color(0xFF8B5E3C),
+              surfaceContainerHighest: const Color(0xFF2C2C2C),
+            ),
+            appBarTheme: const AppBarTheme(
+              centerTitle: true,
+              backgroundColor: Colors.transparent,
+              elevation: 0,
+              scrolledUnderElevation: 0,
+              titleTextStyle: TextStyle(
+                color: Color(0xFFE6B276),
+                fontSize: 22,
+                fontWeight: FontWeight.bold,
+              ),
+              iconTheme: IconThemeData(color: Color(0xFFE6B276)),
+            ),
+            navigationBarTheme: NavigationBarThemeData(
+              backgroundColor: const Color(0xFF1A1A1A),
+              indicatorColor: const Color(0xFF8B5E3C).withValues(alpha: 0.5),
+              labelTextStyle: WidgetStateProperty.all(
+                const TextStyle(fontSize: 12, fontWeight: FontWeight.w500),
+              ),
+            ),
+            cardTheme: CardThemeData(
+              elevation: 2,
+              shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.circular(24),
+              ),
+              color: Colors.grey[900]?.withValues(alpha: 0.9),
+            ),
+            elevatedButtonTheme: ElevatedButtonThemeData(
+              style: ElevatedButton.styleFrom(
+                elevation: 0,
+                shape: RoundedRectangleBorder(
+                  borderRadius: BorderRadius.circular(16),
+                ),
+                padding:
+                    const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
+              ),
+            ),
           ),
-        ),
-      ),
-      home: const InnerPod(),
-    ),
-  );
+          home: const InnerPod(),
+        );
+      },
+    );
+  }
 }

lib/widgets/app_button.dart

@@ -69,7 +69,11 @@ class AppButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    bool isPrimary = backgroundColor != Colors.white;
+    bool isPrimary = backgroundColor != Colors.white &&
+        backgroundColor != Colors.black &&
+        backgroundColor != Colors.transparent;
+
+    final isDark = Theme.of(context).brightness == Brightness.dark;
 
     return SizedBox(
       height: 52,
@@ -83,18 +87,24 @@ class AppButton extends StatelessWidget {
             colors: isPrimary
                 ? [
                     backgroundColor,
-                    Color.lerp(backgroundColor, Colors.black, 0.05)!,
+                    Color.lerp(
+                      backgroundColor,
+                      isDark ? Colors.white : Colors.black,
+                      0.15,
+                    )!,
                   ]
                 : [
-                    Colors.white,
-                    const Color(0xFFFDF7F0),
+                    isDark ? const Color(0xFF2C2C2C) : Colors.white,
+                    isDark ? const Color(0xFF1A1A1A) : const Color(0xFFFDF7F0),
                   ],
           ),
           boxShadow: [
             BoxShadow(
               color: isPrimary
                   ? backgroundColor.withValues(alpha: 0.3)
-                  : Colors.grey.withValues(alpha: 0.1),
+                  : (isDark
+                      ? Colors.black26
+                      : Colors.grey.withValues(alpha: 0.1)),
               blurRadius: 12,
               offset: const Offset(0, 4),
             ),
@@ -114,10 +124,12 @@ class AppButton extends StatelessWidget {
                     fontSize: fontSize,
                     fontWeight: isPrimary ? FontWeight.bold : fontWeight,
                     color: isPrimary
-                        ? (Theme.of(context).brightness == Brightness.dark
-                            ? Colors.white
+                        ? (isDark
+                            ? Colors.white.withValues(alpha: 0.9)
                             : Colors.black87)
-                        : const Color(0xFF5D4037),
+                        : (isDark
+                            ? const Color(0xFFF5E0C8)
+                            : const Color(0xFF5D4037)),
                     letterSpacing: 0.5,
                   ),
                 ),

lib/widgets/app_circular_countdown_timer.dart

@@ -68,17 +68,22 @@ class AppCircularCountDownTimer extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final isDark = Theme.of(context).brightness == Brightness.dark;
+
     return CircularCountDownTimer(
       width: 250,
       height: 250,
       duration: duration,
       controller: controller,
       autoStart: false,
-      backgroundColor: background,
-      ringColor: _spin1,
+      backgroundColor: isDark ? backgroundDark : background,
+      ringColor: isDark ? const Color(0xFF2C2C2C) : _spin1,
       fillColor: _spin2,
       strokeWidth: 20.0,
-      textStyle: const TextStyle(color: _text, fontSize: 55),
+      textStyle: TextStyle(
+        color: isDark ? const Color(0xFFF5E0C8) : _text,
+        fontSize: 55,
+      ),
       onComplete: onComplete,
       isReverse: true,
       isReverseAnimation: true,