Skip to content

Commit 9ebbe4b

Browse files
jorre127jorre127
committed
#359: added dark mode
1 parent 976979d commit 9ebbe4b

11 files changed

+86
-56
lines changed

‎lib/screen/logs/logs_screen.dart

+3-2
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ class LogsScreenState extends State<LogsScreen> {
3838
final item = viewModel.availableDates[index];
3939
return TouchFeedBack(
4040
onTapped: () => viewModel.onLogTapped(item),
41-
color: theme.inverseBackground,
41+
color: theme.cardBackground,
4242
borderRadius: BorderRadius.circular(12),
4343
child: Padding(
4444
padding: const EdgeInsets.all(16),
@@ -50,8 +50,9 @@ class LogsScreenState extends State<LogsScreen> {
5050
style: theme.text.bodyBig,
5151
),
5252
),
53-
const SvgIcon(
53+
SvgIcon(
5454
svgAsset: ThemeAssets.chevronRightIcon,
55+
color: theme.icon,
5556
)
5657
],
5758
),

‎lib/styles/theme_colors.dart

+4-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ class ThemeColors {
77
static const primaryDark = Color(0xFF001223);
88
static const accent = Color(0xFF009AC7);
99
static const lightAccent = Color(0xFFECF5FE);
10-
static const accentDark = Color(0xFF0080A8);
10+
static const darkAccent = Color(0xFF005780);
11+
static const darkBackground = Color(0xFF1B4162);
1112
static const white = Color(0xFFFFFFFF);
1213
static const white20 = Color(0x33FFFFFF);
1314
static const white50 = Color(0x80FFFFFF);
@@ -18,7 +19,7 @@ class ThemeColors {
1819
static const lightGrey = Color(0xFFDDE1E4);
1920
static const backgroundGrey = Color(0xFFF9FAFC);
2021
static const disabledGrey = Color(0xFFE6E6E6);
21-
static const shadow = Color(0x1e000000); //black 12%
22+
static const shadow = Color.fromARGB(255, 0, 0, 0); //black 12%
2223
static const error = Color(0xFFE30000);
2324
static const success = Color(0xFF3E9103);
24-
}
25+
}

‎lib/styles/theme_data.dart

+36-11
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ enum FlutterTemplateThemeStyle {
8989
class FlutterTemplateTheme {
9090
final bool isDarkTheme;
9191
final Color text;
92+
final Color lightText;
9293
final Color fadedText;
9394
final Color inverseText;
9495
final Color errorText;
@@ -111,6 +112,8 @@ class FlutterTemplateTheme {
111112
final Color inverseButtonText;
112113
final Color textButtonText;
113114
final Color fillInformative;
115+
final Color cardBackground;
116+
final Color switchBackground;
114117

115118
final Color bottomNavbarBackground;
116119
final Color bottomNavbarItemActive;
@@ -129,29 +132,29 @@ class FlutterTemplateTheme {
129132

130133
static final _instanceDark = FlutterTemplateTheme._(
131134
isDarkTheme: true,
132-
text: ThemeColors.primary,
133-
fadedText: ThemeColors.fadedGrey,
135+
text: ThemeColors.white,
136+
fadedText: ThemeColors.lightGrey,
134137
inverseText: ThemeColors.black,
135138
errorText: ThemeColors.error,
136139
primary: ThemeColors.primary,
137140
accent: ThemeColors.accent,
138141
secondary: ThemeColors.white,
139-
background: ThemeColors.black,
142+
background: ThemeColors.primary,
140143
permissionScreenBackground: ThemeColors.primary,
141144
inverseBackground: ThemeColors.white,
142145
disabled: ThemeColors.disabledGrey,
143146
icon: ThemeColors.white,
144-
appBarAction: ThemeColors.primary,
147+
appBarAction: ThemeColors.white,
145148
inverseIcon: ThemeColors.black,
146149
progressIndicator: ThemeColors.primary,
147150
inverseProgressIndicator: ThemeColors.white,
148151
shadow: ThemeColors.shadow,
149152
buttonText: ThemeColors.primary,
150153
inverseButtonText: ThemeColors.white,
151154
buttonTextDisabled: ThemeColors.lightGrey,
152-
buttonColor: ThemeColors.white,
155+
buttonColor: ThemeColors.accent,
153156
textButtonText: ThemeColors.white,
154-
bottomNavbarBackground: ThemeColors.primary,
157+
bottomNavbarBackground: ThemeColors.darkBackground,
155158
bottomNavbarItemActive: ThemeColors.white,
156159
bottomNavbarItemInactive: ThemeColors.white50,
157160
inputFieldFill: ThemeColors.black,
@@ -161,7 +164,10 @@ class FlutterTemplateTheme {
161164
inputFieldBorderIdle: ThemeColors.white50,
162165
inputFieldCursor: ThemeColors.accent,
163166
debugTitleBackground: ThemeColors.white20,
164-
fillInformative: ThemeColors.lightAccent,
167+
fillInformative: ThemeColors.darkAccent,
168+
cardBackground: ThemeColors.darkBackground,
169+
lightText: ThemeColors.white,
170+
switchBackground: ThemeColors.fadedGrey,
165171
);
166172

167173
static final _instanceLight = FlutterTemplateTheme._(
@@ -199,6 +205,9 @@ class FlutterTemplateTheme {
199205
inputFieldCursor: ThemeColors.accent,
200206
debugTitleBackground: ThemeColors.lightGrey,
201207
fillInformative: ThemeColors.lightAccent,
208+
cardBackground: ThemeColors.white,
209+
lightText: ThemeColors.white,
210+
switchBackground: ThemeColors.disabledGrey,
202211
);
203212

204213
FlutterTemplateTheme._({
@@ -236,6 +245,9 @@ class FlutterTemplateTheme {
236245
required this.inputFieldCursor,
237246
required this.debugTitleBackground,
238247
required this.fillInformative,
248+
required this.cardBackground,
249+
required this.lightText,
250+
required this.switchBackground,
239251
});
240252

241253
static FlutterTemplateTheme of(BuildContext context, {bool forceDark = false, bool forceLight = false}) {
@@ -298,9 +310,22 @@ extension TextStyleExtension on TextStyle {
298310
extension ShadowsExtension on Color {
299311
List<BoxShadow> get bottomNavShadow => [
300312
BoxShadow(
301-
spreadRadius: 8,
302-
blurRadius: 16,
303-
color: this,
304-
)
313+
offset: const Offset(0, -29),
314+
spreadRadius: 0,
315+
blurRadius: 29,
316+
color: withOpacity(0.02),
317+
),
318+
BoxShadow(
319+
offset: const Offset(0, -65),
320+
spreadRadius: 0,
321+
blurRadius: 39,
322+
color: withOpacity(0.01),
323+
),
324+
BoxShadow(
325+
offset: const Offset(0, -115),
326+
spreadRadius: 0,
327+
blurRadius: 46,
328+
color: withOpacity(0.01),
329+
),
305330
];
306331
}

‎lib/widget/debug/debug_row_item.dart

+31-28
Original file line numberDiff line numberDiff line change
@@ -19,38 +19,41 @@ class DebugRowItem extends StatelessWidget {
1919

2020
@override
2121
Widget build(BuildContext context) {
22-
return DataProviderWidget(childBuilderTheme: (context, theme) {
23-
return TouchFeedBack(
24-
onTapped: onClick,
25-
child: Padding(
26-
padding: const EdgeInsets.all(16),
27-
child: Row(
28-
children: [
29-
Expanded(
30-
child: Column(
31-
crossAxisAlignment: CrossAxisAlignment.start,
32-
children: [
33-
Text(
34-
title,
35-
style: theme.text.bodyBig,
36-
),
37-
if (subTitle != null) ...[
38-
Container(height: 8),
22+
return DataProviderWidget(
23+
childBuilderTheme: (context, theme) {
24+
return TouchFeedBack(
25+
onTapped: onClick,
26+
child: Padding(
27+
padding: const EdgeInsets.all(16),
28+
child: Row(
29+
children: [
30+
Expanded(
31+
child: Column(
32+
crossAxisAlignment: CrossAxisAlignment.start,
33+
children: [
3934
Text(
40-
subTitle!,
41-
style: theme.text.bodySmall,
35+
title,
36+
style: theme.text.bodyBig,
4237
),
38+
if (subTitle != null) ...[
39+
Container(height: 8),
40+
Text(
41+
subTitle!,
42+
style: theme.text.bodySmall,
43+
),
44+
],
4345
],
44-
],
46+
),
4547
),
46-
),
47-
const SvgIcon(
48-
svgAsset: ThemeAssets.chevronRightIcon,
49-
),
50-
],
48+
SvgIcon(
49+
svgAsset: ThemeAssets.chevronRightIcon,
50+
color: theme.icon,
51+
),
52+
],
53+
),
5154
),
52-
),
53-
);
54-
});
55+
);
56+
},
57+
);
5558
}
5659
}

‎lib/widget/debug/debug_section.dart

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ class DebugSection extends StatelessWidget {
2828
const SizedBox(height: 8),
2929
Container(
3030
decoration: BoxDecoration(
31-
color: theme.inverseBackground,
31+
color: theme.cardBackground,
3232
borderRadius: BorderRadius.circular(12),
3333
),
3434
child: Column(

‎lib/widget/debug/selector_item.dart

+2-2
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@ class SelectorItem extends StatelessWidget {
2626
child: Container(
2727
decoration: BoxDecoration(
2828
borderRadius: BorderRadius.circular(12),
29-
color: selected ? theme.fillInformative : theme.inverseBackground,
29+
color: selected ? theme.fillInformative : theme.cardBackground,
3030
border: Border.all(
31-
color: selected ? theme.accent : theme.inverseBackground,
31+
color: selected ? theme.accent : theme.cardBackground,
3232
width: 1,
3333
),
3434
),

‎lib/widget/general/bottom_navigation/bottom_navigation.dart

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ class BottomNavigation extends StatelessWidget {
2121
padding: const EdgeInsets.symmetric(horizontal: 8),
2222
decoration: BoxDecoration(
2323
color: theme.bottomNavbarBackground,
24-
boxShadow: theme.fillInformative.withOpacity(0.6).bottomNavShadow,
24+
boxShadow: theme.shadow.bottomNavShadow,
2525
),
2626
child: ClipRect(
2727
child: Column(

‎lib/widget/general/styled/flutter_template_back_button.dart

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ class FlutterTemplateBackButton extends StatelessWidget {
2828
childBuilderTheme: (context, theme) => ActionItem(
2929
key: Keys.backButton,
3030
svgAsset: getCorrectIcon(context),
31-
color: isLight ? ThemeColors.white : theme.primary,
31+
color: isLight ? ThemeColors.white : theme.appBarAction,
3232
onClick: onClick,
3333
),
3434
);

‎lib/widget/general/styled/flutter_template_button.dart

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ class FlutterTemplateButton extends StatelessWidget {
3737
TextStyle _enabledTextStyle(FlutterTemplateTheme theme) {
3838
switch (buttonType) {
3939
case ButtonType.regular:
40-
return theme.inverseText.labelButtonSmall;
40+
return theme.lightText.labelButtonSmall;
4141
case ButtonType.text:
4242
return theme.accent.labelButtonSmall;
4343
}

‎lib/widget/general/styled/flutter_template_switch.dart

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ class FlutterTemplateSwitch extends StatelessWidget {
2121
height: 24,
2222
width: 42,
2323
decoration: BoxDecoration(
24-
color: value ? theme.accent : theme.disabled,
24+
color: value ? theme.accent : theme.switchBackground,
2525
borderRadius: ThemeDimens.circularBorderRadius,
2626
),
2727
child: AnimatedAlign(
@@ -32,7 +32,7 @@ class FlutterTemplateSwitch extends StatelessWidget {
3232
height: 20,
3333
width: 20,
3434
decoration: BoxDecoration(
35-
color: theme.background,
35+
color: theme.lightText,
3636
borderRadius: ThemeDimens.circularBorderRadius,
3737
),
3838
),

‎test/styles/theme_assets_test.dart

+4-4
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ import '../util/test_util.dart';
99
void main() {
1010
group('Android Asset icons', () {
1111
testWidgets('ThemeAsset list', (tester) async {
12-
const sut = IconAssetTesterAndroid(asset: ThemeAssets.todoIcon);
12+
const sut = IconAssetTesterAndroid(asset: ThemeAssets.todoIconActive);
1313

1414
await TestUtil.loadWidgetWithText(tester, sut);
1515
await TestUtil.takeScreenshot(tester, 'theme_asset_list_android');
1616
});
1717

1818
testWidgets('ThemeAsset settings', (tester) async {
19-
const sut = IconAssetTesterAndroid(asset: ThemeAssets.settingsIcon);
19+
const sut = IconAssetTesterAndroid(asset: ThemeAssets.todoIconActive);
2020

2121
await TestUtil.loadWidgetWithText(tester, sut);
2222
await TestUtil.takeScreenshot(tester, 'theme_asset_settings_android');
@@ -60,14 +60,14 @@ void main() {
6060

6161
group('IOS Asset icons', () {
6262
testWidgets('ThemeAsset list', (tester) async {
63-
const sut = IconAssetTesterIOS(asset: ThemeAssets.todoIcon);
63+
const sut = IconAssetTesterIOS(asset: ThemeAssets.todoIconActive);
6464

6565
await TestUtil.loadWidgetWithText(tester, sut);
6666
await TestUtil.takeScreenshot(tester, 'theme_asset_list_ios');
6767
});
6868

6969
testWidgets('ThemeAsset settings', (tester) async {
70-
const sut = IconAssetTesterIOS(asset: ThemeAssets.settingsIcon);
70+
const sut = IconAssetTesterIOS(asset: ThemeAssets.settingsIconActive);
7171

7272
await TestUtil.loadWidgetWithText(tester, sut);
7373
await TestUtil.takeScreenshot(tester, 'theme_asset_settings_ios');

0 commit comments

Comments
 (0)