Add light/dart theme setting

lib/ui/widgets/settings_form.dart

 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:scrobbles/ui/widgets/theme_card.dart';
 import 'package:unicons/unicons.dart';
 
 import 'package:scrobbles/config/default_settings.dart';
@@ -99,6 +100,36 @@ class _SettingsFormState extends State<SettingsForm> {
       mainAxisSize: MainAxisSize.max,
       children: <Widget>[
         const SizedBox(height: 8),
+
+        // Light/dark theme
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: <Widget>[
+            const Text('settings_label_theme').tr(),
+            const Row(
+              mainAxisAlignment: MainAxisAlignment.end,
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                ThemeCard(
+                  mode: ThemeMode.system,
+                  icon: UniconsLine.cog,
+                ),
+                ThemeCard(
+                  mode: ThemeMode.light,
+                  icon: UniconsLine.sun,
+                ),
+                ThemeCard(
+                  mode: ThemeMode.dark,
+                  icon: UniconsLine.moon,
+                )
+              ],
+            ),
+          ],
+        ),
+
+        const SizedBox(height: 16),
+
         AppTitle2(text: tr('settings_title_global')),
 
         // Username

lib/ui/widgets/theme_card.dart

+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+import 'package:scrobbles/cubit/theme_cubit.dart';
+
+class ThemeCard extends StatelessWidget {
+  const ThemeCard({
+    super.key,
+    required this.mode,
+    required this.icon,
+  });
+
+  final IconData icon;
+  final ThemeMode mode;
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<ThemeCubit, ThemeModeState>(
+        builder: (BuildContext context, ThemeModeState state) {
+      return Card(
+        elevation: 2,
+        shadowColor: Theme.of(context).colorScheme.shadow,
+        color: state.themeMode == mode
+            ? Theme.of(context).colorScheme.primary
+            : Theme.of(context).colorScheme.surface,
+        shape: const RoundedRectangleBorder(
+          borderRadius: BorderRadius.all(Radius.circular(12)),
+        ),
+        margin: const EdgeInsets.all(5),
+        child: InkWell(
+          onTap: () => BlocProvider.of<ThemeCubit>(context).getTheme(
+            ThemeModeState(themeMode: mode),
+          ),
+          borderRadius: const BorderRadius.all(Radius.circular(12)),
+          child: Icon(
+            icon,
+            size: 32,
+            color:
+                state.themeMode != mode ? Theme.of(context).colorScheme.primary : Colors.white,
+          ),
+        ),
+      );
+    });
+  }
+}

pubspec.yaml

@@ -3,7 +3,7 @@ description: Display scrobbles data and charts
 
 publish_to: 'none'
 
-version: 0.0.56+56
+version: 0.0.57+57
 
 environment:
   sdk: '^3.0.0'