Add sepia theme

Author: Correct-Syntax

lib/common/enums.dart

@@ -9,3 +9,9 @@ enum ViewBy {
   chapter,
   section,
 }
+
+enum CurrentTheme {
+  light,
+  dark,
+  sepia,
+}

lib/common/themes.dart

@@ -260,6 +260,40 @@ class AppTheme {
     readerAddExtra: ReaderTextPalette.addExtraGreen,
     addCopulaPink: ReaderTextPalette.addCopulaPink,
   );
+
+  // Sepia theme
+  static final sepia = ThemeData.light().copyWith(
+    textSelectionTheme: const TextSelectionThemeData(
+      cursorColor: Colors.white,
+      selectionColor: Color(0xFF96BAD9),
+      selectionHandleColor: LightThemePalette.mediumBlue,
+    ),
+    extensions: [
+      _sepiaAppColors,
+    ],
+  );
+
+  static final _sepiaAppColors = AppColorsExtension(
+    primary: SepiaThemePalette.mediumDarkBrown,
+    secondary: SepiaThemePalette.mediumBrown,
+    primaryOnDark: SepiaThemePalette.mediumDarkBrown,
+    secondaryOnDark: SepiaThemePalette.mediumDarkBrown,
+    primaryIcon: SepiaThemePalette.mediumDarkBrown,
+    secondaryIcon: SepiaThemePalette.mediumBrown,
+    appbarIcon: SepiaThemePalette.mediumDarkBrown,
+    background: SepiaThemePalette.almostWhiteTan,
+    appbarBackground: SepiaThemePalette.lightTan,
+    popupBackground: SepiaThemePalette.lightTan,
+    readerSelectorBackground: SepiaThemePalette.almostWhiteTan,
+    switchBackground: SepiaThemePalette.mediumBrown,
+    sliderAccent: SepiaThemePalette.mediumBrown,
+    divider: SepiaThemePalette.lightTan,
+    readerText: SepiaThemePalette.mediumGray,
+    readerRedLetter: ReaderTextPalette.redLetterRed,
+    readerAddArticle: ReaderTextPalette.addArticleOrange,
+    readerAddExtra: ReaderTextPalette.addExtraGreen,
+    addCopulaPink: ReaderTextPalette.addCopulaPink,
+  );
 }
 
 extension AppThemeExtension on ThemeData {

lib/main.dart

@@ -23,9 +23,11 @@ class MainApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return ThemeBuilder(
-      defaultThemeMode: ThemeMode.light,
-      lightTheme: AppTheme.light,
-      darkTheme: AppTheme.dark,
+      themes: [
+        AppTheme.light,
+        AppTheme.dark,
+        AppTheme.sepia,
+      ],
       builder: (context, regularTheme, darkTheme, themeMode) => MaterialApp(
         title: 'Bibleside',
         debugShowCheckedModeBanner: false,

lib/ui/views/reader/widgets/reader_area_popup/reader_area_popup.dart

@@ -52,7 +52,7 @@ class ReaderAreaPopup extends StackedView<ReaderAreaPopupModel> {
                               child: Container(
                                 width: 14.0,
                                 height: 7.0,
-                                color: Colors.white,
+                                color: context.theme.appColors.popupBackground,
                               ),
                             ),
                           ],
@@ -149,7 +149,7 @@ class ReaderAreaPopup extends StackedView<ReaderAreaPopupModel> {
                             child: Container(
                               width: 14.0,
                               height: 7.0,
-                              color: Colors.white,
+                              color: context.theme.appColors.popupBackground,
                             ),
                           ),
                         ],

lib/ui/views/settings/settings_view.dart

@@ -3,6 +3,7 @@ import 'package:phosphor_flutter/phosphor_flutter.dart';
 import 'package:stacked/stacked.dart';
 import 'package:stacked_themes/stacked_themes.dart';
 
+import '../../../common/enums.dart';
 import '../../../common/themes.dart';
 import '../../common/ui_helpers.dart';
 import 'settings_viewmodel.dart';
@@ -243,22 +244,31 @@ class SettingsView extends StackedView<SettingsViewModel> {
                     child: Row(
                       children: [
                         SettingsThemeItem(
-                          isSelected: !viewModel.isDarkTheme,
-                          theme: ThemeMode.light,
+                          isSelected: getThemeManager(context).selectedThemeIndex == 0,
+                          theme: CurrentTheme.light,
                           onTap: () {
                             var themeManger = getThemeManager(context);
                             viewModel.setIsDarkTheme(false);
-                            themeManger.setThemeMode(ThemeMode.light);
+                            themeManger.selectThemeAtIndex(0);
                           },
                         ),
                         const SizedBox(width: 7.0),
                         SettingsThemeItem(
-                          isSelected: viewModel.isDarkTheme,
-                          theme: ThemeMode.dark,
+                          isSelected: getThemeManager(context).selectedThemeIndex == 1,
+                          theme: CurrentTheme.dark,
                           onTap: () {
                             var themeManger = getThemeManager(context);
                             viewModel.setIsDarkTheme(true);
-                            themeManger.setThemeMode(ThemeMode.dark);
+                            themeManger.selectThemeAtIndex(1);
+                          },
+                        ),
+                        const SizedBox(width: 7.0),
+                        SettingsThemeItem(
+                          isSelected: getThemeManager(context).selectedThemeIndex == 2,
+                          theme: CurrentTheme.sepia,
+                          onTap: () {
+                            var themeManger = getThemeManager(context);
+                            themeManger.selectThemeAtIndex(2);
                           },
                         ),
                       ],

lib/ui/views/settings/widgets/settings_theme_item/settings_theme_item.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:phosphor_flutter/phosphor_flutter.dart';
 import 'package:stacked/stacked.dart';
 
+import '../../../../../common/enums.dart';
 import '../../../../../common/themes.dart';
 import 'settings_theme_item_model.dart';
 
@@ -14,7 +15,7 @@ class SettingsThemeItem extends StackedView<SettingsThemeItemModel> {
   });
 
   final bool isSelected;
-  final ThemeMode theme;
+  final CurrentTheme theme;
   final Function() onTap;
 
   @override
@@ -31,16 +32,16 @@ class SettingsThemeItem extends StackedView<SettingsThemeItemModel> {
         height: 134.0,
         padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 7.0),
         decoration: BoxDecoration(
-          color: theme == ThemeMode.light ? Colors.white : const Color(0xFF1F2123),
+          color: viewModel.getBackgroundColor(theme),
           border: Border.all(color: context.theme.appColors.divider),
           borderRadius: BorderRadius.circular(7.0),
         ),
         child: Column(
           children: [
             Text(
-              theme == ThemeMode.light ? 'Light' : 'Dark',
+              theme == CurrentTheme.light ? 'Light' : theme == CurrentTheme.sepia ? 'Sepia' : 'Dark',
               style: TextStyle(
-                color: theme == ThemeMode.light ? const Color(0xFF515358) : Colors.white,
+                color: viewModel.getForegroundColor(theme),
                 fontSize: 15.0,
                 fontWeight: FontWeight.w500,
               ),
@@ -49,25 +50,25 @@ class SettingsThemeItem extends StackedView<SettingsThemeItemModel> {
             Divider(
               height: 1.0,
               endIndent: 15.0,
-              color: theme == ThemeMode.light ? const Color(0xFF515358) : Colors.white,
+              color: viewModel.getForegroundColor(theme),
             ),
             const SizedBox(height: 12.0),
             Divider(
               height: 1.0,
               endIndent: 35.0,
-              color: theme == ThemeMode.light ? const Color(0xFF515358) : Colors.white,
+              color: viewModel.getForegroundColor(theme),
             ),
             const SizedBox(height: 12.0),
             Divider(
               height: 1.0,
               endIndent: 23.0,
-              color: theme == ThemeMode.light ? const Color(0xFF515358) : Colors.white,
+              color: viewModel.getForegroundColor(theme),
             ),
             const SizedBox(height: 16.0),
             if (isSelected)
               PhosphorIcon(
                 PhosphorIcons.checkCircle(PhosphorIconsStyle.regular),
-                color: theme == ThemeMode.light ? const Color(0xFF515358) : Colors.white,
+                color: viewModel.getForegroundColor(theme),
                 size: 27.0,
               ),
           ],

lib/ui/views/settings/widgets/settings_theme_item/settings_theme_item_model.dart

@@ -1,3 +1,32 @@
+import 'package:flutter/material.dart';
 import 'package:stacked/stacked.dart';
+import '../../../../../common/enums.dart';
 
-class SettingsThemeItemModel extends BaseViewModel {}
+
+class SettingsThemeItemModel extends BaseViewModel {
+  Color getForegroundColor(CurrentTheme theme) {
+    switch (theme) {
+      case CurrentTheme.light:
+        return const Color(0xFF515358);
+      case CurrentTheme.dark:
+        return Colors.white;
+      case CurrentTheme.sepia:
+        return const Color(0xFF655F49);
+      default:
+        return const Color(0xFF515358);
+    }
+  }
+
+  Color getBackgroundColor(CurrentTheme theme) {
+    switch (theme) {
+      case CurrentTheme.light:
+        return Colors.white;
+      case CurrentTheme.dark:
+        return const Color(0xFF1F2123);
+      case CurrentTheme.sepia:
+        return const Color(0xFFC7C7AE);
+      default:
+        return Colors.white;
+    }
+  }
+}

lib/ui/widgets/common/side_navigation_drawer/side_navigation_drawer.dart

@@ -35,7 +35,7 @@ class SideNavigationDrawer extends StackedView<SideNavigationDrawerModel> {
                 padding: const EdgeInsets.only(left: 2.0, right: 32.0),
                 child: Image.asset(
                   'assets/images/logo.png',
-                  color: Colors.white,
+                  color: context.theme.appColors.appbarIcon,
                   height: 30.0,
                 ),
               ),