feat: Fixes issue #263: ✨ Support for dark theme

Author: Shubham Jitiya

CHANGELOG.md

@@ -1,6 +1,7 @@
 # [1.4.1 - Unreleased]
 
 - Adds clear method to `EventController`.
+- Adds support for dark theme. [#263](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/issues/263)
 
 # [1.4.0 - 7 Jan 2025](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/tree/1.4.0)
 

README.md

@@ -355,6 +355,43 @@ WeekView(
 
 Above code will create `WeekView` with only five days, from monday to friday.
 
+## **Customise theme**
+* The default theme includes support for dark mode. 
+_
+_### Use default light & dark theme
+* CalendarTheme.light() & CalendarTheme.dark() provides the default colors for light & dark mode.
+* If no any theme is provided then default light theme is taken.
+```dart
+     child: MaterialApp(
+        theme: CalendarTheme.light,
+        darkTheme: CalendarTheme.dark,
+        themeMode: isDarkMode ? ThemeMode.dark : ThemeMode.light,
+        )
+```
+* Month-view, day-view & week-view each have separate theme to customise its component.
+* Refer [app_theme](example/lib/theme/app_theme.dart) of example to understand how to change colors of components.
+```dart
+// app_theme.dart
+  static final _monthViewTheme = MonthViewTheme.light().copyWith(
+    cellInMonth: Colors.redAccent,
+    cellNotInMonth: Colors.red,
+    cellText: Colors.amber,
+  );
+
+// Light theme: Use this in MaterialApp theme & dark theme.
+static final light = CalendarTheme.light.copyWith(
+   extensions: [
+      _monthViewTheme,
+   ],
+);
+
+// main.dart
+   MaterialApp(
+     theme: AppTheme.light,
+   )
+```
+[//]: # (TODO(Shubham): Add docs)
+
 ## Main Contributors
 
 <table>

doc/theme_guide.md

@@ -0,0 +1,66 @@
+## **Customise theme**
+The default theme supports dark mode. Refer this colors to override it.
+
+| Name                                          | Parameter              | Default color                       |
+|-----------------------------------------------|------------------------|-------------------------------------|
+| `MonthView` Border color                      | Color? borderColor     | colorScheme.surfaceContainerHigh    |
+| `WeekView` Background color of week view page | Color? backgroundColor | colorScheme.surfaceContainerLowest  |
+| `DayView` Default background color            | Color? backgroundColor | colorScheme.surfaceContainerLow     |
+| `FilledCell` Dates in month cell color        | Color? backgroundColor | colorScheme.surfaceContainerLowest  |
+| `FilledCell` Dates not in month cell color    | Color? backgroundColor | colorScheme.surfaceContainerLow     |
+| `WeekDayTile` Border color                    | Color? borderColor     | colorScheme.secondaryContainer      |
+| `WeekDayTile` Background color                | Color? backgroundColor | colorScheme.surfaceContainerHigh    |
+| `WeekDayTile` Text style color                | TextStyle? textStyle   | colorScheme.onSecondaryContainer    |
+
+To customise `MonthView`, `DayView` & `WeekView` page header use `HeaderStyle`.
+
+```dart
+  headerStyle: HeaderStyle(
+        leftIconConfig: IconDataConfig(color: Colors.red),
+        rightIconConfig: IconDataConfig(color: Colors.red),
+        decoration: BoxDecoration(
+          color: Theme.of(context).highlightColor,
+        ),
+      ),
+```
+
+### Day view
+* Default timeline text color is `colorScheme.onSurface`. 
+  * Use `markingStyle` in `DefaultTimeLineMark` to give text style.
+* Default `LiveTimeIndicatorSettings` color `colorScheme.primaryColorLight`.
+    * Use `liveTimeIndicatorSettings` to customise it.
+* Default hour, half hour & quarter color is `colorScheme.surfaceContainerHighest`.
+  * Use `hourIndicatorSettings` to customise it.
+
+Default hour indicator settings.
+```dart
+ HourIndicatorSettings(
+          height: widget.heightPerMinute,
+          // Color of horizontal and vertical lines
+          color: Theme.of(context).colorScheme.surfaceContainerHighest,
+          offset: 5,
+        );
+```
+
+### Week view
+* To customise week number & weekdays use `weekNumberBuilder` & `weekDayBuilder`.
+* Default week tile background color is `colorScheme.surfaceContainerHigh`.
+  * Use `weekTitleBackgroundColor` to change background color.
+* Default page background color is `colorScheme.surfaceContainerLowest`.
+  * Use `backgroundColor` to change background color.
+* Default timeline text color is `colorScheme.onSurface`. Use `markingStyle` in `DefaultTimeLineMark` to give text style.
+  * To customise timeline use `timeLineBuilder`.
+* To change Hour lines color use `HourIndicatorSettings`.
+* To style hours, half hours & quarter hours use `HourIndicatorSettings`. Default color used is `surfaceContainerHighest`
+
+```dart
+  hourIndicatorSettings: HourIndicatorSettings(
+        color: Colors.greenAccent,
+        lineStyle: LineStyle.dashed,
+      ),
+      showHalfHours: true,
+  halfHourIndicatorSettings: HourIndicatorSettings(
+        color: Colors.redAccent,
+        lineStyle: LineStyle.dashed,
+      ),
+```

example/lib/constants.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 
-import 'app_colors.dart';
+import 'theme/app_colors.dart';
 
 class AppConstants {
   AppConstants._();
@@ -11,7 +11,7 @@ class AppConstants {
     borderRadius: BorderRadius.circular(7),
     borderSide: BorderSide(
       width: 2,
-      color: AppColors.lightNavyBlue,
+      color: AppColors.outlineVariant,
     ),
   );
 

example/lib/extension.dart

@@ -1,8 +1,9 @@
+import 'package:example/theme/app_theme_extension.dart';
 import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';
 
-import 'app_colors.dart';
 import 'enumerations.dart';
+import 'theme/app_colors.dart';
 
 enum TimeStampFormat { parse_12, parse_24 }
 
@@ -128,3 +129,9 @@ extension StringExt on String {
 extension ViewNameExt on CalendarView {
   String get name => toString().split(".").last;
 }
+
+extension BuildContextExtension on BuildContext {
+  AppThemeExtension get appColors =>
+      Theme.of(this).extension<AppThemeExtension>() ??
+      AppThemeExtension.light();
+}

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.light,
+        darkTheme: AppTheme.dark,
+        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,23 @@ class CreateEventPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final themeColor = context.appColors;
+
     return Scaffold(
       appBar: AppBar(
         elevation: 0,
-        backgroundColor: Theme.of(context).scaffoldBackgroundColor,
         centerTitle: false,
         leading: IconButton(
           onPressed: context.pop,
           icon: Icon(
             Icons.arrow_back,
-            color: AppColors.black,
+            color: themeColor.onPrimary,
           ),
         ),
         title: Text(
           event == null ? "Create New Event" : "Update Event",
           style: TextStyle(
-            color: AppColors.black,
+            color: themeColor.onPrimary,
             fontSize: 20.0,
             fontWeight: FontWeight.bold,
           ),

example/lib/pages/day_view_page.dart

@@ -17,13 +17,22 @@ class DayViewPageDemo extends StatefulWidget {
 class _DayViewPageDemoState extends State<DayViewPageDemo> {
   @override
   Widget build(BuildContext context) {
+    final appColors = context.appColors;
+
     return ResponsiveWidget(
       webWidget: WebHomePage(
         selectedView: CalendarView.day,
       ),
       mobileWidget: Scaffold(
+        primary: false,
+        appBar: AppBar(
+          leading: const SizedBox.shrink(),
+        ),
         floatingActionButton: FloatingActionButton(
-          child: Icon(Icons.add),
+          child: Icon(
+            Icons.add,
+            color: appColors.onPrimary,
+          ),
           elevation: 8,
           onPressed: () => context.pushRoute(CreateEventPage()),
         ),

example/lib/pages/event_details_page.dart

@@ -1,4 +1,5 @@
 import 'package:calendar_view/calendar_view.dart';
+import 'package:example/theme/app_colors.dart';
 import 'package:example/widgets/delete_event_dialog.dart';
 import 'package:flutter/material.dart';
 
@@ -97,16 +98,30 @@ class DetailsPage extends StatelessWidget {
             children: [
               Expanded(
                 child: ElevatedButton(
+                  child: Text(
+                    'Delete Event',
+                    style: TextStyle(
+                      color: AppColors.black,
+                    ),
+                  ),
+                  style: ElevatedButton.styleFrom(
+                    backgroundColor: Colors.white70,
+                  ),
                   onPressed: () async {
                     await _handleDeleteEvent(context);
                     Navigator.of(context).pop();
                   },
-                  child: Text('Delete Event'),
                 ),
               ),
               SizedBox(width: 30),
               Expanded(
                 child: ElevatedButton(
+                  child: Text(
+                    'Edit Event',
+                    style: TextStyle(
+                      color: AppColors.black,
+                    ),
+                  ),
                   onPressed: () async {
                     final result = await Navigator.of(context).push(
                       MaterialPageRoute(
@@ -120,7 +135,9 @@ class DetailsPage extends StatelessWidget {
                       Navigator.of(context).pop();
                     }
                   },
-                  child: Text('Edit Event'),
+                  style: ElevatedButton.styleFrom(
+                    backgroundColor: Colors.white70,
+                  ),
                 ),
               ),
             ],

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),
     );
   }
 }