diff --git a/flutter/lib/common.dart b/flutter/lib/common.dart
index 8f8220db1..170ac597b 100644
--- a/flutter/lib/common.dart
+++ b/flutter/lib/common.dart
@@ -76,59 +76,22 @@ class IconFont {
 
 class ColorThemeExtension extends ThemeExtension<ColorThemeExtension> {
   const ColorThemeExtension({
-    required this.bg,
-    required this.grayBg,
-    required this.text,
-    required this.lightText,
-    required this.lighterText,
-    required this.placeholder,
     required this.border,
   });
 
-  final Color? bg;
-  final Color? grayBg;
-  final Color? text;
-  final Color? lightText;
-  final Color? lighterText;
-  final Color? placeholder;
   final Color? border;
 
   static const light = ColorThemeExtension(
-    bg: Color(0xFFFFFFFF),
-    grayBg: Color(0xFFEEEEEE),
-    text: Color(0xFF222222),
-    lightText: Color(0xFF666666),
-    lighterText: Color(0xFF888888),
-    placeholder: Color(0xFFAAAAAA),
     border: Color(0xFFCCCCCC),
   );
 
   static const dark = ColorThemeExtension(
-    bg: Color(0xFF252525),
-    grayBg: Color(0xFF141414),
-    text: Color(0xFFFFFFFF),
-    lightText: Color(0xFF999999),
-    lighterText: Color(0xFF777777),
-    placeholder: Color(0xFF555555),
     border: Color(0xFF555555),
   );
 
   @override
-  ThemeExtension<ColorThemeExtension> copyWith(
-      {Color? bg,
-      Color? grayBg,
-      Color? text,
-      Color? lightText,
-      Color? lighterText,
-      Color? placeholder,
-      Color? border}) {
+  ThemeExtension<ColorThemeExtension> copyWith({Color? border}) {
     return ColorThemeExtension(
-      bg: bg ?? this.bg,
-      grayBg: grayBg ?? this.grayBg,
-      text: text ?? this.text,
-      lightText: lightText ?? this.lightText,
-      lighterText: lighterText ?? this.lighterText,
-      placeholder: placeholder ?? this.placeholder,
       border: border ?? this.border,
     );
   }
@@ -140,12 +103,6 @@ class ColorThemeExtension extends ThemeExtension<ColorThemeExtension> {
       return this;
     }
     return ColorThemeExtension(
-      bg: Color.lerp(bg, other.bg, t),
-      grayBg: Color.lerp(grayBg, other.grayBg, t),
-      text: Color.lerp(text, other.text, t),
-      lightText: Color.lerp(lightText, other.lightText, t),
-      lighterText: Color.lerp(lighterText, other.lighterText, t),
-      placeholder: Color.lerp(placeholder, other.placeholder, t),
       border: Color.lerp(border, other.border, t),
     );
   }
@@ -170,6 +127,13 @@ class MyTheme {
 
   static ThemeData lightTheme = ThemeData(
     brightness: Brightness.light,
+    backgroundColor: Color(0xFFFFFFFF),
+    scaffoldBackgroundColor: Color(0xFFEEEEEE),
+    textTheme: const TextTheme(
+        titleLarge: TextStyle(fontSize: 19, color: Colors.black87),
+        bodySmall:
+            TextStyle(fontSize: 12, color: Colors.black54, height: 1.25)),
+    hintColor: Color(0xFFAAAAAA),
     primarySwatch: Colors.blue,
     visualDensity: VisualDensity.adaptivePlatformDensity,
     tabBarTheme: const TabBarTheme(
@@ -191,6 +155,12 @@ class MyTheme {
   );
   static ThemeData darkTheme = ThemeData(
     brightness: Brightness.dark,
+    backgroundColor: Color(0xFF252525),
+    scaffoldBackgroundColor: Color(0xFF141414),
+    textTheme: const TextTheme(
+        titleLarge: TextStyle(fontSize: 19),
+        bodySmall: TextStyle(fontSize: 12, height: 1.25)),
+    hintColor: Color(0xFF555555),
     primarySwatch: Colors.blue,
     visualDensity: VisualDensity.adaptivePlatformDensity,
     tabBarTheme: const TabBarTheme(
diff --git a/flutter/lib/common/widgets/address_book.dart b/flutter/lib/common/widgets/address_book.dart
index ab5f924dd..47a992bd3 100644
--- a/flutter/lib/common/widgets/address_book.dart
+++ b/flutter/lib/common/widgets/address_book.dart
@@ -115,7 +115,8 @@ class _AddressBookState extends State<AddressBook> {
                 Card(
                   shape: RoundedRectangleBorder(
                       borderRadius: BorderRadius.circular(20),
-                      side: const BorderSide(color: MyTheme.grayBg)),
+                      side: BorderSide(
+                          color: Theme.of(context).scaffoldBackgroundColor)),
                   child: Container(
                     width: 200,
                     height: double.infinity,
@@ -215,7 +216,8 @@ class _AddressBookState extends State<AddressBook> {
             child: Text(
               tagName,
               style: TextStyle(
-                  color: rxTags.contains(tagName) ? MyTheme.white : null),
+                  color:
+                      rxTags.contains(tagName) ? Colors.white : null), // TODO
             ),
           ),
         ),
diff --git a/flutter/lib/common/widgets/overlay.dart b/flutter/lib/common/widgets/overlay.dart
index 0e0a6ce2d..89dbe2ea6 100644
--- a/flutter/lib/common/widgets/overlay.dart
+++ b/flutter/lib/common/widgets/overlay.dart
@@ -26,7 +26,7 @@ class DraggableChatWindow extends StatelessWidget {
         position: position,
         width: width,
         height: height,
-        builder: (_, onPanUpdate) {
+        builder: (context, onPanUpdate) {
           return isIOS
               ? ChatPage(chatModel: chatModel)
               : Scaffold(
@@ -35,16 +35,16 @@ class DraggableChatWindow extends StatelessWidget {
                     onPanUpdate: onPanUpdate,
                     appBar: isDesktop
                         ? _buildDesktopAppBar()
-                        : _buildMobileAppBar(),
+                        : _buildMobileAppBar(context),
                   ),
                   body: ChatPage(chatModel: chatModel),
                 );
         });
   }
 
-  Widget _buildMobileAppBar() {
+  Widget _buildMobileAppBar(BuildContext context) {
     return Container(
-      color: MyTheme.accent50,
+      color: Theme.of(context).colorScheme.primary,
       height: 50,
       child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -169,17 +169,17 @@ class DraggableMobileActions extends StatelessWidget {
                       mainAxisAlignment: MainAxisAlignment.spaceAround,
                       children: [
                         IconButton(
-                            color: MyTheme.white,
+                            color: Colors.white,
                             onPressed: onBackPressed,
                             splashRadius: 20,
                             icon: const Icon(Icons.arrow_back)),
                         IconButton(
-                            color: MyTheme.white,
+                            color: Colors.white,
                             onPressed: onHomePressed,
                             splashRadius: 20,
                             icon: const Icon(Icons.home)),
                         IconButton(
-                            color: MyTheme.white,
+                            color: Colors.white,
                             onPressed: onRecentPressed,
                             splashRadius: 20,
                             icon: const Icon(Icons.more_horiz)),
@@ -190,7 +190,7 @@ class DraggableMobileActions extends StatelessWidget {
                           endIndent: 10,
                         ),
                         IconButton(
-                            color: MyTheme.white,
+                            color: Colors.white,
                             onPressed: onHidePressed,
                             splashRadius: 20,
                             icon: const Icon(Icons.keyboard_arrow_down)),
diff --git a/flutter/lib/common/widgets/peer_card.dart b/flutter/lib/common/widgets/peer_card.dart
index 2f6421880..169e10428 100644
--- a/flutter/lib/common/widgets/peer_card.dart
+++ b/flutter/lib/common/widgets/peer_card.dart
@@ -108,7 +108,9 @@ class _PeerCardState extends State<_PeerCard>
     return MouseRegion(
       onEnter: (evt) {
         deco.value = BoxDecoration(
-            border: Border.all(color: MyTheme.button, width: _borderWidth),
+            border: Border.all(
+                color: Theme.of(context).colorScheme.secondary,
+                width: _borderWidth),
             borderRadius: peerCardUiType.value == PeerUiType.grid
                 ? BorderRadius.circular(_cardRadis)
                 : null);
@@ -130,8 +132,9 @@ class _PeerCardState extends State<_PeerCard>
 
   Widget _buildPeerTile(
       BuildContext context, Peer peer, Rx<BoxDecoration?> deco) {
-    final greyStyle =
-        TextStyle(fontSize: 11, color: MyTheme.color(context).lighterText);
+    final greyStyle = TextStyle(
+        fontSize: 11,
+        color: Theme.of(context).textTheme.titleLarge?.color?.withOpacity(0.6));
     final alias = bind.mainGetPeerOptionSync(id: peer.id, key: 'alias');
     return Obx(
       () => Container(
@@ -148,7 +151,8 @@ class _PeerCardState extends State<_PeerCard>
             ),
             Expanded(
               child: Container(
-                decoration: BoxDecoration(color: MyTheme.color(context).bg),
+                decoration:
+                    BoxDecoration(color: Theme.of(context).backgroundColor),
                 child: Row(
                   mainAxisAlignment: MainAxisAlignment.spaceBetween,
                   children: [
@@ -250,7 +254,7 @@ class _PeerCardState extends State<_PeerCard>
                   ),
                 ),
                 Container(
-                  color: MyTheme.color(context).bg,
+                  color: Theme.of(context).backgroundColor,
                   child: Row(
                     mainAxisAlignment: MainAxisAlignment.spaceBetween,
                     children: [
@@ -294,13 +298,21 @@ class _PeerCardState extends State<_PeerCard>
           child: CircleAvatar(
               radius: 14,
               backgroundColor: _iconMoreHover.value
-                  ? MyTheme.color(context).grayBg!
-                  : MyTheme.color(context).bg!,
+                  ? Theme.of(context).scaffoldBackgroundColor
+                  : Theme.of(context).backgroundColor,
+              // ? Theme.of(context).scaffoldBackgroundColor!
+              // : Theme.of(context).backgroundColor!,
               child: Icon(Icons.more_vert,
                   size: 18,
                   color: _iconMoreHover.value
-                      ? MyTheme.color(context).text
-                      : MyTheme.color(context).lightText))));
+                      ? Theme.of(context).textTheme.titleLarge?.color
+                      : Theme.of(context)
+                          .textTheme
+                          .titleLarge
+                          ?.color
+                          ?.withOpacity(0.5)))));
+  // ? MyTheme.color(context).text
+  // : MyTheme.color(context).lightText))));
 
   /// Show the peer menu and handle user's choice.
   /// User might remove the peer or send a file to the peer.
@@ -865,7 +877,7 @@ class AddressBookPeerCard extends BasePeerCard {
             child: Text(
               tagName,
               style: TextStyle(
-                  color: rxTags.contains(tagName) ? MyTheme.white : null),
+                  color: rxTags.contains(tagName) ? Colors.white : null),
             ),
           ),
         ),
diff --git a/flutter/lib/common/widgets/peer_tab_page.dart b/flutter/lib/common/widgets/peer_tab_page.dart
index 3ed3dc11d..089e6acb5 100644
--- a/flutter/lib/common/widgets/peer_tab_page.dart
+++ b/flutter/lib/common/widgets/peer_tab_page.dart
@@ -101,6 +101,7 @@ class _PeerTabPageState extends State<PeerTabPage>
   }
 
   Widget _createTabBar(BuildContext context) {
+    final textColor = Theme.of(context).textTheme.titleLarge?.color;
     return ListView(
         scrollDirection: Axis.horizontal,
         shrinkWrap: true,
@@ -111,7 +112,7 @@ class _PeerTabPageState extends State<PeerTabPage>
                     padding: const EdgeInsets.symmetric(horizontal: 8),
                     decoration: BoxDecoration(
                       color: _tabIndex.value == t.key
-                          ? MyTheme.color(context).bg
+                          ? Theme.of(context).backgroundColor
                           : null,
                       borderRadius: BorderRadius.circular(isDesktop ? 2 : 6),
                     ),
@@ -123,9 +124,9 @@ class _PeerTabPageState extends State<PeerTabPage>
                         style: TextStyle(
                             height: 1,
                             fontSize: 14,
-                            color: _tabIndex.value == t.key
-                                ? MyTheme.color(context).text
-                                : MyTheme.color(context).lightText),
+                            color:
+                                _tabIndex.value == t.key ? textColor : textColor
+                                  ?..withOpacity(0.5)),
                       ),
                     )),
                 onTap: () async => await _handleTabSelection(t.key),
@@ -147,7 +148,8 @@ class _PeerTabPageState extends State<PeerTabPage>
   }
 
   Widget _createPeerViewTypeSwitch(BuildContext context) {
-    final activeDeco = BoxDecoration(color: MyTheme.color(context).bg);
+    final textColor = Theme.of(context).textTheme.titleLarge?.color;
+    final activeDeco = BoxDecoration(color: Theme.of(context).backgroundColor);
     return Row(
       children: [PeerUiType.grid, PeerUiType.list]
           .map((type) => Obx(
@@ -166,9 +168,9 @@ class _PeerTabPageState extends State<PeerTabPage>
                             ? Icons.grid_view_rounded
                             : Icons.list,
                         size: 18,
-                        color: peerCardUiType.value == type
-                            ? MyTheme.color(context).text
-                            : MyTheme.color(context).lightText,
+                        color:
+                            peerCardUiType.value == type ? textColor : textColor
+                              ?..withOpacity(0.5),
                       )),
                 ),
               ))
@@ -212,7 +214,7 @@ class _PeerSearchBarState extends State<PeerSearchBar> {
     return Container(
       width: 120,
       decoration: BoxDecoration(
-        color: MyTheme.color(context).bg,
+        color: Theme.of(context).backgroundColor,
         borderRadius: BorderRadius.circular(6),
       ),
       child: Obx(() => Row(
@@ -222,7 +224,7 @@ class _PeerSearchBarState extends State<PeerSearchBar> {
                   children: [
                     Icon(
                       Icons.search_rounded,
-                      color: MyTheme.color(context).placeholder,
+                      color: Theme.of(context).hintColor,
                     ).marginSymmetric(horizontal: 4),
                     Expanded(
                       child: TextField(
@@ -234,7 +236,11 @@ class _PeerSearchBarState extends State<PeerSearchBar> {
                         focusNode: focusNode,
                         textAlign: TextAlign.start,
                         maxLines: 1,
-                        cursorColor: MyTheme.color(context).lightText,
+                        cursorColor: Theme.of(context)
+                            .textTheme
+                            .titleLarge
+                            ?.color
+                            ?.withOpacity(0.5),
                         cursorHeight: 18,
                         cursorWidth: 1,
                         style: const TextStyle(fontSize: 14),
@@ -244,8 +250,7 @@ class _PeerSearchBarState extends State<PeerSearchBar> {
                           hintText:
                               focused.value ? null : translate("Search ID"),
                           hintStyle: TextStyle(
-                              fontSize: 14,
-                              color: MyTheme.color(context).placeholder),
+                              fontSize: 14, color: Theme.of(context).hintColor),
                           border: InputBorder.none,
                           isDense: true,
                         ),
diff --git a/flutter/lib/desktop/pages/connection_page.dart b/flutter/lib/desktop/pages/connection_page.dart
index 9ff7befd7..cdd4cc286 100644
--- a/flutter/lib/desktop/pages/connection_page.dart
+++ b/flutter/lib/desktop/pages/connection_page.dart
@@ -121,7 +121,7 @@ class _ConnectionPageState extends State<ConnectionPage> {
       width: 320 + 20 * 2,
       padding: const EdgeInsets.fromLTRB(20, 24, 20, 22),
       decoration: BoxDecoration(
-        color: MyTheme.color(context).bg,
+        color: Theme.of(context).backgroundColor,
         borderRadius: const BorderRadius.all(Radius.circular(13)),
       ),
       child: Ink(
@@ -131,7 +131,10 @@ class _ConnectionPageState extends State<ConnectionPage> {
               children: [
                 Text(
                   translate('Control Remote Desktop'),
-                  style: const TextStyle(fontSize: 19, height: 1),
+                  style: Theme.of(context)
+                      .textTheme
+                      .titleLarge
+                      ?.merge(TextStyle(height: 1)),
                 ),
               ],
             ).marginOnly(bottom: 15),
@@ -150,13 +153,12 @@ class _ConnectionPageState extends State<ConnectionPage> {
                         height: 1,
                       ),
                       maxLines: 1,
-                      cursorColor: MyTheme.color(context).text!,
+                      cursorColor:
+                          Theme.of(context).textTheme.titleLarge?.color,
                       decoration: InputDecoration(
                           hintText: inputFocused.value
                               ? null
                               : translate('Enter Remote ID'),
-                          hintStyle: TextStyle(
-                              color: MyTheme.color(context).placeholder),
                           border: OutlineInputBorder(
                               borderRadius: BorderRadius.zero,
                               borderSide: BorderSide(
@@ -219,8 +221,11 @@ class _ConnectionPageState extends State<ConnectionPage> {
                             style: TextStyle(
                                 fontSize: 12,
                                 color: ftPressed.value
-                                    ? MyTheme.color(context).bg
-                                    : MyTheme.color(context).text),
+                                    ? Theme.of(context).backgroundColor
+                                    : Theme.of(context)
+                                        .textTheme
+                                        .titleLarge
+                                        ?.color),
                           ).marginSymmetric(horizontal: 12),
                         ),
                       )),
@@ -260,7 +265,7 @@ class _ConnectionPageState extends State<ConnectionPage> {
                                 ),
                                 style: TextStyle(
                                     fontSize: 12,
-                                    color: MyTheme.color(context).bg),
+                                    color: Theme.of(context).backgroundColor),
                               ),
                             ).marginSymmetric(horizontal: 12),
                           )),
diff --git a/flutter/lib/desktop/pages/desktop_home_page.dart b/flutter/lib/desktop/pages/desktop_home_page.dart
index 833a914cd..6c4af5cf8 100644
--- a/flutter/lib/desktop/pages/desktop_home_page.dart
+++ b/flutter/lib/desktop/pages/desktop_home_page.dart
@@ -68,7 +68,7 @@ class _DesktopHomePageState extends State<DesktopHomePage>
       value: gFFI.serverModel,
       child: Container(
         width: 200,
-        color: MyTheme.color(context).bg,
+        color: Theme.of(context).backgroundColor,
         child: Column(
           children: [
             buildTip(context),
@@ -82,7 +82,7 @@ class _DesktopHomePageState extends State<DesktopHomePage>
 
   buildRightPane(BuildContext context) {
     return Container(
-      color: MyTheme.color(context).grayBg,
+      color: Theme.of(context).scaffoldBackgroundColor,
       child: ConnectionPage(),
     );
   }
@@ -116,7 +116,11 @@ class _DesktopHomePageState extends State<DesktopHomePage>
                           translate("ID"),
                           style: TextStyle(
                               fontSize: 14,
-                              color: MyTheme.color(context).lightText),
+                              color: Theme.of(context)
+                                  .textTheme
+                                  .titleLarge
+                                  ?.color
+                                  ?.withOpacity(0.5)),
                         ).marginOnly(top: 5),
                         buildPopupMenu(context)
                       ],
@@ -152,6 +156,7 @@ class _DesktopHomePageState extends State<DesktopHomePage>
   }
 
   Widget buildPopupMenu(BuildContext context) {
+    final textColor = Theme.of(context).textTheme.titleLarge?.color;
     RxBool hover = false.obs;
     return InkWell(
       onTap: () async {},
@@ -159,14 +164,12 @@ class _DesktopHomePageState extends State<DesktopHomePage>
         () => CircleAvatar(
           radius: 15,
           backgroundColor: hover.value
-              ? MyTheme.color(context).grayBg!
-              : MyTheme.color(context).bg!,
+              ? Theme.of(context).scaffoldBackgroundColor
+              : Theme.of(context).backgroundColor,
           child: Icon(
             Icons.more_vert_outlined,
             size: 20,
-            color: hover.value
-                ? MyTheme.color(context).text
-                : MyTheme.color(context).lightText,
+            color: hover.value ? textColor : textColor?.withOpacity(0.5),
           ),
         ),
       ),
@@ -178,6 +181,7 @@ class _DesktopHomePageState extends State<DesktopHomePage>
     final model = gFFI.serverModel;
     RxBool refreshHover = false.obs;
     RxBool editHover = false.obs;
+    final textColor = Theme.of(context).textTheme.titleLarge?.color;
     return Container(
       margin: EdgeInsets.only(left: 20.0, right: 16, top: 13, bottom: 13),
       child: Row(
@@ -198,7 +202,7 @@ class _DesktopHomePageState extends State<DesktopHomePage>
                   Text(
                     translate("Password"),
                     style: TextStyle(
-                        fontSize: 14, color: MyTheme.color(context).lightText),
+                        fontSize: 14, color: textColor?.withOpacity(0.5)),
                   ),
                   Row(
                     children: [
@@ -228,8 +232,8 @@ class _DesktopHomePageState extends State<DesktopHomePage>
                           () => Icon(
                             Icons.refresh,
                             color: refreshHover.value
-                                ? MyTheme.color(context).text
-                                : Color(0xFFDDDDDD),
+                                ? textColor
+                                : Color(0xFFDDDDDD), // TODO
                             size: 22,
                           ).marginOnly(right: 8, bottom: 2),
                         ),
@@ -241,8 +245,8 @@ class _DesktopHomePageState extends State<DesktopHomePage>
                           () => Icon(
                             Icons.edit,
                             color: editHover.value
-                                ? MyTheme.color(context).text
-                                : Color(0xFFDDDDDD),
+                                ? textColor
+                                : Color(0xFFDDDDDD), // TODO
                             size: 22,
                           ).marginOnly(right: 8, bottom: 2),
                         ),
@@ -270,7 +274,11 @@ class _DesktopHomePageState extends State<DesktopHomePage>
         children: [
           Text(
             translate("Your Desktop"),
-            style: TextStyle(fontWeight: FontWeight.normal, fontSize: 19),
+            style: Theme.of(context).textTheme.titleLarge,
+            // style: TextStyle(
+            //     // color: MyTheme.color(context).text,
+            //     fontWeight: FontWeight.normal,
+            //     fontSize: 19),
           ),
           SizedBox(
             height: 10.0,
@@ -278,10 +286,7 @@ class _DesktopHomePageState extends State<DesktopHomePage>
           Text(
             translate("desk_tip"),
             overflow: TextOverflow.clip,
-            style: TextStyle(
-                fontSize: 12,
-                color: MyTheme.color(context).lighterText,
-                height: 1.25),
+            style: Theme.of(context).textTheme.bodySmall,
           )
         ],
       ),
diff --git a/flutter/lib/desktop/pages/desktop_setting_page.dart b/flutter/lib/desktop/pages/desktop_setting_page.dart
index 0918fc59b..ec386a8e2 100644
--- a/flutter/lib/desktop/pages/desktop_setting_page.dart
+++ b/flutter/lib/desktop/pages/desktop_setting_page.dart
@@ -68,7 +68,7 @@ class _DesktopSettingPageState extends State<DesktopSettingPage>
   Widget build(BuildContext context) {
     super.build(context);
     return Scaffold(
-      backgroundColor: MyTheme.color(context).bg,
+      backgroundColor: Theme.of(context).backgroundColor,
       body: Row(
         children: <Widget>[
           SizedBox(
@@ -83,7 +83,7 @@ class _DesktopSettingPageState extends State<DesktopSettingPage>
           const VerticalDivider(thickness: 1, width: 1),
           Expanded(
             child: Container(
-              color: MyTheme.color(context).grayBg,
+              color: Theme.of(context).scaffoldBackgroundColor,
               child: DesktopScrollWrapper(
                   scrollController: controller,
                   child: PageView(
@@ -802,7 +802,9 @@ Widget _Card({required String title, required List<Widget> children}) {
 }
 
 Color? _disabledTextColor(BuildContext context, bool enabled) {
-  return enabled ? null : MyTheme.color(context).lighterText;
+  return enabled
+      ? null
+      : Theme.of(context).textTheme.titleLarge?.color?.withOpacity(0.6);
 }
 
 // ignore: non_constant_identifier_names
diff --git a/flutter/lib/desktop/pages/desktop_tab_page.dart b/flutter/lib/desktop/pages/desktop_tab_page.dart
index 2f24ddbde..cd79e127b 100644
--- a/flutter/lib/desktop/pages/desktop_tab_page.dart
+++ b/flutter/lib/desktop/pages/desktop_tab_page.dart
@@ -42,7 +42,7 @@ class _DesktopTabPageState extends State<DesktopTabPage> {
         OverlayEntry(builder: (context) {
           gFFI.dialogManager.setOverlayState(Overlay.of(context));
           return Scaffold(
-              backgroundColor: MyTheme.color(context).bg,
+              backgroundColor: Theme.of(context).backgroundColor,
               body: DesktopTab(
                 controller: tabController,
                 tail: ActionIcon(
diff --git a/flutter/lib/desktop/pages/file_manager_page.dart b/flutter/lib/desktop/pages/file_manager_page.dart
index ced61e8d9..f44088d6e 100644
--- a/flutter/lib/desktop/pages/file_manager_page.dart
+++ b/flutter/lib/desktop/pages/file_manager_page.dart
@@ -104,7 +104,7 @@ class _FileManagerPageState extends State<FileManagerPage>
                     return false;
                   },
                   child: Scaffold(
-                    backgroundColor: MyTheme.color(context).bg,
+                    backgroundColor: Theme.of(context).backgroundColor,
                     body: Row(
                       children: [
                         Flexible(flex: 3, child: body(isLocal: true)),
diff --git a/flutter/lib/desktop/pages/file_manager_tab_page.dart b/flutter/lib/desktop/pages/file_manager_tab_page.dart
index 9b8060bb7..24a36eddb 100644
--- a/flutter/lib/desktop/pages/file_manager_tab_page.dart
+++ b/flutter/lib/desktop/pages/file_manager_tab_page.dart
@@ -72,7 +72,7 @@ class _FileManagerTabPageState extends State<FileManagerTabPage> {
       decoration: BoxDecoration(
           border: Border.all(color: MyTheme.color(context).border!)),
       child: Scaffold(
-          backgroundColor: MyTheme.color(context).bg,
+          backgroundColor: Theme.of(context).backgroundColor,
           body: DesktopTab(
             controller: tabController,
             onWindowCloseButton: handleWindowCloseButton,
diff --git a/flutter/lib/desktop/pages/port_forward_page.dart b/flutter/lib/desktop/pages/port_forward_page.dart
index 28aa8d3cf..ccbf1805e 100644
--- a/flutter/lib/desktop/pages/port_forward_page.dart
+++ b/flutter/lib/desktop/pages/port_forward_page.dart
@@ -70,7 +70,7 @@ class _PortForwardPageState extends State<PortForwardPage>
   Widget build(BuildContext context) {
     super.build(context);
     return Scaffold(
-      backgroundColor: MyTheme.color(context).grayBg,
+      backgroundColor: Theme.of(context).scaffoldBackgroundColor,
       body: FutureBuilder(future: () async {
         if (!widget.isRDP) {
           refreshTunnelConfig();
@@ -80,7 +80,8 @@ class _PortForwardPageState extends State<PortForwardPage>
           return Container(
             decoration: BoxDecoration(
                 border: Border.all(
-                    width: 20, color: MyTheme.color(context).grayBg!)),
+                    width: 20,
+                    color: Theme.of(context).scaffoldBackgroundColor)),
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.stretch,
               children: [
@@ -88,7 +89,7 @@ class _PortForwardPageState extends State<PortForwardPage>
                 Flexible(
                   child: Container(
                     decoration: BoxDecoration(
-                        color: MyTheme.color(context).bg,
+                        color: Theme.of(context).backgroundColor,
                         border: Border.all(width: 1, color: MyTheme.border)),
                     child:
                         widget.isRDP ? buildRdp(context) : buildTunnel(context),
@@ -131,7 +132,7 @@ class _PortForwardPageState extends State<PortForwardPage>
 
     return Theme(
       data: Theme.of(context)
-          .copyWith(backgroundColor: MyTheme.color(context).bg),
+          .copyWith(backgroundColor: Theme.of(context).backgroundColor),
       child: Obx(() => ListView.builder(
           controller: ScrollController(),
           itemCount: pfs.length + 2,
@@ -139,7 +140,7 @@ class _PortForwardPageState extends State<PortForwardPage>
             if (index == 0) {
               return Container(
                 height: 25,
-                color: MyTheme.color(context).grayBg,
+                color: Theme.of(context).scaffoldBackgroundColor,
                 child: Row(children: [
                   text('Local Port'),
                   const SizedBox(width: _kColumn1Width),
@@ -166,7 +167,7 @@ class _PortForwardPageState extends State<PortForwardPage>
 
     return Container(
       height: _kRowHeight,
-      decoration: BoxDecoration(color: MyTheme.color(context).bg),
+      decoration: BoxDecoration(color: Theme.of(context).backgroundColor),
       child: Row(children: [
         buildTunnelInputCell(context,
             controller: localPortController,
@@ -216,11 +217,12 @@ class _PortForwardPageState extends State<PortForwardPage>
       {required TextEditingController controller,
       List<TextInputFormatter>? inputFormatters,
       String? hint}) {
+    final textColor = Theme.of(context).textTheme.titleLarge?.color;
     return Expanded(
       child: TextField(
         controller: controller,
         inputFormatters: inputFormatters,
-        cursorColor: MyTheme.color(context).text,
+        cursorColor: textColor,
         cursorHeight: 20,
         cursorWidth: 1,
         decoration: InputDecoration(
@@ -228,12 +230,12 @@ class _PortForwardPageState extends State<PortForwardPage>
                 borderSide: BorderSide(color: MyTheme.color(context).border!)),
             focusedBorder: OutlineInputBorder(
                 borderSide: BorderSide(color: MyTheme.color(context).border!)),
-            fillColor: MyTheme.color(context).bg,
+            fillColor: Theme.of(context).backgroundColor,
             contentPadding: const EdgeInsets.all(10),
             hintText: hint,
-            hintStyle: TextStyle(
-                color: MyTheme.color(context).placeholder, fontSize: 16)),
-        style: TextStyle(color: MyTheme.color(context).text, fontSize: 16),
+            hintStyle:
+                TextStyle(color: Theme.of(context).hintColor, fontSize: 16)),
+        style: TextStyle(color: textColor, fontSize: 16),
       ).marginAll(10),
     );
   }
@@ -250,7 +252,7 @@ class _PortForwardPageState extends State<PortForwardPage>
               ? MyTheme.currentThemeMode() == ThemeMode.dark
                   ? const Color(0xFF202020)
                   : const Color(0xFFF4F5F6)
-              : MyTheme.color(context).bg),
+              : Theme.of(context).backgroundColor),
       child: Row(children: [
         text(pf.localPort.toString()),
         const SizedBox(width: _kColumn1Width),
@@ -292,7 +294,7 @@ class _PortForwardPageState extends State<PortForwardPage>
         ).marginOnly(left: _kTextLeftMargin));
     return Theme(
       data: Theme.of(context)
-          .copyWith(backgroundColor: MyTheme.color(context).bg),
+          .copyWith(backgroundColor: Theme.of(context).backgroundColor),
       child: ListView.builder(
           controller: ScrollController(),
           itemCount: 2,
@@ -300,7 +302,7 @@ class _PortForwardPageState extends State<PortForwardPage>
             if (index == 0) {
               return Container(
                 height: 25,
-                color: MyTheme.color(context).grayBg,
+                color: Theme.of(context).scaffoldBackgroundColor,
                 child: Row(children: [
                   text1('Local Port'),
                   const SizedBox(width: _kColumn1Width),
@@ -311,7 +313,8 @@ class _PortForwardPageState extends State<PortForwardPage>
             } else {
               return Container(
                 height: _kRowHeight,
-                decoration: BoxDecoration(color: MyTheme.color(context).bg),
+                decoration:
+                    BoxDecoration(color: Theme.of(context).backgroundColor),
                 child: Row(children: [
                   Expanded(
                     child: Align(
diff --git a/flutter/lib/desktop/pages/port_forward_tab_page.dart b/flutter/lib/desktop/pages/port_forward_tab_page.dart
index d4f17aaef..6c6865718 100644
--- a/flutter/lib/desktop/pages/port_forward_tab_page.dart
+++ b/flutter/lib/desktop/pages/port_forward_tab_page.dart
@@ -80,7 +80,7 @@ class _PortForwardTabPageState extends State<PortForwardTabPage> {
       decoration: BoxDecoration(
           border: Border.all(color: MyTheme.color(context).border!)),
       child: Scaffold(
-          backgroundColor: MyTheme.color(context).bg,
+          backgroundColor: Theme.of(context).backgroundColor,
           body: DesktopTab(
             controller: tabController,
             onWindowCloseButton: () async {
diff --git a/flutter/lib/desktop/pages/remote_page.dart b/flutter/lib/desktop/pages/remote_page.dart
index dad286ee7..74ff9b7af 100644
--- a/flutter/lib/desktop/pages/remote_page.dart
+++ b/flutter/lib/desktop/pages/remote_page.dart
@@ -11,7 +11,6 @@ import 'package:provider/provider.dart';
 import 'package:wakelock/wakelock.dart';
 import 'package:flutter_custom_cursor/flutter_custom_cursor.dart';
 
-import '../../consts.dart';
 import '../widgets/remote_menubar.dart';
 import '../../common.dart';
 import '../../mobile/widgets/dialog.dart';
@@ -45,7 +44,6 @@ class _RemotePageState extends State<RemotePage>
   late RxBool _keyboardEnabled;
 
   final FocusNode _rawKeyFocusNode = FocusNode();
-  var _isPhysicalMouse = false;
   var _imageFocused = false;
 
   Function(bool)? _onEnterOrLeaveImage4Menubar;
@@ -138,7 +136,7 @@ class _RemotePageState extends State<RemotePage>
 
   Widget buildBody(BuildContext context) {
     return Scaffold(
-        backgroundColor: MyTheme.color(context).bg,
+        backgroundColor: Theme.of(context).backgroundColor,
         body: Overlay(
           initialEntries: [
             OverlayEntry(builder: (context) {
@@ -443,6 +441,7 @@ class ImagePainter extends CustomPainter {
 }
 
 class QualityMonitor extends StatelessWidget {
+  static const textStyle = TextStyle(color: MyTheme.grayBg);
   final QualityMonitorModel qualityMonitorModel;
   QualityMonitor(this.qualityMonitorModel);
 
@@ -462,23 +461,23 @@ class QualityMonitor extends StatelessWidget {
                         children: [
                           Text(
                             "Speed: ${qualityMonitorModel.data.speed ?? ''}",
-                            style: const TextStyle(color: MyTheme.grayBg),
+                            style: textStyle,
                           ),
                           Text(
                             "FPS: ${qualityMonitorModel.data.fps ?? ''}",
-                            style: const TextStyle(color: MyTheme.grayBg),
+                            style: textStyle,
                           ),
                           Text(
                             "Delay: ${qualityMonitorModel.data.delay ?? ''} ms",
-                            style: const TextStyle(color: MyTheme.grayBg),
+                            style: textStyle,
                           ),
                           Text(
                             "Target Bitrate: ${qualityMonitorModel.data.targetBitrate ?? ''}kb",
-                            style: const TextStyle(color: MyTheme.grayBg),
+                            style: textStyle,
                           ),
                           Text(
                             "Codec: ${qualityMonitorModel.data.codecFormat ?? ''}",
-                            style: const TextStyle(color: MyTheme.grayBg),
+                            style: textStyle,
                           ),
                         ],
                       ),
diff --git a/flutter/lib/desktop/pages/remote_tab_page.dart b/flutter/lib/desktop/pages/remote_tab_page.dart
index b086a2e35..e84b574fd 100644
--- a/flutter/lib/desktop/pages/remote_tab_page.dart
+++ b/flutter/lib/desktop/pages/remote_tab_page.dart
@@ -91,7 +91,7 @@ class _ConnectionTabPageState extends State<ConnectionTabPage> {
       decoration: BoxDecoration(
           border: Border.all(color: MyTheme.color(context).border!)),
       child: Scaffold(
-          backgroundColor: MyTheme.color(context).bg,
+          backgroundColor: Theme.of(context).backgroundColor,
           body: DesktopTab(
             controller: tabController,
             showTabBar: fullscreen.isFalse,
diff --git a/flutter/lib/desktop/pages/server_page.dart b/flutter/lib/desktop/pages/server_page.dart
index 9ca446dcb..68d5c3b33 100644
--- a/flutter/lib/desktop/pages/server_page.dart
+++ b/flutter/lib/desktop/pages/server_page.dart
@@ -69,7 +69,7 @@ class _DesktopServerPageState extends State<DesktopServerPage>
                     OverlayEntry(builder: (context) {
                       gFFI.dialogManager.setOverlayState(Overlay.of(context));
                       return Scaffold(
-                        backgroundColor: MyTheme.color(context).bg,
+                        backgroundColor: Theme.of(context).backgroundColor,
                         body: Center(
                           child: Column(
                             mainAxisAlignment: MainAxisAlignment.start,
@@ -145,7 +145,7 @@ class ConnectionManagerState extends State<ConnectionManager> {
                 windowManager.startDragging();
               },
               child: Container(
-                color: MyTheme.color(context).bg,
+                color: Theme.of(context).backgroundColor,
               ),
             ),
           ),
diff --git a/flutter/lib/desktop/widgets/popup_menu.dart b/flutter/lib/desktop/widgets/popup_menu.dart
index 84fd69b0e..71d1ec417 100644
--- a/flutter/lib/desktop/widgets/popup_menu.dart
+++ b/flutter/lib/desktop/widgets/popup_menu.dart
@@ -1,7 +1,6 @@
 import 'dart:core';
 
 import 'package:flutter/material.dart';
-import 'package:flutter_hbb/common.dart';
 import 'package:get/get.dart';
 
 import './material_mod_popup_menu.dart' as mod_menu;
@@ -201,7 +200,7 @@ class MenuEntryRadios<T> extends MenuEntryBase<T> {
               Text(
                 opt.text,
                 style: TextStyle(
-                    color: MyTheme.color(context).text,
+                    color: Theme.of(context).textTheme.titleLarge?.color,
                     fontSize: MenuConfig.fontSize,
                     fontWeight: FontWeight.normal),
               ),
@@ -296,7 +295,7 @@ class MenuEntrySubRadios<T> extends MenuEntryBase<T> {
               Text(
                 opt.text,
                 style: TextStyle(
-                    color: MyTheme.color(context).text,
+                    color: Theme.of(context).textTheme.titleLarge?.color,
                     fontSize: MenuConfig.fontSize,
                     fontWeight: FontWeight.normal),
               ),
@@ -345,7 +344,7 @@ class MenuEntrySubRadios<T> extends MenuEntryBase<T> {
           Text(
             text,
             style: TextStyle(
-                color: MyTheme.color(context).text,
+                color: Theme.of(context).textTheme.titleLarge?.color,
                 fontSize: MenuConfig.fontSize,
                 fontWeight: FontWeight.normal),
           ),
@@ -392,8 +391,8 @@ abstract class MenuEntrySwitchBase<T> extends MenuEntryBase<T> {
   @override
   List<mod_menu.PopupMenuEntry<T>> build(
       BuildContext context, MenuConfig conf) {
-    textStyle ??= const TextStyle(
-            color: Colors.black,
+    textStyle ??= TextStyle(
+            color: Theme.of(context).textTheme.titleLarge?.color,
             fontSize: MenuConfig.fontSize,
             fontWeight: FontWeight.normal)
         .obs;
@@ -560,7 +559,9 @@ class MenuEntrySubMenu<T> extends MenuEntryBase<T> {
           Obx(() => Text(
                 text,
                 style: TextStyle(
-                    color: super.enabled!.value ? Colors.black : Colors.grey,
+                    color: super.enabled!.value
+                        ? Theme.of(context).textTheme.titleLarge?.color
+                        : Colors.grey,
                     fontSize: MenuConfig.fontSize,
                     fontWeight: FontWeight.normal),
               )),
@@ -595,8 +596,8 @@ class MenuEntryButton<T> extends MenuEntryBase<T> {
         );
 
   Widget _buildChild(BuildContext context, MenuConfig conf) {
-    const enabledStyle = TextStyle(
-        color: Colors.black,
+    final enabledStyle = TextStyle(
+        color: Theme.of(context).textTheme.titleLarge?.color,
         fontSize: MenuConfig.fontSize,
         fontWeight: FontWeight.normal);
     const disabledStyle = TextStyle(
diff --git a/flutter/lib/mobile/pages/chat_page.dart b/flutter/lib/mobile/pages/chat_page.dart
index 2151f17be..8ac5ce313 100644
--- a/flutter/lib/mobile/pages/chat_page.dart
+++ b/flutter/lib/mobile/pages/chat_page.dart
@@ -45,7 +45,7 @@ class ChatPage extends StatelessWidget implements PageShape {
     return ChangeNotifierProvider.value(
         value: chatModel,
         child: Container(
-            color: MyTheme.color(context).grayBg,
+            color: Theme.of(context).scaffoldBackgroundColor,
             child: Consumer<ChatModel>(builder: (context, chatModel, child) {
               final currentUser = chatModel.currentUser;
               return Stack(
@@ -62,11 +62,17 @@ class ChatPage extends StatelessWidget implements PageShape {
                       inputOptions: InputOptions(
                           sendOnEnter: true,
                           inputDecoration: defaultInputDecoration(
-                              fillColor: MyTheme.color(context).bg),
+                              fillColor: Theme.of(context).backgroundColor),
                           sendButtonBuilder: defaultSendButton(
-                              color: MyTheme.color(context).text!),
-                          inputTextStyle:
-                              TextStyle(color: MyTheme.color(context).text)),
+                              color: Theme.of(context)
+                                  .textTheme
+                                  .titleLarge!
+                                  .color!),
+                          inputTextStyle: TextStyle(
+                              color: Theme.of(context)
+                                  .textTheme
+                                  .titleLarge
+                                  ?.color)),
                       messageOptions: MessageOptions(
                           showOtherUsersAvatar: false,
                           showTime: true,
diff --git a/flutter/lib/mobile/pages/file_manager_page.dart b/flutter/lib/mobile/pages/file_manager_page.dart
index dd1cbb83f..13059d188 100644
--- a/flutter/lib/mobile/pages/file_manager_page.dart
+++ b/flutter/lib/mobile/pages/file_manager_page.dart
@@ -58,7 +58,7 @@ class _FileManagerPageState extends State<FileManagerPage> {
               return false;
             },
             child: Scaffold(
-              backgroundColor: MyTheme.grayBg,
+              // backgroundColor: MyTheme.grayBg,
               appBar: AppBar(
                 leading: Row(children: [
                   IconButton(
@@ -69,7 +69,7 @@ class _FileManagerPageState extends State<FileManagerPage> {
                 title: ToggleSwitch(
                   initialLabelIndex: model.isLocal ? 0 : 1,
                   activeBgColor: [MyTheme.idColor],
-                  inactiveBgColor: MyTheme.grayBg,
+                  // inactiveBgColor: MyTheme.grayBg,
                   inactiveFgColor: Colors.black54,
                   totalSwitches: 2,
                   minWidth: 100,
@@ -465,6 +465,9 @@ class _FileManagerPageState extends State<FileManagerPage> {
         );
       case JobState.none:
         break;
+      case JobState.paused:
+        // TODO: Handle this case.
+        break;
     }
     return null;
   }
@@ -530,8 +533,7 @@ class BottomSheetBody extends StatelessWidget {
                         children: [
                           Text(title, style: TextStyle(fontSize: 18)),
                           Text(text,
-                              style: TextStyle(
-                                  fontSize: 14, color: MyTheme.grayBg))
+                              style: TextStyle(fontSize: 14)) // TODO color
                         ],
                       )
                     ],
@@ -548,7 +550,7 @@ class BottomSheetBody extends StatelessWidget {
             ));
       },
       onClosing: () {},
-      backgroundColor: MyTheme.grayBg,
+      // backgroundColor: MyTheme.grayBg,
       enableDrag: false,
     );
   }
diff --git a/flutter/lib/mobile/pages/home_page.dart b/flutter/lib/mobile/pages/home_page.dart
index 05a6d6b51..31240b895 100644
--- a/flutter/lib/mobile/pages/home_page.dart
+++ b/flutter/lib/mobile/pages/home_page.dart
@@ -59,7 +59,7 @@ class _HomePageState extends State<HomePage> {
           return false;
         },
         child: Scaffold(
-          backgroundColor: MyTheme.grayBg,
+          // backgroundColor: MyTheme.grayBg,
           appBar: AppBar(
             centerTitle: true,
             title: Text("RustDesk"),
@@ -73,7 +73,7 @@ class _HomePageState extends State<HomePage> {
                 .toList(),
             currentIndex: _selectedIndex,
             type: BottomNavigationBarType.fixed,
-            selectedItemColor: MyTheme.accent,
+            selectedItemColor: MyTheme.accent, //
             unselectedItemColor: MyTheme.darkGray,
             onTap: (index) => setState(() {
               // close chat overlay when go chat page
@@ -95,7 +95,7 @@ class WebHomePage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: MyTheme.grayBg,
+      // backgroundColor: MyTheme.grayBg,
       appBar: AppBar(
         centerTitle: true,
         title: Text("RustDesk" + (isWeb ? " (Beta) " : "")),
diff --git a/flutter/lib/mobile/pages/remote_page.dart b/flutter/lib/mobile/pages/remote_page.dart
index 94f584109..e16035175 100644
--- a/flutter/lib/mobile/pages/remote_page.dart
+++ b/flutter/lib/mobile/pages/remote_page.dart
@@ -752,7 +752,7 @@ class _RemotePageState extends State<RemotePage> {
   void changeTouchMode() {
     setState(() => _showEdit = false);
     showModalBottomSheet(
-        backgroundColor: MyTheme.grayBg,
+        // backgroundColor: MyTheme.grayBg,
         isScrollControlled: true,
         context: context,
         shape: const RoundedRectangleBorder(
@@ -968,7 +968,9 @@ class ImagePainter extends CustomPainter {
   }
 }
 
+// TODO global widget
 class QualityMonitor extends StatelessWidget {
+  static final textColor = Colors.grey.shade200;
   @override
   Widget build(BuildContext context) => ChangeNotifierProvider.value(
       value: gFFI.qualityMonitorModel,
@@ -985,23 +987,23 @@ class QualityMonitor extends StatelessWidget {
                         children: [
                           Text(
                             "Speed: ${qualityMonitorModel.data.speed ?? ''}",
-                            style: TextStyle(color: MyTheme.grayBg),
+                            style: TextStyle(color: textColor),
                           ),
                           Text(
                             "FPS: ${qualityMonitorModel.data.fps ?? ''}",
-                            style: TextStyle(color: MyTheme.grayBg),
+                            style: TextStyle(color: textColor),
                           ),
                           Text(
                             "Delay: ${qualityMonitorModel.data.delay ?? ''} ms",
-                            style: TextStyle(color: MyTheme.grayBg),
+                            style: TextStyle(color: textColor),
                           ),
                           Text(
                             "Target Bitrate: ${qualityMonitorModel.data.targetBitrate ?? ''}kb",
-                            style: TextStyle(color: MyTheme.grayBg),
+                            style: TextStyle(color: textColor),
                           ),
                           Text(
                             "Codec: ${qualityMonitorModel.data.codecFormat ?? ''}",
-                            style: TextStyle(color: MyTheme.grayBg),
+                            style: TextStyle(color: textColor),
                           ),
                         ],
                       ),