Updated theme example to set color of theme

Signed-off-by: Hans Kokx <hans.d.kokx@gmail.com>
This commit is contained in:
2025-04-29 11:16:21 +02:00
parent 6764d8074a
commit 2a7829a2d0
+66 -8
View File
@@ -82,6 +82,16 @@ class HomeScreen extends StatefulWidget {
class _HomeScreenState extends State<HomeScreen> { class _HomeScreenState extends State<HomeScreen> {
late final StreamSubscription<String> _subscription; late final StreamSubscription<String> _subscription;
final List<String> latestLogs = []; final List<String> latestLogs = [];
final List<Color> themeColors = [
Colors.red,
Colors.orange,
Colors.yellow,
Colors.green,
Colors.blue,
Colors.purple,
Colors.deepPurple,
];
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final bool isSignedIn = Arcane.auth.isSignedIn.value; final bool isSignedIn = Arcane.auth.isSignedIn.value;
@@ -106,7 +116,8 @@ class _HomeScreenState extends State<HomeScreen> {
Column( Column(
children: [ children: [
Switch( Switch(
value: Arcane.theme.currentTheme == ThemeMode.dark, value:
Arcane.theme.currentThemeMode == ThemeMode.dark,
thumbIcon: thumbIcon:
WidgetStateProperty.resolveWith((states) { WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.selected)) { if (states.contains(WidgetState.selected)) {
@@ -116,14 +127,14 @@ class _HomeScreenState extends State<HomeScreen> {
}), }),
onChanged: (_) { onChanged: (_) {
final ThemeMode oldTheme = final ThemeMode oldTheme =
Arcane.theme.currentTheme; Arcane.theme.currentThemeMode;
Arcane.theme.switchTheme(); Arcane.theme.switchTheme();
Arcane.log( Arcane.log(
"Switching theme", "Switching theme",
metadata: { metadata: {
"followingSystemTheme": "followingSystemTheme":
"${Arcane.theme.isFollowingSystemTheme}", "${Arcane.theme.isFollowingSystemTheme}",
"newMode": Arcane.theme.currentTheme.name, "newMode": Arcane.theme.currentThemeMode.name,
"oldMode": oldTheme.name, "oldMode": oldTheme.name,
}, },
); );
@@ -136,7 +147,7 @@ class _HomeScreenState extends State<HomeScreen> {
value: Arcane.theme.isFollowingSystemTheme, value: Arcane.theme.isFollowingSystemTheme,
onChanged: (value) { onChanged: (value) {
final ThemeMode oldTheme = final ThemeMode oldTheme =
Arcane.theme.currentTheme; Arcane.theme.currentThemeMode;
if (value == true) { if (value == true) {
Arcane.theme.followSystemTheme(context); Arcane.theme.followSystemTheme(context);
Arcane.log( Arcane.log(
@@ -145,13 +156,13 @@ class _HomeScreenState extends State<HomeScreen> {
"followingSystemTheme": "followingSystemTheme":
"${Arcane.theme.isFollowingSystemTheme}", "${Arcane.theme.isFollowingSystemTheme}",
"newMode": "newMode":
Arcane.theme.currentTheme.name, Arcane.theme.currentThemeMode.name,
"oldMode": oldTheme.name, "oldMode": oldTheme.name,
}, },
); );
} else { } else {
Arcane.theme.switchTheme( Arcane.theme.switchTheme(
themeMode: Arcane.theme.systemTheme, themeMode: Arcane.theme.systemThemeMode,
); );
Arcane.log( Arcane.log(
"Switching theme", "Switching theme",
@@ -159,7 +170,7 @@ class _HomeScreenState extends State<HomeScreen> {
"followingSystemTheme": "followingSystemTheme":
"${Arcane.theme.isFollowingSystemTheme}", "${Arcane.theme.isFollowingSystemTheme}",
"newMode": "newMode":
Arcane.theme.currentTheme.name, Arcane.theme.currentThemeMode.name,
"oldMode": oldTheme.name, "oldMode": oldTheme.name,
}, },
); );
@@ -171,8 +182,55 @@ class _HomeScreenState extends State<HomeScreen> {
), ),
], ],
), ),
SizedBox(
height: 20,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
spacing: 8,
children: [
const Text("Color"),
Expanded(
child: ListView.separated(
itemCount: themeColors.length,
scrollDirection: Axis.horizontal,
separatorBuilder: (_, __) =>
const SizedBox(width: 4),
itemBuilder: (context, index) {
return InkWell(
onTap: () {
if (Arcane.theme.currentThemeMode ==
ThemeMode.dark) {
Arcane.theme.setDarkTheme(
ThemeData(
brightness: Brightness.dark,
colorSchemeSeed: themeColors[index],
),
);
} else if (Arcane
.theme.currentThemeMode ==
ThemeMode.light) {
Arcane.theme.setLightTheme(
ThemeData(
brightness: Brightness.light,
colorSchemeSeed: themeColors[index],
),
);
}
},
child: Container(
color: themeColors[index],
width: 20,
height: 20,
),
);
},
),
),
],
),
),
Text( Text(
"The current theme mode is ${context.themeMode.name} and\n" "The current theme mode is ${context.themeMode.name} and "
"is ${Arcane.theme.isFollowingSystemTheme ? "" : "not "}" "is ${Arcane.theme.isFollowingSystemTheme ? "" : "not "}"
"following the system theme.", "following the system theme.",
), ),