Make the theme switch toggle less ugly

lib/ente_theme_data.dart

@@ -121,6 +121,17 @@ extension CustomColorScheme on ColorScheme {
   Color get subTextColor => brightness == Brightness.light
       ? Color.fromRGBO(180, 180, 180, 1)
       : Color.fromRGBO(100, 100, 100, 1);
+
+  Color get themeSwitchIndicatorColor => brightness == Brightness.light
+      ? Colors.black.withOpacity(0.75)
+      : Colors.white;
+
+  Color get themeSwitchActiveIconColor =>
+      brightness == Brightness.light ? Colors.white : Colors.black;
+
+  Color get themeSwitchInactiveIconColor => brightness == Brightness.light
+      ? Colors.black.withOpacity(0.5)
+      : Colors.white.withOpacity(0.5);
 }
 
 OutlinedButtonThemeData buildOutlinedButtonThemeData({

lib/ui/settings/theme_switch_widget.dart

@@ -1,30 +1,52 @@
 import 'package:adaptive_theme/adaptive_theme.dart';
+import 'package:animated_toggle_switch/animated_toggle_switch.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/widgets.dart';
+import 'package:photos/ente_theme_data.dart';
 
 class ThemeSwitchWidget extends StatelessWidget {
   const ThemeSwitchWidget({Key key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return Switch.adaptive(
-      value: Theme.of(context).colorScheme.onSurface == Colors.black,
-      activeColor: Theme.of(context).colorScheme.onSurface,
-      activeTrackColor: Theme.of(context).colorScheme.onBackground,
-      inactiveTrackColor: Theme.of(context).colorScheme.onSurface,
-      inactiveThumbColor: Theme.of(context).colorScheme.primary,
-      hoverColor: Theme.of(context).colorScheme.onSurface,
-      onChanged: (bool value) {
-        if (value) {
+    var selectedTheme = 0;
+    if (Theme.of(context).brightness == Brightness.dark) {
+      selectedTheme = 1;
+    }
+    return AnimatedToggleSwitch<int>.rolling(
+      current: selectedTheme,
+      values: const [0, 1],
+      onChanged: (i) {
+        print("Changed to ${i}, selectedTheme is ${selectedTheme} ");
+        if (i == 0) {
           AdaptiveTheme.of(context).setLight();
         } else {
           AdaptiveTheme.of(context).setDark();
         }
       },
-      // activeThumbImage: new NetworkImage(
-      //     'https://cdn0.iconfinder.com/data/icons/multimedia-solid-30px/30/moon_dark_mode_night-512.png'),
-      // inactiveThumbImage: new NetworkImage(
-      //     'https://cdn0.iconfinder.com/data/icons/multimedia-solid-30px/30/moon_dark_mode_night-512.png'),
+      iconBuilder: (i, size, foreground) {
+        final color = selectedTheme == i
+            ? Theme.of(context).colorScheme.themeSwitchActiveIconColor
+            : Theme.of(context).colorScheme.themeSwitchInactiveIconColor;
+        if (i == 0) {
+          return Icon(
+            Icons.light_mode,
+            color: color,
+          );
+        } else {
+          return Icon(
+            Icons.dark_mode,
+            color: color,
+          );
+        }
+      },
+      height: 36,
+      indicatorSize: Size(36, 36),
+      indicatorColor: Theme.of(context).colorScheme.themeSwitchIndicatorColor,
+      borderColor: Theme.of(context)
+          .colorScheme
+          .themeSwitchInactiveIconColor
+          .withOpacity(0.1),
+      borderWidth: 1,
     );
   }
 }

pubspec.lock

@@ -24,6 +24,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.1.0"
+  animated_toggle_switch:
+    dependency: "direct main"
+    description:
+      name: animated_toggle_switch
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.5.2"
   archive:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -21,6 +21,7 @@ dependencies:
   alice:
     git: "https://github.com/jhomlala/alice.git"
   animate_do: ^2.0.0
+  animated_toggle_switch: ^0.5.2
   archive: ^3.1.2
   background_fetch: ^1.0.1
   bip39: ^1.0.6