🚀 ⚡ Added Dark and Light Theme Modes, Fixed #3!

omegaui · Mar 14, 2023 · 5fa32df · 5fa32df
1 parent 9713e63
commit 5fa32df
Show file tree

Hide file tree

Showing 15 changed files with 201 additions and 111 deletions.
diff --git a/lib/io/app_style.dart b/lib/io/app_style.dart
@@ -41,31 +41,29 @@ class DarkStyle extends AppStyle {
 
   @override
   Color getTextColor() {
-    return Colors.grey.shade300;
+    return Colors.white;
   }
 }
 
-get currentStyle => AppStyleManager._style;
+late AppStyle currentStyle;
 
-class AppStyleManager {
-  static late AppStyle _style;
-
-  static get currentStyle => _style;
+get currentStyleMode => currentStyle.getMode();
 
+class AppStyleManager {
   static void init() {
-    _style = AppManager.getStyleMode() == AppStyle.light
+    currentStyle = AppManager.getStyleMode() == AppStyle.light
         ? LightStyle()
         : DarkStyle();
   }
 
   static void switchStyle(String styleMode) {
-    if (_style.getMode() == styleMode) {
+    if (currentStyleMode == styleMode) {
       return;
     }
     if (styleMode == AppStyle.light) {
-      _style = LightStyle();
+      currentStyle = LightStyle();
     } else if (styleMode == AppStyle.dark) {
-      _style = DarkStyle();
+      currentStyle = DarkStyle();
     }
     reloadApp();
   }

diff --git a/lib/main.dart b/lib/main.dart
@@ -1,6 +1,7 @@
 import 'package:bitsdojo_window/bitsdojo_window.dart';
 import 'package:chat_desk/core/io/app_manager.dart';
 import 'package:chat_desk/io/app_style.dart';
+import 'package:chat_desk/ui/app_style_switcher.dart';
 import 'package:chat_desk/ui/screens/chat_room/chat_room.dart';
 import 'package:chat_desk/ui/screens/home_screen.dart';
 import 'package:chat_desk/ui/utils.dart';
@@ -26,15 +27,17 @@ void push(Widget? screen) {
 }
 
 void pop() {
-  contentPaneKey.currentState?.changeTo(const HomeScreen());
+  contentPaneKey.currentState?.changeTo(HomeScreen());
 }
 
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
 
   await AppManager.initAppData();
-
-  AppStyleManager.init(); /// work in progress
+
+  AppStyleManager.init();
+
+  /// work in progress
 
   runApp(App(key: appKey));
 
@@ -54,35 +57,43 @@ class App extends StatefulWidget {
 }
 
 class AppState extends State<App> {
-
-  void rebuild() => setState(() {
-
-  });
+  void rebuild() => setState(() {});
 
   @override
   Widget build(BuildContext context) {
     AppUtils.context = context;
     return MaterialApp(
       debugShowCheckedModeBanner: false,
       home: Scaffold(
-        backgroundColor: Colors.grey.shade900,
-        body: Stack(
-          children: [
-            Align(
-              alignment: Alignment.center,
-              child: Column(
-                children: [
-                  const TitleBar(),
-                  Expanded(
-                    child: ContentPane(
-                      key: contentPaneKey,
-                      content: const HomeScreen(),
+        backgroundColor: currentStyle.getBackground(),
+        body: AnimatedContainer(
+          duration: const Duration(milliseconds: 500),
+          color: currentStyle.getBackground(),
+          child: Stack(
+            children: [
+              Align(
+                alignment: Alignment.center,
+                child: Column(
+                  children: [
+                    const TitleBar(),
+                    Expanded(
+                      child: ContentPane(
+                        key: contentPaneKey,
+                        content: HomeScreen(),
+                      ),
                     ),
-                  ),
-                ],
+                  ],
+                ),
+              ),
+              const Align(
+                alignment: Alignment.topRight,
+                child: Padding(
+                  padding: EdgeInsets.only(top: 50.0, right: 20.0),
+                  child: AppStyleSwitcher(),
+                ),
               ),
-            ),
-          ],
+            ],
+          ),
         ),
       ),
     );

diff --git a/lib/ui/app_style_switcher.dart b/lib/ui/app_style_switcher.dart
@@ -0,0 +1,42 @@
+import 'package:chat_desk/core/io/app_manager.dart';
+import 'package:chat_desk/io/app_style.dart';
+import 'package:chat_desk/ui/utils.dart';
+import 'package:flutter/material.dart';
+
+class AppStyleSwitcher extends StatelessWidget {
+  const AppStyleSwitcher({super.key});
+
+  Icon _getIcon() {
+    if (currentStyleMode == AppStyle.dark) {
+      return const Icon(
+        Icons.nights_stay_rounded,
+        color: Colors.deepPurple,
+      );
+    }
+    return Icon(
+      Icons.sunny,
+      color: Colors.yellow.shade900,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AppUtils.buildTooltip(
+      text: "Requires App Restart",
+      child: IconButton(
+        onPressed: () async {
+          AppStyleManager.switchStyle(currentStyleMode == AppStyle.light
+              ? AppStyle.dark
+              : AppStyle.light);
+          await AppManager.preferences
+              .setString("style-mode", currentStyleMode);
+        },
+        icon: _getIcon(),
+        iconSize: 48,
+        splashRadius: 35,
+        highlightColor: Colors.grey.withOpacity(0.1),
+        splashColor: Colors.white.withOpacity(0.1),
+      ),
+    );
+  }
+}
diff --git a/lib/ui/screens/chat_room/chat_area.dart b/lib/ui/screens/chat_room/chat_area.dart
@@ -4,6 +4,7 @@ import 'dart:io';
 import 'package:chat_desk/core/client/client.dart';
 import 'package:chat_desk/core/io/logger.dart';
 import 'package:chat_desk/core/io/message.dart';
+import 'package:chat_desk/io/app_style.dart';
 import 'package:chat_desk/io/server_handler.dart';
 import 'package:chat_desk/ui/screens/chat_room/chat_room.dart';
 import 'package:chat_desk/ui/screens/chat_room/controls/chat.dart';
@@ -15,7 +16,7 @@ import 'package:flutter/material.dart';
 import 'package:lottie/lottie.dart';
 
 class ChatArea extends StatefulWidget {
-  const ChatArea({
+  ChatArea({
     super.key,
     required this.client,
   });
@@ -83,8 +84,10 @@ class ChatAreaState extends State<ChatArea> {
                 padding: const EdgeInsets.symmetric(horizontal: 8.0),
                 child: Text(
                   widget.client.id,
-                  style: const TextStyle(
-                      fontFamily: "Sen", fontSize: 20, color: Colors.white),
+                  style: TextStyle(
+                      fontFamily: "Sen",
+                      fontSize: 20,
+                      color: currentStyle.getTextColor()),
                 ),
               ),
               OnlineTracker(
@@ -130,7 +133,9 @@ class ChatAreaState extends State<ChatArea> {
                 child: ClipRRect(
                   borderRadius: BorderRadius.circular(20),
                   child: Container(
-                    color: Colors.grey.shade800.withOpacity(0.1),
+                    color: currentStyleMode == AppStyle.dark
+                        ? Colors.grey.shade800.withOpacity(0.1)
+                        : Colors.white.withOpacity(0.7),
                     width: MediaQuery.of(context).size.width - 460,
                     child: TextField(
                       controller: messageController,
@@ -160,10 +165,10 @@ class ChatAreaState extends State<ChatArea> {
                           messageController.text = "";
                         });
                       },
-                      style: const TextStyle(
+                      style: TextStyle(
                         fontFamily: "Sen",
                         fontSize: 15,
-                        color: Colors.white,
+                        color: currentStyle.getTextColor(),
                       ),
                       decoration: InputDecoration(
                         enabledBorder: OutlineInputBorder(
@@ -174,14 +179,16 @@ class ChatAreaState extends State<ChatArea> {
                         focusedBorder: OutlineInputBorder(
                           borderRadius: BorderRadius.circular(20),
                           borderSide: BorderSide(
-                              color: Colors.grey.shade800.withOpacity(0.7),
+                              color: currentStyleMode == AppStyle.dark
+                                  ? Colors.grey.shade800.withOpacity(0.7)
+                                  : Colors.grey.withOpacity(0.7),
                               width: 2),
                         ),
                         hintText: "Type your message here ...",
                         hintStyle: TextStyle(
                           fontFamily: "Itim",
                           fontSize: 18,
-                          color: Colors.white.withOpacity(0.7),
+                          color: currentStyle.getTextColor().withOpacity(0.7),
                         ),
                       ),
                     ),
@@ -280,7 +287,9 @@ class ChatAreaState extends State<ChatArea> {
       width: MediaQuery.of(context).size.width,
       height: MediaQuery.of(context).size.height - 132,
       decoration: BoxDecoration(
-        color: Colors.grey.shade800.withOpacity(0.1),
+        color: currentStyleMode == AppStyle.dark
+            ? Colors.grey.shade800.withOpacity(0.1)
+            : Colors.white.withOpacity(0.7),
         borderRadius: const BorderRadius.only(
             topRight: Radius.circular(20), bottomRight: Radius.circular(20)),
       ),
@@ -290,7 +299,7 @@ class ChatAreaState extends State<ChatArea> {
 }
 
 class OnlineTracker extends StatefulWidget {
-  const OnlineTracker({super.key, required this.client});
+  OnlineTracker({super.key, required this.client});
 
   final Client client;
 

diff --git a/lib/ui/screens/chat_room/chat_room.dart b/lib/ui/screens/chat_room/chat_room.dart
@@ -1,6 +1,7 @@
 import 'dart:convert';
 
 import 'package:chat_desk/core/io/logger.dart';
+import 'package:chat_desk/io/app_style.dart';
 import 'package:chat_desk/io/server_handler.dart';
 import 'package:chat_desk/main.dart';
 import 'package:chat_desk/ui/screens/chat_room/chat_area.dart';
@@ -57,7 +58,7 @@ class ChatRoomState extends State<ChatRoom> {
           style: TextStyle(
               fontFamily: "Itim",
               fontSize: 22,
-              color: Colors.white.withOpacity(0.7)),
+              color: currentStyle.getTextColor().withOpacity(0.7)),
         ),
       ],
     );
@@ -70,12 +71,12 @@ class ChatRoomState extends State<ChatRoom> {
         Padding(
           padding: const EdgeInsets.all(8.0),
           child: Row(
-            children: const [
+            children: [
               IconButton(
                 onPressed: pop,
                 icon: Icon(
                   Icons.arrow_back_rounded,
-                  color: Colors.white,
+                  color: currentStyle.getTextColor(),
                 ),
                 splashRadius: 15,
               ),
@@ -84,7 +85,7 @@ class ChatRoomState extends State<ChatRoom> {
                 style: TextStyle(
                   fontFamily: "Sen",
                   fontSize: 16,
-                  color: Colors.white,
+                  color: currentStyle.getTextColor(),
                 ),
               ),
             ],

diff --git a/lib/ui/screens/chat_room/controls/chat.dart b/lib/ui/screens/chat_room/controls/chat.dart
@@ -1,4 +1,5 @@
 import 'package:chat_desk/core/io/message.dart';
+import 'package:chat_desk/io/app_style.dart';
 import 'package:chat_desk/io/server_handler.dart';
 import 'package:chat_desk/ui/screens/chat_room/controls/chat_components/text_file_chat_components.dart';
 import 'package:chat_desk/ui/screens/chat_room/controls/chat_components/url_chat_component.dart';
@@ -30,7 +31,8 @@ class Chat extends StatelessWidget {
             style: TextStyle(
                 fontFamily: "Sen",
                 fontSize: 14,
-                color: Colors.grey.withOpacity(0.6)),
+                color: Colors.grey
+                    .withOpacity(currentStyleMode == AppStyle.dark ? 0.6 : 1)),
           ),
         if (message.type == 'text' && !isURL)
           Flexible(
@@ -41,10 +43,10 @@ class Chat extends StatelessWidget {
               ),
               child: Text(
                 message.message,
-                style: const TextStyle(
+                style: TextStyle(
                   fontFamily: "Sen",
                   fontSize: 16,
-                  color: Colors.white,
+                  color: currentStyle.getTextColor(),
                 ),
               ),
             ),
@@ -66,7 +68,8 @@ class Chat extends StatelessWidget {
             style: TextStyle(
                 fontFamily: "Sen",
                 fontSize: 14,
-                color: Colors.grey.withOpacity(0.6)),
+                color: Colors.grey
+                    .withOpacity(currentStyleMode == AppStyle.dark ? 0.6 : 1)),
           ),
       ],
     );

diff --git a/lib/ui/screens/chat_room/controls/chat_components/lottie_button.dart b/lib/ui/screens/chat_room/controls/chat_components/lottie_button.dart
@@ -1,3 +1,4 @@
+import 'package:chat_desk/io/app_style.dart';
 import 'package:flutter/material.dart';
 import 'package:lottie/lottie.dart';
 
@@ -28,7 +29,11 @@ class _LottieButtonState extends State<LottieButton> {
         child: AnimatedContainer(
           duration: const Duration(milliseconds: 250),
           decoration: BoxDecoration(
-            color: hover ? Colors.grey.withOpacity(0.2) : Colors.grey.shade800,
+            color: hover
+                ? Colors.grey.withOpacity(0.2)
+                : (currentStyleMode == AppStyle.dark
+                    ? Colors.grey.shade800
+                    : Colors.grey.withOpacity(0.2)),
             borderRadius: BorderRadius.circular(40),
           ),
           padding: EdgeInsets.all(hover ? 2 : 12),

diff --git a/lib/ui/screens/chat_room/controls/chat_components/url_chat_component.dart b/lib/ui/screens/chat_room/controls/chat_components/url_chat_component.dart
@@ -1,4 +1,5 @@
 import 'package:chat_desk/core/io/message.dart';
+import 'package:chat_desk/io/app_style.dart';
 import 'package:chat_desk/ui/utils.dart';
 import 'package:flutter/material.dart';
 import 'package:url_launcher/url_launcher_string.dart';
@@ -31,7 +32,10 @@ class _UrlChatComponentState extends State<UrlChatComponent> {
           child: AnimatedContainer(
             duration: const Duration(milliseconds: 250),
             decoration: BoxDecoration(
-              color: hover ? Colors.grey.withOpacity(0.1) : Colors.transparent,
+              color: hover
+                  ? Colors.grey.withOpacity(
+                      currentStyleMode == AppStyle.dark ? 0.1 : 0.2)
+                  : Colors.transparent,
               borderRadius: BorderRadius.circular(20),
             ),
             child: Padding(
@@ -41,10 +45,12 @@ class _UrlChatComponentState extends State<UrlChatComponent> {
                 text: "Click to Open URl",
                 child: Text(
                   widget.message.message,
-                  style: const TextStyle(
+                  style: TextStyle(
                       fontFamily: "Sen",
                       fontSize: 15,
-                      color: Colors.greenAccent),
+                      color: currentStyleMode == AppStyle.dark
+                          ? Colors.greenAccent
+                          : Colors.greenAccent.shade700),
                 ),
               ),
             ),