feat: Fixes issue #263: Support for dark theme

README.md

@@ -348,6 +348,36 @@ WeekView(
 
 Above code will create `WeekView` with only five days, from monday to friday.
 
+### Customise theme
+The default theme supports dark mode. Use `HeaderStyle` to customise it. 
+
+Override existing color 
+In MonthView
+Background color of cells
+inMonthCellColor - for filled cells having dates in current month.
+Default value is `colorScheme.surfaceContainerLowest`.
+notInMonthCellColor - If the date fall in other than current month.
+Default value is `colorScheme.surfaceContainerLow`
+borderColor - Default value is `colorScheme.surfaceContainerHigh`
+Removed icon color
+Default header icon color - `colorScheme.onPrimaryContainer`
+Customise header
+```dart
+  headerStyle: HeaderStyle(
+        leftIconConfig: IconDataConfig(color: Colors.red),
+        rightIconConfig: IconDataConfig(color: Colors.red),
+        decoration: BoxDecoration(
+          color: Theme.of(context).highlightColor,
+        ),
+      ),
+```
+
+
+### Week view
+Week-number text color - Default color `onSecondaryContainer`
+To customise week number & weekdays use `weekNumberBuilder` & `weekDayBuilder`.
+To give background color use `backgroundColor` Default background color is `colorScheme.surfaceContainerLow`
+
 ## Main Contributors
 
 <table>

example/lib/extension.dart

@@ -113,10 +113,12 @@ extension DateUtils on DateTime {
 }
 
 extension ColorExtension on Color {
-  Color get accentColor =>
-      (blue / 2 >= 255 / 2 || red / 2 >= 255 / 2 || green / 2 >= 255 / 2)
-          ? AppColors.black
-          : AppColors.white;
+  /// TODO(Shubham): Update this getter as it uses `computeLuminance()`
+  /// which is computationally expensive
+  Color get accentColor {
+    final brightness = ThemeData.estimateBrightnessForColor(this);
+    return brightness == Brightness.light ? AppColors.black : AppColors.white;
+  }
 }
 
 extension StringExt on String {

example/lib/main.dart

@@ -1,6 +1,7 @@
 import 'dart:ui';
 
 import 'package:calendar_view/calendar_view.dart';
+import 'package:example/theme/app_theme.dart';
 import 'package:flutter/material.dart';
 
 import 'pages/home_page.dart';
@@ -11,7 +12,14 @@ void main() {
   runApp(MyApp());
 }
 
-class MyApp extends StatelessWidget {
+class MyApp extends StatefulWidget {
+  @override
+  State<MyApp> createState() => _MyAppState();
+}
+
+class _MyAppState extends State<MyApp> {
+  bool isDarkMode = false;
+
   // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
@@ -20,15 +28,19 @@ class MyApp extends StatelessWidget {
       child: MaterialApp(
         title: 'Flutter Calendar Page Demo',
         debugShowCheckedModeBanner: false,
-        theme: ThemeData.light(),
+        theme: AppTheme.lightTheme,
+        darkTheme: AppTheme.darkTheme,
+        themeMode: isDarkMode ? ThemeMode.dark : ThemeMode.light,
         scrollBehavior: ScrollBehavior().copyWith(
           dragDevices: {
             PointerDeviceKind.trackpad,
             PointerDeviceKind.mouse,
             PointerDeviceKind.touch,
           },
         ),
-        home: HomePage(),
+        home: HomePage(
+          onChangeTheme: (isDark) => setState(() => isDarkMode = isDark),
+        ),
       ),
     );
   }

example/lib/pages/create_event_page.dart

@@ -1,7 +1,6 @@
 import 'package:calendar_view/calendar_view.dart';
 import 'package:flutter/material.dart';
 
-import '../app_colors.dart';
 import '../extension.dart';
 import '../widgets/add_event_form.dart';
 
@@ -12,22 +11,24 @@ class CreateEventPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final color = Theme.of(context).colorScheme;
+
     return Scaffold(
       appBar: AppBar(
         elevation: 0,
-        backgroundColor: Theme.of(context).scaffoldBackgroundColor,
+        backgroundColor: color.surfaceContainerHigh,
         centerTitle: false,
         leading: IconButton(
           onPressed: context.pop,
           icon: Icon(
             Icons.arrow_back,
-            color: AppColors.black,
+            color: color.onSurface,
           ),
         ),
         title: Text(
           event == null ? "Create New Event" : "Update Event",
           style: TextStyle(
-            color: AppColors.black,
+            color: color.onSurface,
             fontSize: 20.0,
             fontWeight: FontWeight.bold,
           ),

example/lib/pages/day_view_page.dart

@@ -22,6 +22,10 @@ class _DayViewPageDemoState extends State<DayViewPageDemo> {
         selectedView: CalendarView.day,
       ),
       mobileWidget: Scaffold(
+        primary: false,
+        appBar: AppBar(
+          backgroundColor: Theme.of(context).colorScheme.primaryContainer,
+        ),
         floatingActionButton: FloatingActionButton(
           child: Icon(Icons.add),
           elevation: 8,

example/lib/pages/event_details_page.dart

@@ -90,18 +90,23 @@ class DetailsPage extends StatelessWidget {
             children: [
               Expanded(
                 child: ElevatedButton(
+                  child: Text('Delete Event'),
+                  style: ElevatedButton.styleFrom(
+                    backgroundColor:
+                        Theme.of(context).colorScheme.surfaceContainer,
+                  ),
                   onPressed: () {
                     CalendarControllerProvider.of(context)
                         .controller
                         .remove(event);
                     Navigator.of(context).pop();
                   },
-                  child: Text('Delete Event'),
                 ),
               ),
               SizedBox(width: 30),
               Expanded(
                 child: ElevatedButton(
+                  child: Text('Edit Event'),
                   onPressed: () async {
                     final result = await Navigator.of(context).push(
                       MaterialPageRoute(
@@ -115,7 +120,10 @@ class DetailsPage extends StatelessWidget {
                       Navigator.of(context).pop();
                     }
                   },
-                  child: Text('Edit Event'),
+                  style: ElevatedButton.styleFrom(
+                    backgroundColor:
+                        Theme.of(context).colorScheme.surfaceContainer,
+                  ),
                 ),
               ),
             ],

example/lib/pages/home_page.dart

@@ -5,13 +5,20 @@ import 'mobile/mobile_home_page.dart';
 import 'web/web_home_page.dart';
 
 class HomePage extends StatelessWidget {
-  const HomePage({super.key});
+  const HomePage({
+    this.onChangeTheme,
+    super.key,
+  });
+
+  /// Return true for dark mode
+  /// false for light mode
+  final void Function(bool)? onChangeTheme;
 
   @override
   Widget build(BuildContext context) {
     return ResponsiveWidget(
-      mobileWidget: MobileHomePage(),
-      webWidget: WebHomePage(),
+      mobileWidget: MobileHomePage(onChangeTheme: onChangeTheme),
+      webWidget: WebHomePage(onThemeChange: onChangeTheme),
     );
   }
 }

example/lib/pages/mobile/mobile_home_page.dart

@@ -5,7 +5,21 @@ import '../day_view_page.dart';
 import '../month_view_page.dart';
 import '../week_view_page.dart';
 
-class MobileHomePage extends StatelessWidget {
+class MobileHomePage extends StatefulWidget {
+  MobileHomePage({
+    this.onChangeTheme,
+    super.key,
+  });
+
+  final void Function(bool)? onChangeTheme;
+
+  @override
+  State<MobileHomePage> createState() => _MobileHomePageState();
+}
+
+class _MobileHomePageState extends State<MobileHomePage> {
+  bool isDarkMode = false;
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -38,6 +52,15 @@ class MobileHomePage extends StatelessWidget {
           ],
         ),
       ),
+      floatingActionButton: FloatingActionButton(
+          child: Icon(Icons.dark_mode),
+          onPressed: () {
+            isDarkMode = !isDarkMode;
+            if (widget.onChangeTheme != null) {
+              widget.onChangeTheme!(isDarkMode);
+            }
+            setState(() {});
+          }),
     );
   }
 }

example/lib/pages/month_view_page.dart

@@ -9,8 +9,8 @@ import 'web/web_home_page.dart';
 
 class MonthViewPageDemo extends StatefulWidget {
   const MonthViewPageDemo({
-    super.key,
-  });
+    Key? key,
+  }) : super(key: key);
 
   @override
   _MonthViewPageDemoState createState() => _MonthViewPageDemoState();
@@ -24,6 +24,10 @@ class _MonthViewPageDemoState extends State<MonthViewPageDemo> {
         selectedView: CalendarView.month,
       ),
       mobileWidget: Scaffold(
+        primary: false,
+        appBar: AppBar(
+          backgroundColor: Theme.of(context).colorScheme.primaryContainer,
+        ),
         floatingActionButton: FloatingActionButton(
           child: Icon(Icons.add),
           elevation: 8,

example/lib/pages/web/web_home_page.dart

@@ -7,9 +7,11 @@ import '../../widgets/calendar_views.dart';
 class WebHomePage extends StatefulWidget {
   WebHomePage({
     this.selectedView = CalendarView.month,
+    this.onThemeChange,
   });
 
   final CalendarView selectedView;
+  final void Function(bool)? onThemeChange;
 
   @override
   _WebHomePageState createState() => _WebHomePageState();
@@ -35,6 +37,7 @@ class _WebHomePageState extends State<WebHomePage> {
             child: CalendarConfig(
               onViewChange: _setView,
               currentView: _selectedView,
+              onThemeChange: widget.onThemeChange,
             ),
           ),
           Expanded(

example/lib/pages/week_view_page.dart

@@ -22,6 +22,10 @@ class _WeekViewDemoState extends State<WeekViewDemo> {
         selectedView: CalendarView.week,
       ),
       mobileWidget: Scaffold(
+        primary: false,
+        appBar: AppBar(
+          backgroundColor: Theme.of(context).colorScheme.primaryContainer,
+        ),
         floatingActionButton: FloatingActionButton(
           child: Icon(Icons.add),
           elevation: 8,

example/lib/theme/app_theme.dart

@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+
+class AppTheme {
+  static final lightTheme = ThemeData(
+    appBarTheme: AppBarTheme(
+      backgroundColor: Colors.blue,
+    ),
+    colorScheme: ColorScheme.fromSeed(
+      seedColor: Colors.blue,
+      primary: Colors.blue,
+    ),
+  );
+
+  static final darkTheme = ThemeData(
+    appBarTheme: AppBarTheme(
+      backgroundColor: Colors.blueAccent,
+    ),
+    colorScheme: ColorScheme.fromSeed(
+      brightness: Brightness.dark,
+      seedColor: Colors.blueAccent,
+      primary: Colors.blue,
+    ),
+  );
+}