#359: added dark mode

lib/screen/logs/logs_screen.dart

@@ -38,7 +38,7 @@ class LogsScreenState extends State<LogsScreen> {
                   final item = viewModel.availableDates[index];
                   return TouchFeedBack(
                     onTapped: () => viewModel.onLogTapped(item),
-                    color: theme.inverseBackground,
+                    color: theme.cardBackground,
                     borderRadius: BorderRadius.circular(12),
                     child: Padding(
                       padding: const EdgeInsets.all(16),
@@ -50,8 +50,9 @@ class LogsScreenState extends State<LogsScreen> {
                               style: theme.text.bodyBig,
                             ),
                           ),
-                          const SvgIcon(
+                          SvgIcon(
                             svgAsset: ThemeAssets.chevronRightIcon,
+                            color: theme.icon,
                           )
                         ],
                       ),

lib/styles/theme_colors.dart

@@ -7,7 +7,8 @@ class ThemeColors {
   static const primaryDark = Color(0xFF001223);
   static const accent = Color(0xFF009AC7);
   static const lightAccent = Color(0xFFECF5FE);
-  static const accentDark = Color(0xFF0080A8);
+  static const darkAccent = Color(0xFF005780);
+  static const darkBackground = Color(0xFF1B4162);
   static const white = Color(0xFFFFFFFF);
   static const white20 = Color(0x33FFFFFF);
   static const white50 = Color(0x80FFFFFF);
@@ -18,7 +19,7 @@ class ThemeColors {
   static const lightGrey = Color(0xFFDDE1E4);
   static const backgroundGrey = Color(0xFFF9FAFC);
   static const disabledGrey = Color(0xFFE6E6E6);
-  static const shadow = Color(0x1e000000); //black 12%
+  static const shadow = Color.fromARGB(255, 0, 0, 0); //black 12%
   static const error = Color(0xFFE30000);
   static const success = Color(0xFF3E9103);
-}
+}

lib/styles/theme_data.dart

@@ -89,6 +89,7 @@ enum FlutterTemplateThemeStyle {
 class FlutterTemplateTheme {
   final bool isDarkTheme;
   final Color text;
+  final Color lightText;
   final Color fadedText;
   final Color inverseText;
   final Color errorText;
@@ -111,6 +112,8 @@ class FlutterTemplateTheme {
   final Color inverseButtonText;
   final Color textButtonText;
   final Color fillInformative;
+  final Color cardBackground;
+  final Color switchBackground;
 
   final Color bottomNavbarBackground;
   final Color bottomNavbarItemActive;
@@ -129,29 +132,29 @@ class FlutterTemplateTheme {
 
   static final _instanceDark = FlutterTemplateTheme._(
     isDarkTheme: true,
-    text: ThemeColors.primary,
-    fadedText: ThemeColors.fadedGrey,
+    text: ThemeColors.white,
+    fadedText: ThemeColors.lightGrey,
     inverseText: ThemeColors.black,
     errorText: ThemeColors.error,
     primary: ThemeColors.primary,
     accent: ThemeColors.accent,
     secondary: ThemeColors.white,
-    background: ThemeColors.black,
+    background: ThemeColors.primary,
     permissionScreenBackground: ThemeColors.primary,
     inverseBackground: ThemeColors.white,
     disabled: ThemeColors.disabledGrey,
     icon: ThemeColors.white,
-    appBarAction: ThemeColors.primary,
+    appBarAction: ThemeColors.white,
     inverseIcon: ThemeColors.black,
     progressIndicator: ThemeColors.primary,
     inverseProgressIndicator: ThemeColors.white,
     shadow: ThemeColors.shadow,
     buttonText: ThemeColors.primary,
     inverseButtonText: ThemeColors.white,
     buttonTextDisabled: ThemeColors.lightGrey,
-    buttonColor: ThemeColors.white,
+    buttonColor: ThemeColors.accent,
     textButtonText: ThemeColors.white,
-    bottomNavbarBackground: ThemeColors.primary,
+    bottomNavbarBackground: ThemeColors.darkBackground,
     bottomNavbarItemActive: ThemeColors.white,
     bottomNavbarItemInactive: ThemeColors.white50,
     inputFieldFill: ThemeColors.black,
@@ -161,7 +164,10 @@ class FlutterTemplateTheme {
     inputFieldBorderIdle: ThemeColors.white50,
     inputFieldCursor: ThemeColors.accent,
     debugTitleBackground: ThemeColors.white20,
-    fillInformative: ThemeColors.lightAccent,
+    fillInformative: ThemeColors.darkAccent,
+    cardBackground: ThemeColors.darkBackground,
+    lightText: ThemeColors.white,
+    switchBackground: ThemeColors.fadedGrey,
   );
 
   static final _instanceLight = FlutterTemplateTheme._(
@@ -199,6 +205,9 @@ class FlutterTemplateTheme {
     inputFieldCursor: ThemeColors.accent,
     debugTitleBackground: ThemeColors.lightGrey,
     fillInformative: ThemeColors.lightAccent,
+    cardBackground: ThemeColors.white,
+    lightText: ThemeColors.white,
+    switchBackground: ThemeColors.disabledGrey,
   );
 
   FlutterTemplateTheme._({
@@ -236,6 +245,9 @@ class FlutterTemplateTheme {
     required this.inputFieldCursor,
     required this.debugTitleBackground,
     required this.fillInformative,
+    required this.cardBackground,
+    required this.lightText,
+    required this.switchBackground,
   });
 
   static FlutterTemplateTheme of(BuildContext context, {bool forceDark = false, bool forceLight = false}) {
@@ -298,9 +310,22 @@ extension TextStyleExtension on TextStyle {
 extension ShadowsExtension on Color {
   List<BoxShadow> get bottomNavShadow => [
         BoxShadow(
-          spreadRadius: 8,
-          blurRadius: 16,
-          color: this,
-        )
+          offset: const Offset(0, -29),
+          spreadRadius: 0,
+          blurRadius: 29,
+          color: withOpacity(0.02),
+        ),
+        BoxShadow(
+          offset: const Offset(0, -65),
+          spreadRadius: 0,
+          blurRadius: 39,
+          color: withOpacity(0.01),
+        ),
+        BoxShadow(
+          offset: const Offset(0, -115),
+          spreadRadius: 0,
+          blurRadius: 46,
+          color: withOpacity(0.01),
+        ),
       ];
 }

lib/widget/debug/debug_row_item.dart

@@ -19,38 +19,41 @@ class DebugRowItem extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return DataProviderWidget(childBuilderTheme: (context, theme) {
-      return TouchFeedBack(
-        onTapped: onClick,
-        child: Padding(
-          padding: const EdgeInsets.all(16),
-          child: Row(
-            children: [
-              Expanded(
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text(
-                      title,
-                      style: theme.text.bodyBig,
-                    ),
-                    if (subTitle != null) ...[
-                      Container(height: 8),
+    return DataProviderWidget(
+      childBuilderTheme: (context, theme) {
+        return TouchFeedBack(
+          onTapped: onClick,
+          child: Padding(
+            padding: const EdgeInsets.all(16),
+            child: Row(
+              children: [
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
                       Text(
-                        subTitle!,
-                        style: theme.text.bodySmall,
+                        title,
+                        style: theme.text.bodyBig,
                       ),
+                      if (subTitle != null) ...[
+                        Container(height: 8),
+                        Text(
+                          subTitle!,
+                          style: theme.text.bodySmall,
+                        ),
+                      ],
                     ],
-                  ],
+                  ),
                 ),
-              ),
-              const SvgIcon(
-                svgAsset: ThemeAssets.chevronRightIcon,
-              ),
-            ],
+                SvgIcon(
+                  svgAsset: ThemeAssets.chevronRightIcon,
+                  color: theme.icon,
+                ),
+              ],
+            ),
           ),
-        ),
-      );
-    });
+        );
+      },
+    );
   }
 }

lib/widget/debug/debug_section.dart

@@ -28,7 +28,7 @@ class DebugSection extends StatelessWidget {
           const SizedBox(height: 8),
           Container(
             decoration: BoxDecoration(
-              color: theme.inverseBackground,
+              color: theme.cardBackground,
               borderRadius: BorderRadius.circular(12),
             ),
             child: Column(

lib/widget/debug/selector_item.dart

@@ -26,9 +26,9 @@ class SelectorItem extends StatelessWidget {
         child: Container(
           decoration: BoxDecoration(
             borderRadius: BorderRadius.circular(12),
-            color: selected ? theme.fillInformative : theme.inverseBackground,
+            color: selected ? theme.fillInformative : theme.cardBackground,
             border: Border.all(
-              color: selected ? theme.accent : theme.inverseBackground,
+              color: selected ? theme.accent : theme.cardBackground,
               width: 1,
             ),
           ),

lib/widget/general/bottom_navigation/bottom_navigation.dart

@@ -21,7 +21,7 @@ class BottomNavigation extends StatelessWidget {
         padding: const EdgeInsets.symmetric(horizontal: 8),
         decoration: BoxDecoration(
           color: theme.bottomNavbarBackground,
-          boxShadow: theme.fillInformative.withOpacity(0.6).bottomNavShadow,
+          boxShadow: theme.shadow.bottomNavShadow,
         ),
         child: ClipRect(
           child: Column(

lib/widget/general/styled/flutter_template_back_button.dart

@@ -28,7 +28,7 @@ class FlutterTemplateBackButton extends StatelessWidget {
       childBuilderTheme: (context, theme) => ActionItem(
         key: Keys.backButton,
         svgAsset: getCorrectIcon(context),
-        color: isLight ? ThemeColors.white : theme.primary,
+        color: isLight ? ThemeColors.white : theme.appBarAction,
         onClick: onClick,
       ),
     );

lib/widget/general/styled/flutter_template_button.dart

@@ -37,7 +37,7 @@ class FlutterTemplateButton extends StatelessWidget {
   TextStyle _enabledTextStyle(FlutterTemplateTheme theme) {
     switch (buttonType) {
       case ButtonType.regular:
-        return theme.inverseText.labelButtonSmall;
+        return theme.lightText.labelButtonSmall;
       case ButtonType.text:
         return theme.accent.labelButtonSmall;
     }

lib/widget/general/styled/flutter_template_switch.dart

@@ -21,7 +21,7 @@ class FlutterTemplateSwitch extends StatelessWidget {
           height: 24,
           width: 42,
           decoration: BoxDecoration(
-            color: value ? theme.accent : theme.disabled,
+            color: value ? theme.accent : theme.switchBackground,
             borderRadius: ThemeDimens.circularBorderRadius,
           ),
           child: AnimatedAlign(
@@ -32,7 +32,7 @@ class FlutterTemplateSwitch extends StatelessWidget {
               height: 20,
               width: 20,
               decoration: BoxDecoration(
-                color: theme.background,
+                color: theme.lightText,
                 borderRadius: ThemeDimens.circularBorderRadius,
               ),
             ),

test/styles/theme_assets_test.dart

@@ -9,14 +9,14 @@ import '../util/test_util.dart';
 void main() {
   group('Android Asset icons', () {
     testWidgets('ThemeAsset list', (tester) async {
-      const sut = IconAssetTesterAndroid(asset: ThemeAssets.todoIcon);
+      const sut = IconAssetTesterAndroid(asset: ThemeAssets.todoIconActive);
 
       await TestUtil.loadWidgetWithText(tester, sut);
       await TestUtil.takeScreenshot(tester, 'theme_asset_list_android');
     });
 
     testWidgets('ThemeAsset settings', (tester) async {
-      const sut = IconAssetTesterAndroid(asset: ThemeAssets.settingsIcon);
+      const sut = IconAssetTesterAndroid(asset: ThemeAssets.todoIconActive);
 
       await TestUtil.loadWidgetWithText(tester, sut);
       await TestUtil.takeScreenshot(tester, 'theme_asset_settings_android');
@@ -60,14 +60,14 @@ void main() {
 
   group('IOS Asset icons', () {
     testWidgets('ThemeAsset list', (tester) async {
-      const sut = IconAssetTesterIOS(asset: ThemeAssets.todoIcon);
+      const sut = IconAssetTesterIOS(asset: ThemeAssets.todoIconActive);
 
       await TestUtil.loadWidgetWithText(tester, sut);
       await TestUtil.takeScreenshot(tester, 'theme_asset_list_ios');
     });
 
     testWidgets('ThemeAsset settings', (tester) async {
-      const sut = IconAssetTesterIOS(asset: ThemeAssets.settingsIcon);
+      const sut = IconAssetTesterIOS(asset: ThemeAssets.settingsIconActive);
 
       await TestUtil.loadWidgetWithText(tester, sut);
       await TestUtil.takeScreenshot(tester, 'theme_asset_settings_ios');