feat: supports dark mode (#42)

Author: zhu-xiaowei

.github/workflows/release-template.yml

@@ -1,12 +1,10 @@
 name: Release Template
 
 on:
-  workflow_dispatch:
-    inputs:
-      reason:
-        description: 'the reason for triggering this workflow'
-        required: false
-        default: 'manually publish the ecr images and templates'
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
 jobs:
   release_template:
     runs-on: ubuntu-latest

README.md

@@ -23,15 +23,24 @@ across Android, iOS, and macOS platforms.
 
 ### What's New 🔥
 
-- 🚀 Support Speech to Speech By Amazon Nova Sonic on Apple Platform. Check [How to Use](#amazon-nova-sonic) for
+- Supports dark mode on Android, iOS, and Mac (Following system settings, From v2.4.0).
+- 🚀 Support Speech to Speech By Amazon Nova Sonic on Apple Platform.
+  Check [How to Use](#amazon-nova-sonic-speech-to-speech-model) for
   more details. (From v2.3.0).
-- Support Request Latency and token response speed display (From v2.3.0).
-- Change to new bubble format UI for user question (From v2.3.0).
 - Support for OpenAI Compatible models. You can now
-  use [easy-model-deployer](https://github.com/aws-samples/easy-model-deployer),
+  use [Easy Model Deployer](https://github.com/aws-samples/easy-model-deployer),
   OpenRouter, or any OpenAI-compatible model provider via SwiftChat. Please
   check [Configure OpenAI Compatible](#openai-compatible) section for more details(From v2.2.0).
 
+#### Dark Mode
+
+<div style="display: flex; flex-direction: 'row'; background-color: #888888;">
+<img src="assets/animations/dark_markdown.avif" width=24%>
+<img src="assets/animations/dark_voice.avif" width=24%>
+<img src="assets/animations/dark_gen_image.avif" width=24%>
+<img src="assets/animations/dark_settings.avif" width=24%>
+</div>
+
 ### Key Features
 
 - Real-time streaming chat with AI
@@ -42,7 +51,7 @@ across Android, iOS, and macOS platforms.
 - Cross-platform support (Android, iOS, macOS)
 - Tablet-optimized for iPad and Android tablets
 - Fast launch and responsive performance
-- Multiple AI model
+- Multiple AI models
   supported ([Amazon Bedrock](https://aws.amazon.com/bedrock/), [Ollama](https://github.com/ollama/ollama), [DeepSeek](https://www.deepseek.com/), [OpenAI](https://openai.com/)
   and [OpenAI Compatible](#openai-compatible) Models)
 - Fully Customizable System Prompt Assistant
@@ -53,12 +62,12 @@ across Android, iOS, and macOS platforms.
 
 **Usage Guide**
 
-1. Amazon Nova Sonic model is supported starting from v2.3.0. If you have deployed it before, You Need to:
+1. Amazon Nova Sonic model is supported starting from v2.3.0. If you have deployed it before, you need to:
     * [Update CloudFormation](#upgrade-cloudformation) Stack
     * [Update API](#upgrade-api)
     * [Upgrade your App](#-quick-download) to v2.3.0 or later
 
-   If you have not Deployed your CloudFormation Stack please
+   If you have not deployed your CloudFormation Stack please
    finish [Getting Started with Amazon Bedrock](#getting-started-with-amazon-bedrock) section.
 2. Switch the **Region** to `us-east-1` in the settings page and select the `Nova Sonic` under **Chat Model**.
 3. Return to Chat page, select a system prompt or directly click the microphone icon to start your conversation.
@@ -68,14 +77,11 @@ across Android, iOS, and macOS platforms.
 1. Built-in spoken language practice for words and sentences, as well as storytelling scenarios. You can also add
    **Custom System Prompts** for voice chatting in different scenarios.
 2. Support **Barge In** by default, Also you can disable in system prompt.
-3. Support selecting voices in the settings page, including American/British English, and options for male and female voices.
+3. Support selecting voices in the settings page, including American/British English, Spanish and options for male and
+   female voices.
 4. Support **Echo Cancellation**, You can talk directly to the device without wearing headphones.
 5. Support **Voice Waveform** to display volume level.
 
-**General Talk**
-
-https://github.com/user-attachments/assets/d3028312-c420-476c-88c2-ba870015f3c4
-
 **Learn Sentences**
 
 https://github.com/user-attachments/assets/ebf21b12-9c93-4d2e-a109-1d6484019838
@@ -385,7 +391,7 @@ npm run android
 
 ### Build for iOS
 
-also open a new terminal, for the first time you need to install the native dependencies
+also open a new terminal. For the first time you need to install the native dependencies
 by execute `cd ios && pod install && cd ..`, then execute the follow command:
 
 ```bash

README_CN.md

@@ -14,18 +14,29 @@
 [English](/README.md)
 
 SwiftChat 是一款快速响应的 AI 聊天应用，采用 [React Native](https://reactnative.dev/)
-开发，并依托 [Amazon Bedrock](https://aws.amazon.com/bedrock/) 提供强大支持，同时兼容 Ollama、DeepSeek、OpenAI 和 OpenAI API 兼容的其他模型供应商。
-凭借其极简设计理念与坚实的隐私保护措施，该应用在 Android、iOS 和 macOS 平台上实现了实时流式对话、AI 图像生成和语音对话助手功能。
+开发，并依托 [Amazon Bedrock](https://aws.amazon.com/bedrock/) 提供强大支持，同时兼容 Ollama、DeepSeek、OpenAI 和 OpenAI API
+兼容的其他模型供应商。 凭借其极简设计理念与坚实的隐私保护措施，该应用在 Android、iOS 和 macOS 平台上实现了实时流式对话、AI
+图像生成和语音对话助手功能。
 
 ![](assets/promo.avif)
 
 ### 新功能 🔥
 
-- 🚀 在 Apple 平台上支持 Amazon Nova Sonic 语音对话功能。查看 [使用方法](#amazon-nova-系列功能) 了解更多详情。（自 v2.3.0 起）。
-- 支持请求延迟和 token 响应速度显示（自 v2.3.0 起）。
-- 用户问题展示为新的气泡 UI 格式（自 v2.3.0 起）。
-- 支持 OpenAI Compatible 模型。您现在可以通过 SwiftChat 使用 [easy-model-deployer](https://github.com/aws-samples/easy-model-deployer)、
-  OpenRouter 或任何 OpenAI API 兼容的模型。更多详情请查看 [配置 OpenAI Compatible](#openai-compatible) 部分（自 v2.2.0 起）。
+- 支持 Android、iOS 和 Mac 上的暗黑模式（跟随系统设置，自 v2.4.0 起）。
+- 🚀 在 Apple 平台上支持 Amazon Nova Sonic 语音对话功能。查看 [使用方法](#amazon-nova-sonic-语音对话模型) 了解更多详情。（自
+  v2.3.0 起）。
+- 支持 OpenAI Compatible 模型。您现在可以通过 SwiftChat
+  使用 [easy-model-deployer](https://github.com/aws-samples/easy-model-deployer)、
+  OpenRouter 或任何 OpenAI API 兼容的模型。更多详情请查看 [配置 OpenAI Compatible](#openai-api-兼容) 部分（自 v2.2.0 起）。
+
+#### 暗黑模式
+
+<div style="display: flex; flex-direction: 'row'; background-color: #888888;">
+<img src="assets/animations/dark_markdown.avif" width=24%>
+<img src="assets/animations/dark_voice.avif" width=24%>
+<img src="assets/animations/dark_gen_image.avif" width=24%>
+<img src="assets/animations/dark_settings.avif" width=24%>
+</div>
 
 ### 主要特点
 
@@ -40,7 +51,7 @@ SwiftChat 是一款快速响应的 AI 聊天应用，采用 [React Native](https
 - 快速启动和响应性能
 - 支持多种 AI 模型及切换 (
   包括 [Amazon Bedrock](https://aws.amazon.com/bedrock/)，[Ollama](https://github.com/ollama/ollama)，[DeepSeek](https://www.deepseek.com/)，[OpenAI](https://openai.com/)
-  和 [OpenAI Compatible](#openai-compatible) 模型)
+  和 [OpenAI Compatible](#openai-api-兼容) 模型)
 - 支持完全自定义的系统提示词助手
 
 ### Amazon Nova 系列功能
@@ -61,15 +72,11 @@ SwiftChat 是一款快速响应的 AI 聊天应用，采用 [React Native](https
 **语音对话功能**
 
 1. 内置单词和句子的口语练习，以及讲故事场景。您还可以添加 **自定义系统提示词** 用于不同场景的语音聊天。
-2. 支持在设置页面中选择声音类型，支持美式/英式英语，以及男声和女声的选择。
-3. 默认支持 **插话功能**，您也可以在系统提示词中禁用。
+2. 默认支持 **插话功能**，您也可以在系统提示词中禁用。
+3. 支持在设置页面中选择声音类型，支持美式/英式英语，西班牙语，以及男声和女声的选择。
 4. 支持 **回声消除**，您可以直接对着设备说话而无需佩戴耳机。
 5. 支持 **语音波形** 显示音量级别。
 
-**日常对话**
-
-https://github.com/user-attachments/assets/d3028312-c420-476c-88c2-ba870015f3c4
-
 **学习句子**
 
 https://github.com/user-attachments/assets/ebf21b12-9c93-4d2e-a109-1d6484019838
@@ -142,7 +149,9 @@ https://github.com/user-attachments/assets/c70fc2b4-8960-4a5e-b4f8-420fcd5eafd4
 - 文本模型: `Amazon Nova Pro`
 - 图像模型: `Stable Diffusion 3.5 Large`
 
-如果您要使用图片生成功能，请确保已开启 `Amazon Nova Lite` 模型的访问权限。您可以参考 [Amazon Bedrock 用户指南](https://docs.aws.amazon.com/bedrock/latest/userguide/model-access-modify.html) 来启用您的模型。
+如果您要使用图片生成功能，请确保已开启 `Amazon Nova Lite`
+模型的访问权限。您可以参考 [Amazon Bedrock 用户指南](https://docs.aws.amazon.com/bedrock/latest/userguide/model-access-modify.html)
+来启用您的模型。
 
 <details>
 <summary><b>🔧 配置步骤（点击展开）</b></summary>
@@ -172,10 +181,12 @@ https://github.com/user-attachments/assets/c70fc2b4-8960-4a5e-b4f8-420fcd5eafd4
 2. 点击 **下一步**，在"指定堆栈详细信息"页面中提供以下信息:
     - 使用存储 API Key 的参数名填写`ApiKeyParam`(例如"SwiftChatAPIKey")。
     - 对于 App Runner，根据您的需求选择`InstanceTypeParam`。
-3. 点击 **下一步**，保持 "配置堆栈选项" 页面默认设置，阅读功能并勾选底部的 "我确认，AWS CloudFormation 可能会创建 IAM 资源" 复选框。
+3. 点击 **下一步**，保持 "配置堆栈选项" 页面默认设置，阅读功能并勾选底部的 "我确认，AWS CloudFormation 可能会创建 IAM 资源"
+   复选框。
 4. 点击 **下一步**，在 "审核并创建" 中检查配置并点击 **提交**。
 
-等待约 3-5 分钟部署完成，然后点击 CloudFormation 堆栈并转到 **输出** 选项卡，您可以找到 **API URL** 类似`https://xxx.xxx.awsapprunner.com` 或 `https://xxx.lambda-url.xxx.on.aws`。
+等待约 3-5 分钟部署完成，然后点击 CloudFormation 堆栈并转到 **输出** 选项卡，您可以找到 **API URL**
+类似`https://xxx.xxx.awsapprunner.com` 或 `https://xxx.lambda-url.xxx.on.aws`。
 
 ### 第 3 步: 启动应用并设置 API URL 和 API Key
 
@@ -361,7 +372,7 @@ cd react-native && npm i && npm start
 npm run android
 ```
 
-## 构建 iOS
+### 构建 iOS
 
 先打开一个新的终端，如果是第一次运行，请先执行 `cd ios && pod install && cd ..` 来安装原生依赖，然后运行：
 
@@ -411,7 +422,8 @@ npm run ios
     https://aws-gcr-solutions.s3.amazonaws.com/swift-chat/latest/SwiftChatLambda.template
     ```
 4. 点击 **下一步** 按钮并继续点击 **下一步** 按钮。在 **配置堆栈选项** 页面上，
-   勾选 `我确认，AWS CloudFormation 可能会创建 IAM 资源。` 然后点击 **下一步** 和 **提交** 按钮来更新您的 CloudFormation 模板。
+   勾选 `我确认，AWS CloudFormation 可能会创建 IAM 资源。` 然后点击 **下一步** 和 **提交** 按钮来更新您的 CloudFormation
+   模板。
 
 ## 安全
 

assets/animations/dark_gen_image.avif

@@ -1,5 +1,6 @@
 package com.aws.swiftchat
 
+import android.content.res.Configuration
 import android.graphics.Color
 import android.os.Bundle
 import com.facebook.react.ReactActivity
@@ -17,7 +18,29 @@ class MainActivity : ReactActivity() {
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(null)
-        window.navigationBarColor = Color.WHITE
+        updateNavigationBarColor()
+    }
+
+
+    override fun onConfigurationChanged(newConfig: Configuration) {
+        super.onConfigurationChanged(newConfig)
+        updateNavigationBarColor()
+    }
+
+    override fun onResume() {
+        super.onResume()
+        updateNavigationBarColor()
+    }
+
+    private fun updateNavigationBarColor() {
+        val isDarkMode =
+            resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK == Configuration.UI_MODE_NIGHT_YES
+
+        runOnUiThread {
+            window.navigationBarColor = if (isDarkMode) Color.BLACK else Color.WHITE
+            // Force update for all child windows (including modals)
+            window.decorView.requestLayout()
+        }
     }
 
     /**

assets/animations/dark_markdown.avif

@@ -36,7 +36,7 @@ class MainApplication : Application(), ReactApplication {
     override fun onCreate() {
         super.onCreate()
         SoLoader.init(this, false)
-        AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
+        AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM);
         if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
             // If you opted-in for the New Architecture, we load the native entry point for this app.
             load()

assets/animations/dark_settings.avif

@@ -7,4 +7,12 @@
         <item name="android:navigationBarColor">@android:color/white</item>
     </style>
 
+    <style name="Theme.FullScreenDialog">
+        <item name="android:windowNoTitle">true</item>
+        <item name="android:windowIsFloating">false</item>
+        <item name="android:windowBackground">@android:color/transparent</item>
+        <item name="android:statusBarColor">@android:color/transparent</item>
+        <item name="android:navigationBarColor">@android:color/transparent</item>
+    </style>
+
 </resources>

assets/animations/dark_voice.avif

@@ -55,7 +55,7 @@
 		<string>UIInterfaceOrientationPortraitUpsideDown</string>
 	</array>
 	<key>UIUserInterfaceStyle</key>
-	<string>Light</string>
+	<string>Automatic</string>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
 </dict>

react-native/android/app/src/main/java/com/aws/swiftchat/MainActivity.kt

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="32700.99.1234" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
-    <device id="retina5_9" orientation="portrait" appearance="light"/>
+    <device id="retina5_9" orientation="portrait" appearance="automatic"/>
     <accessibilityOverrides/>
     <dependencies>
         <deployment identifier="iOS"/>

react-native/android/app/src/main/java/com/aws/swiftchat/MainApplication.kt

@@ -15,7 +15,8 @@ import Toast from 'react-native-toast-message';
 import TokenUsageScreen from './settings/TokenUsageScreen.tsx';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import PromptScreen from './prompt/PromptScreen.tsx';
-import { isMacCatalyst } from './utils/PlatformUtils';
+import { isAndroid, isMacCatalyst } from './utils/PlatformUtils';
+import { ThemeProvider, useTheme } from './theme';
 
 export const isMac = isMacCatalyst;
 const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
@@ -31,14 +32,26 @@ const renderCustomDrawerContent = (
 
 const DrawerNavigator = () => {
   const { drawerType } = useAppContext();
+  const { colors, isDark } = useTheme();
   return (
     <Drawer.Navigator
       initialRouteName="Bedrock"
       screenOptions={{
-        headerTintColor: 'black',
+        overlayColor: isDark ? 'rgba(255, 255, 255, 0.1)' : undefined,
+        headerTintColor: colors.text,
         headerTitleAlign: 'center',
-        drawerStyle: { width: width },
-        headerStyle: { height: isMac ? 66 : undefined },
+        drawerStyle: {
+          width: width,
+          backgroundColor: colors.background,
+          borderRightWidth: isMac ? 1 : isAndroid ? 0.3 : 0,
+          borderRightColor: colors.border,
+        },
+        headerStyle: {
+          height: isMac ? 66 : undefined,
+          backgroundColor: colors.background,
+          borderBottomWidth: isDark ? 0.3 : undefined,
+          borderBottomColor: isDark ? colors.chatScreenSplit : undefined,
+        },
         drawerType: isMac ? drawerType : 'slide',
       }}
       drawerContent={renderCustomDrawerContent}>
@@ -48,6 +61,7 @@ const DrawerNavigator = () => {
   );
 };
 const AppNavigator = () => {
+  const { colors } = useTheme();
   return (
     <Stack.Navigator initialRouteName="Drawer" screenOptions={{}}>
       <Stack.Screen
@@ -62,35 +76,57 @@ const AppNavigator = () => {
           title: 'Usage',
           contentStyle: {
             height: isMac ? 66 : undefined,
+            backgroundColor: colors.background,
           },
           headerTitleAlign: 'center',
+          headerStyle: { backgroundColor: colors.background },
+          headerTintColor: colors.text,
         }}
       />
       <Stack.Screen
         name="Prompt"
         component={PromptScreen}
         options={{
           title: 'System Prompt',
-          contentStyle: { height: isMac ? 66 : undefined },
+          contentStyle: {
+            height: isMac ? 66 : undefined,
+            backgroundColor: colors.background,
+          },
           headerTitleAlign: 'center',
+          headerStyle: { backgroundColor: colors.background },
+          headerTintColor: colors.text,
         }}
       />
     </Stack.Navigator>
   );
 };
 
+const AppWithTheme = () => {
+  const { colors, isDark } = useTheme();
+  return (
+    <>
+      <StatusBar
+        barStyle={isDark ? 'light-content' : 'dark-content'}
+        backgroundColor={colors.background}
+      />
+      <NavigationContainer
+        onStateChange={_ => {
+          Keyboard.dismiss();
+        }}>
+        <AppNavigator />
+      </NavigationContainer>
+    </>
+  );
+};
+
 const App = () => {
   return (
     <>
-      <AppProvider>
-        <StatusBar barStyle="dark-content" backgroundColor="#ffffff" />
-        <NavigationContainer
-          onStateChange={_ => {
-            Keyboard.dismiss();
-          }}>
-          <AppNavigator />
-        </NavigationContainer>
-      </AppProvider>
+      <ThemeProvider>
+        <AppProvider>
+          <AppWithTheme />
+        </AppProvider>
+      </ThemeProvider>
       <Toast />
     </>
   );