Skip to content

Commit b09f37e

Browse files
MayurSMahajanLucasXu0
MayurSMahajan
and
LucasXu0
authored
[FR] Create a new yellow theme for AppFlowy (#1539)
* feat: add dandelion color scheme * feat: add dandelion to colorsheme * feat: add setting for choosing theme * refactor: make theme selection ui consistent * refactor: remove duplicate themeTypeLabel * refactor: translate theme type setting * refactor: use an extension method for themename * refactor: change community theme name * refactor: add theme name in app theme * refactor: remove theme type from cubit * refactor: allow theme change with themename * test: getThemeNameForDisplaying method * chore: refactor the theme name to const string * refactor: remove theme translation logic * fix: add translation for theme label Co-authored-by: Lucas.Xu <[email protected]>
1 parent aa5f052 commit b09f37e

File tree

6 files changed

+167
-28
lines changed

6 files changed

+167
-28
lines changed

‎frontend/app_flowy/assets/translations/en.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -165,15 +165,16 @@
165165
"light": "Light Mode",
166166
"dark": "Dark Mode",
167167
"system": "Adapt to System"
168-
}
168+
},
169+
"theme":"Theme"
169170
},
170171
"files": {
171172
"defaultLocation": "Where your data is stored now",
172173
"doubleTapToCopy": "Double tap to copy the path",
173174
"restoreLocation": "Restore to AppFlowy default path",
174175
"customizeLocation": "Open another folder",
175176
"restartApp": "Please restart app for the changes to take effect.",
176-
"exportDatabase": "Export databae",
177+
"exportDatabase": "Export database",
177178
"selectFiles": "Select the files that need to be export",
178179
"createNewFolder": "Create a new folder",
179180
"createNewFolderDesc": "Tell us where you want to store your data ...",

‎frontend/app_flowy/lib/workspace/application/appearance.dart‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ class AppearanceSettingsCubit extends Cubit<AppearanceSettingsState> {
3535
void setTheme(String themeName) {
3636
_setting.theme = themeName;
3737
_saveAppearanceSettings();
38-
emit(state.copyWith(appTheme: AppTheme.fromName(themeName: themeName)));
38+
emit(state.copyWith(appTheme: AppTheme.fromName(themeName)));
3939
}
4040

4141
/// Update the theme mode in the user's settings and emit an updated state.
@@ -161,7 +161,7 @@ class AppearanceSettingsState with _$AppearanceSettingsState {
161161
LocaleSettingsPB localePB,
162162
) {
163163
return AppearanceSettingsState(
164-
appTheme: AppTheme.fromName(themeName: themeName),
164+
appTheme: AppTheme.fromName(themeName),
165165
font: font,
166166
monospaceFont: monospaceFont,
167167
themeMode: _themeModeFromPB(themeModePB),

‎frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import 'package:app_flowy/workspace/application/appearance.dart';
33
import 'package:appflowy_popover/appflowy_popover.dart';
44
import 'package:easy_localization/easy_localization.dart';
55
import 'package:flowy_infra/image.dart';
6+
import 'package:flowy_infra/theme.dart';
67
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
78
import 'package:flowy_infra_ui/style_widget/button.dart';
89
import 'package:flutter/material.dart';
@@ -20,6 +21,7 @@ class SettingsAppearanceView extends StatelessWidget {
2021
crossAxisAlignment: CrossAxisAlignment.start,
2122
children: [
2223
ThemeModeSetting(currentThemeMode: state.themeMode),
24+
ThemeSetting(currentTheme: state.appTheme.themeName),
2325
],
2426
);
2527
},
@@ -28,6 +30,65 @@ class SettingsAppearanceView extends StatelessWidget {
2830
}
2931
}
3032

33+
class ThemeSetting extends StatelessWidget {
34+
final String currentTheme;
35+
const ThemeSetting({
36+
super.key,
37+
required this.currentTheme,
38+
});
39+
40+
@override
41+
Widget build(BuildContext context) {
42+
return Row(
43+
children: [
44+
Expanded(
45+
child: FlowyText.medium(
46+
LocaleKeys.settings_appearance_theme.tr(),
47+
overflow: TextOverflow.ellipsis,
48+
),
49+
),
50+
AppFlowyPopover(
51+
direction: PopoverDirection.bottomWithRightAligned,
52+
child: FlowyTextButton(
53+
currentTheme,
54+
fillColor: Colors.transparent,
55+
hoverColor: Theme.of(context).colorScheme.secondary,
56+
onPressed: () {},
57+
),
58+
popupBuilder: (BuildContext context) {
59+
return IntrinsicWidth(
60+
child: Column(
61+
mainAxisSize: MainAxisSize.min,
62+
children: [
63+
_themeItemButton(context, BuiltInTheme.light),
64+
_themeItemButton(context, BuiltInTheme.dandelion),
65+
],
66+
),
67+
);
68+
},
69+
),
70+
],
71+
);
72+
}
73+
74+
Widget _themeItemButton(BuildContext context, String theme) {
75+
return SizedBox(
76+
height: 32,
77+
child: FlowyButton(
78+
text: FlowyText.medium(theme),
79+
rightIcon: currentTheme == theme
80+
? svgWidget("grid/checkmark")
81+
: const SizedBox(),
82+
onTap: () {
83+
if (currentTheme != theme) {
84+
context.read<AppearanceSettingsCubit>().setTheme(theme);
85+
}
86+
},
87+
),
88+
);
89+
}
90+
}
91+
3192
class ThemeModeSetting extends StatelessWidget {
3293
final ThemeMode currentThemeMode;
3394
const ThemeModeSetting({required this.currentThemeMode, super.key});

‎frontend/app_flowy/packages/flowy_infra/lib/colorscheme/colorscheme.dart‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,23 @@
11
import 'package:flutter/material.dart';
22

3+
import 'package:flowy_infra/theme.dart';
34
import 'default_colorscheme.dart';
5+
import 'dandelion.dart';
6+
7+
/// A map of all the built-in themes.
8+
///
9+
/// The key is the theme name, and the value is a list of two color schemes:
10+
/// the first is for light mode, and the second is for dark mode.
11+
const Map<String, List<FlowyColorScheme>> themeMap = {
12+
BuiltInTheme.light: [
13+
DefaultColorScheme.light(),
14+
DefaultColorScheme.dark(),
15+
],
16+
BuiltInTheme.dandelion: [
17+
DandelionColorScheme.light(),
18+
DandelionColorScheme.dark(),
19+
],
20+
};
421

522
@immutable
623
abstract class FlowyColorScheme {
@@ -69,15 +86,9 @@ abstract class FlowyColorScheme {
6986
factory FlowyColorScheme.builtIn(String themeName, Brightness brightness) {
7087
switch (brightness) {
7188
case Brightness.light:
72-
return const DefaultColorScheme.light();
89+
return themeMap[themeName]?[0] ?? const DefaultColorScheme.light();
7390
case Brightness.dark:
74-
return const DefaultColorScheme.dark();
91+
return themeMap[themeName]?[1] ?? const DefaultColorScheme.dark();
7592
}
7693
}
77-
78-
// factory FlowyColorScheme.fromJson(Map<String, dynamic> json, Brightness brightness) {
79-
// // load Json
80-
81-
// return FlowyColorScheme(brightness...);
82-
// }
8394
}

‎frontend/app_flowy/packages/flowy_infra/lib/colorscheme/dandelion.dart‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import 'package:flutter/material.dart';
2+
3+
import 'colorscheme.dart';
4+
5+
const _black = Color(0xff000000);
6+
const _white = Color(0xFFFFFFFF);
7+
8+
class DandelionColorScheme extends FlowyColorScheme {
9+
const DandelionColorScheme.light()
10+
: super(
11+
surface: Colors.white,
12+
hover: const Color(0xFFe0f8ff),
13+
selector: const Color(0xfff2fcff),
14+
red: const Color(0xfffb006d),
15+
yellow: const Color(0xffffd667),
16+
green: const Color(0xff66cf80),
17+
shader1: const Color(0xff333333),
18+
shader2: const Color(0xff4f4f4f),
19+
shader3: const Color(0xff828282),
20+
shader4: const Color(0xffbdbdbd),
21+
shader5: const Color(0xffe0e0e0),
22+
shader6: const Color(0xfff2f2f2),
23+
shader7: const Color(0xffffffff),
24+
bg1: const Color(0xFFFFD13E),
25+
bg2: const Color(0xffedeef2),
26+
bg3: const Color(0xffe2e4eb),
27+
bg4: const Color(0xff2c144b),
28+
tint1: const Color(0xffe8e0ff),
29+
tint2: const Color(0xffffe7fd),
30+
tint3: const Color(0xffffe7ee),
31+
tint4: const Color(0xffffefe3),
32+
tint5: const Color(0xfffff2cd),
33+
tint6: const Color(0xfff5ffdc),
34+
tint7: const Color(0xffddffd6),
35+
tint8: const Color(0xffdefff1),
36+
tint9: const Color(0xffe1fbff),
37+
main1: const Color(0xffe21f74),
38+
main2: const Color.fromARGB(255, 224, 25, 111),
39+
shadow: _black,
40+
);
41+
42+
const DandelionColorScheme.dark()
43+
: super(
44+
surface: const Color(0xff292929),
45+
hover: const Color(0xff1f1f1f),
46+
selector: const Color(0xff333333),
47+
red: const Color(0xfffb006d),
48+
yellow: const Color(0xffffd667),
49+
green: const Color(0xff66cf80),
50+
shader1: _white,
51+
shader2: const Color(0xffffffff),
52+
shader3: const Color(0xff828282),
53+
shader4: const Color(0xffbdbdbd),
54+
shader5: _white,
55+
shader6: _black,
56+
shader7: _black,
57+
bg1: const Color(0xFFD5A200),
58+
bg2: _black,
59+
bg3: const Color(0xff4f4f4f),
60+
bg4: const Color(0xff2c144b),
61+
tint1: const Color(0xffc3adff),
62+
tint2: const Color(0xffffadf9),
63+
tint3: const Color(0xffffadad),
64+
tint4: const Color(0xffffcfad),
65+
tint5: const Color(0xfffffead),
66+
tint6: const Color(0xffe6ffa3),
67+
tint7: const Color(0xffbcffad),
68+
tint8: const Color(0xffadffe2),
69+
tint9: const Color(0xffade4ff),
70+
main1: const Color(0xffe21f74),
71+
main2: const Color.fromARGB(255, 224, 25, 111),
72+
shadow: _black,
73+
);
74+
}

‎frontend/app_flowy/packages/flowy_infra/lib/theme.dart‎

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,27 @@
11
import 'package:flowy_infra/colorscheme/colorscheme.dart';
22
import 'package:flutter/material.dart';
33

4-
const List<String> builtInThemes = [
5-
'light',
6-
];
4+
class BuiltInTheme {
5+
static const String light = 'light';
6+
static const String dandelion = 'dandelion';
7+
}
78

89
class AppTheme {
910
// metadata member
11+
final String themeName;
1012
final FlowyColorScheme lightTheme;
1113
final FlowyColorScheme darkTheme;
1214
// static final Map<String, dynamic> _cachedJsonData = {};
1315

1416
const AppTheme({
17+
required this.themeName,
1518
required this.lightTheme,
1619
required this.darkTheme,
1720
});
1821

19-
factory AppTheme.fromName({required String themeName}) {
20-
// if (builtInThemes.contains(themeName)) {
21-
// return AppTheme(
22-
// lightTheme: FlowyColorScheme.builtIn(themeName, Brightness.light),
23-
// darkTheme: FlowyColorScheme.builtIn(themeName, Brightness.dark),
24-
// );
25-
// } else {
26-
// // load from Json
27-
// return AppTheme(
28-
// lightTheme: FlowyColorScheme.fromJson(_jsonData, Brightness.light),
29-
// darkTheme: FlowyColorScheme.fromJson(_jsonData, Brightness.dark),
30-
// );
31-
// }
22+
factory AppTheme.fromName(String themeName) {
3223
return AppTheme(
24+
themeName: themeName,
3325
lightTheme: FlowyColorScheme.builtIn(themeName, Brightness.light),
3426
darkTheme: FlowyColorScheme.builtIn(themeName, Brightness.dark),
3527
);

0 commit comments

Comments
 (0)