feat: switch between light and dark theme based on system settings (#1523)

richardshiue · web-flow · commit 442dfe7ef80e · 2022-12-08T14:21:11.000+08:00
* feat: allow listening to system for light/dark theme

* chore: implement UI for theme mode setting

* chore: fix translations
diff --git a/frontend/app_flowy/assets/translations/ca-ES.json b/frontend/app_flowy/assets/translations/ca-ES.json
@@ -138,12 +138,16 @@
       "open": "Obrir la configuració"
     },
     "appearance": {
-      "lightLabel": "Mode Clar",
-      "darkLabel": "Mode Fosc"
+      "themeMode": {
+        "label": "Theme Mode",
+        "light": "Mode Clar",
+        "dark": "Mode Fosc",
+        "system": "Adapt to System"
+      }
     }
   },
   "sideBar": {
     "openSidebar": "Open sidebar",
     "closeSidebar": "Close sidebar"
   }
-}
+}
diff --git a/frontend/app_flowy/assets/translations/en.json b/frontend/app_flowy/assets/translations/en.json
@@ -158,8 +158,12 @@
       "open": "Open Settings"
     },
     "appearance": {
-      "lightLabel": "Light Mode",
-      "darkLabel": "Dark Mode"
+      "themeMode": {
+        "label": "Theme Mode",
+        "light": "Light Mode",
+        "dark": "Dark Mode",
+        "system": "Adapt to System"
+      }
     }
   },
   "grid": {
diff --git a/frontend/app_flowy/assets/translations/es-VE.json b/frontend/app_flowy/assets/translations/es-VE.json
@@ -144,8 +144,12 @@
       "open": "Abrir ajustes"
     },
     "appearance": {
-      "lightLabel": "Modo Claro",
-      "darkLabel": "Modo Oscuro"
+      "themeMode": {
+        "label": "Theme Mode",
+        "light": "Modo Claro",
+        "dark": "Modo Oscuro",
+        "system": "Adapt to System"
+      }
     }
   },
   "grid": {
@@ -218,9 +222,9 @@
     "openSidebar": "Abrir panel lateral",
     "closeSidebar": "Cerrar panel lateral"
   },
-    "board": {
+  "board": {
     "column": {
       "create_new_card": "Nuevo"
     }
   }
-}
+}
diff --git a/frontend/app_flowy/assets/translations/fr-CA.json b/frontend/app_flowy/assets/translations/fr-CA.json
@@ -138,12 +138,16 @@
       "open": "Ouvrir les paramètres"
     },
     "appearance": {
-      "lightLabel": "Mode clair",
-      "darkLabel": "Mode sombre"
+      "themeMode": {
+        "label": "Theme Mode",
+        "light": "Mode clair",
+        "dark": "Mode sombre",
+        "system": "Adapt to System"
+      }
     }
   },
   "sideBar": {
     "openSidebar": "Open sidebar",
     "closeSidebar": "Close sidebar"
   }
-}
+}
diff --git a/frontend/app_flowy/assets/translations/fr-FR.json b/frontend/app_flowy/assets/translations/fr-FR.json
@@ -152,8 +152,12 @@
       "open": "Ouvrir les paramètres"
     },
     "appearance": {
-      "lightLabel": "Mode clair",
-      "darkLabel": "Mode sombre"
+      "themeMode": {
+        "label": "Theme Mode",
+        "light": "Mode clair",
+        "dark": "Mode sombre",
+        "system": "Adapt to System"
+      }
     }
   },
   "grid": {
diff --git a/frontend/app_flowy/assets/translations/hu-HU.json b/frontend/app_flowy/assets/translations/hu-HU.json
@@ -138,12 +138,16 @@
       "open": "Beállítások megnyitása"
     },
     "appearance": {
-      "lightLabel": "Világos mód",
-      "darkLabel": "Éjjeli mód"
+      "themeMode": {
+        "label": "Theme Mode",
+        "light": "Világos mód",
+        "dark": "Éjjeli mód",
+        "system": "Adapt to System"
+      }
     }
   },
   "sideBar": {
     "openSidebar": "Open sidebar",
     "closeSidebar": "Close sidebar"
   }
-}
+}
diff --git a/frontend/app_flowy/assets/translations/id-ID.json b/frontend/app_flowy/assets/translations/id-ID.json
@@ -145,8 +145,12 @@
       "open": "Buka Pengaturan"
     },
     "appearance": {
-      "lightLabel": "Mode Terang",
-      "darkLabel": "Mode Gelap"
+      "themeMode": {
+        "label": "Theme Mode",
+        "light": "Mode Terang",
+        "dark": "Mode Gelap",
+        "system": "Adapt to System"
+      }
     }
   },
   "grid": {
diff --git a/frontend/app_flowy/assets/translations/it-IT.json b/frontend/app_flowy/assets/translations/it-IT.json
@@ -138,18 +138,22 @@
       "open": "aprire le impostazioni"
     },
     "appearance": {
-      "lightLabel": "Modalità Chiara",
-      "darkLabel": "Modalità Scura"
+      "themeMode": {
+        "label": "Theme Mode",
+        "light": "Modalità Chiara",
+        "dark": "Modalità Scura",
+        "system": "Adapt to System"
+      }
     }
   },
   "grid": {
-    "menuName":"Griglia"
+    "menuName": "Griglia"
   },
-  "document":{
-    "menuName":"Documento"
+  "document": {
+    "menuName": "Documento"
   },
   "sideBar": {
     "openSidebar": "Open sidebar",
     "closeSidebar": "Close sidebar"
   }
-}
+}
diff --git a/frontend/app_flowy/assets/translations/ja-JP.json b/frontend/app_flowy/assets/translations/ja-JP.json
@@ -138,8 +138,12 @@
       "open": "設定"
     },
     "appearance": {
-      "lightLabel": "ライトモード",
-      "darkLabel": "ダークモード"
+      "themeMode": {
+        "label": "Theme Mode",
+        "light": "ライトモード",
+        "dark": "ダークモード",
+        "system": "Adapt to System"
+      }
     }
   },
   "grid": {
diff --git a/frontend/app_flowy/assets/translations/pl-PL.json b/frontend/app_flowy/assets/translations/pl-PL.json
@@ -138,12 +138,16 @@
       "open": "Otwórz Ustawienia"
     },
     "appearance": {
-      "lightLabel": "Tryb Jasny",
-      "darkLabel": "Tryb Ciemny"
+      "themeMode": {
+        "label": "Theme Mode",
+        "light": "Tryb Jasny",
+        "dark": "Tryb Ciemny",
+        "system": "Adapt to System"
+      }
     }
   },
   "sideBar": {
     "openSidebar": "Open sidebar",
     "closeSidebar": "Close sidebar"
   }
-}
+}
diff --git a/frontend/app_flowy/assets/translations/pt-BR.json b/frontend/app_flowy/assets/translations/pt-BR.json
@@ -152,8 +152,12 @@
       "open": "Abrir as Configurações"
     },
     "appearance": {
-      "lightLabel": "Modo Claro",
-      "darkLabel": "Modo Escuro"
+      "themeMode": {
+        "label": "Theme Mode",
+        "light": "Modo Claro",
+        "dark": "Modo Escuro",
+        "system": "Adapt to System"
+      }
     }
   },
   "grid": {
diff --git a/frontend/app_flowy/assets/translations/ru-RU.json b/frontend/app_flowy/assets/translations/ru-RU.json
@@ -151,8 +151,12 @@
       "open": "Открыть настройки"
     },
     "appearance": {
-      "lightLabel": "Светлая",
-      "darkLabel": "Тёмная"
+      "themeMode": {
+        "label": "Theme Mode",
+        "light": "Светлая",
+        "dark": "Тёмная",
+        "system": "Adapt to System"
+      }
     }
   },
   "grid": {
diff --git a/frontend/app_flowy/assets/translations/sv.json b/frontend/app_flowy/assets/translations/sv.json
@@ -152,8 +152,12 @@
       "open": "Öppna inställningarna"
     },
     "appearance": {
-      "lightLabel": "Ljust läge",
-      "darkLabel": "Mörkt läge"
+      "themeMode": {
+        "label": "Theme Mode",
+        "light": "Ljust läge",
+        "dark": "Mörkt läge",
+        "system": "Adapt to System"
+      }
     }
   },
   "grid": {
@@ -232,4 +236,4 @@
       "create_new_card": "Nytt"
     }
   }
-}
+}
diff --git a/frontend/app_flowy/assets/translations/tr-TR.json b/frontend/app_flowy/assets/translations/tr-TR.json
@@ -138,12 +138,16 @@
       "open": "Ayarları Aç"
     },
     "appearance": {
-      "lightLabel": "Aydınlık Mod",
-      "darkLabel": "Karanlık Mod"
+      "themeMode": {
+        "label": "Theme Mode",
+        "light": "Aydınlık Mod",
+        "dark": "Karanlık Mod",
+        "system": "Adapt to System"
+      }
     }
   },
   "sideBar": {
     "openSidebar": "Open sidebar",
     "closeSidebar": "Close sidebar"
   }
-}
+}
diff --git a/frontend/app_flowy/assets/translations/zh-CN.json b/frontend/app_flowy/assets/translations/zh-CN.json
@@ -152,8 +152,12 @@
       "open": "打开设置"
     },
     "appearance": {
-      "lightLabel": "日间模式",
-      "darkLabel": "夜间模式"
+      "themeMode": {
+        "label": "Theme Mode",
+        "light": "日间模式",
+        "dark": "夜间模式",
+        "system": "Adapt to System"
+      }
     }
   },
   "grid": {
diff --git a/frontend/app_flowy/assets/translations/zh-TW.json b/frontend/app_flowy/assets/translations/zh-TW.json
@@ -145,8 +145,12 @@
       "open": "開啟設定"
     },
     "appearance": {
-      "lightLabel": "亮色模式",
-      "darkLabel": "暗色模式"
+      "themeMode": {
+        "label": "Theme Mode",
+        "light": "亮色模式",
+        "dark": "暗色模式",
+        "system": "Adapt to System"
+      }
     }
   },
   "grid": {
diff --git a/frontend/app_flowy/lib/startup/tasks/app_widget.dart b/frontend/app_flowy/lib/startup/tasks/app_widget.dart
@@ -83,6 +83,8 @@ class ApplicationWidget extends StatelessWidget {
           builder: overlayManagerBuilder(),
           debugShowCheckedModeBanner: false,
           theme: state.theme.getThemeData(state.locale),
+          darkTheme: state.darkTheme.getThemeData(state.locale),
+          themeMode: state.themeMode,
           localizationsDelegates: context.localizationDelegates +
               [AppFlowyEditorLocalizations.delegate],
           supportedLocales: context.supportedLocales,
diff --git a/frontend/app_flowy/lib/workspace/application/appearance.dart b/frontend/app_flowy/lib/workspace/application/appearance.dart
diff --git a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart
diff --git a/frontend/app_flowy/packages/flowy_infra/lib/theme.dart b/frontend/app_flowy/packages/flowy_infra/lib/theme.dart
diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/button.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/button.dart
diff --git a/frontend/rust-lib/flowy-user/src/entities/user_setting.rs b/frontend/rust-lib/flowy-user/src/entities/user_setting.rs
