From d4b6ec80d1585d4963d73ceafcbaac1464551b1c Mon Sep 17 00:00:00 2001
From: vishnukvmd <vishnu@ente.io>
Date: Tue, 21 Jun 2022 01:33:27 +0530
Subject: [PATCH] Make the theme switch toggle less ugly

---
 lib/ente_theme_data.dart                 | 11 ++++++
 lib/ui/settings/theme_switch_widget.dart | 50 +++++++++++++++++-------
 pubspec.lock                             |  7 ++++
 pubspec.yaml                             |  1 +
 4 files changed, 55 insertions(+), 14 deletions(-)

diff --git a/lib/ente_theme_data.dart b/lib/ente_theme_data.dart
index 56ac134e8..745855f8f 100644
--- a/lib/ente_theme_data.dart
+++ b/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({
diff --git a/lib/ui/settings/theme_switch_widget.dart b/lib/ui/settings/theme_switch_widget.dart
index ed669bfe4..d5466f925 100644
--- a/lib/ui/settings/theme_switch_widget.dart
+++ b/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,
     );
   }
 }
diff --git a/pubspec.lock b/pubspec.lock
index e6d3f4fee..77d3c1b8a 100644
--- a/pubspec.lock
+++ b/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:
diff --git a/pubspec.yaml b/pubspec.yaml
index 6fd031853..a86cc5737 100644
--- a/pubspec.yaml
+++ b/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