@coze-arch/cli 0.0.1-alpha.b6f2c1 → 0.0.1-alpha.bd5b49

package/lib/__templates__/expo/.cozeproj/scripts/dev_run.sh

@@ -1,7 +1,7 @@
-ROOT_DIR="$(cd "$(dirname "$0")" && pwd)"
+ROOT_DIR="$(cd "$(dirname "$0")/../.." && pwd)"
 PREVIEW_DIR="${COZE_PREVIEW_DIR:-/source/preview}"
 LOG_DIR="${COZE_LOG_DIR:-$ROOT_DIR/logs}"
-LOG_FILE="$LOG_DIR/app.log"
+LOG_CLIENT_FILE="$LOG_DIR/client.log"
 mkdir -p "$LOG_DIR"
 
 # ==================== 配置项 ====================
@@ -15,13 +15,14 @@ EXPO_PORT="5000"
 WEB_URL="${COZE_PROJECT_DOMAIN_DEFAULT:-http://127.0.0.1:${SERVER_PORT}}"
 ASSUME_YES="1"
 EXPO_PUBLIC_BACKEND_BASE_URL="${EXPO_PUBLIC_BACKEND_BASE_URL:-$WEB_URL}"
-
+EXPO_PUBLIC_COZE_PROJECT_ID="${COZE_PROJECT_ID:-}"
 
 EXPO_PACKAGER_PROXY_URL="${EXPO_PUBLIC_BACKEND_BASE_URL}"
-export EXPO_PUBLIC_BACKEND_BASE_URL EXPO_PACKAGER_PROXY_URL
+export EXPO_PUBLIC_BACKEND_BASE_URL EXPO_PACKAGER_PROXY_URL EXPO_PUBLIC_COZE_PROJECT_ID
 # 运行时变量（为避免 set -u 的未绑定错误，预置为空）
 SERVER_PID=""
 EXPO_PID=""
+
 # ==================== 工具函数 ====================
 check_command() {
   if ! command -v "$1" &> /dev/null; then
@@ -88,14 +89,17 @@ ensure_port() {
 pipe_to_log() {
   local source="${1:-CLIENT}"
   local raw_log="${2:-}"
-  local line timestamp ts msg record
+  local line clean_line timestamp
   while IFS= read -r line || [ -n "$line" ]; do
+    clean_line=$(printf '%s' "$line" | sed 's/\x1b\[[0-9;]*[mA-Za-z]//g')
+    if echo "$clean_line" | grep -qE '(^(Web|iOS|Android) node_modules/.*expo-router.*entry\.js.*%|^(Web|iOS|Android) Bundled [0-9]+ms node_modules/.*expo-router.*entry\.js|Logs will appear in the browser)'; then
+      continue
+    fi
     if [ -n "$raw_log" ]; then
-      echo "$line" >> "$raw_log"
+      timestamp=$(date '+%Y-%m-%d %H:%M:%S')
+      echo "[$timestamp] $clean_line" >> "$raw_log"
     fi
-    line=$(echo "[$source] $line" | sed 's/\x1b\[[0-9;]*[a-zA-Z]//g; s/\x1b\[[0-9;]*m//g')
-    msg="${line}"
-    echo "$msg"
+    printf '[%s] %s\n' "$source" "$clean_line"
   done
 }
 
@@ -111,14 +115,14 @@ wait_port_connectable() {
 start_expo() {
   local offline="${1:-0}"
 
-  pushd ./client
+  pushd "$ROOT_DIR/client"
 
   if [ "$offline" = "1" ]; then
-    ( EXPO_OFFLINE=1 EXPO_NO_DOCTOR=1 EXPO_PUBLIC_BACKEND_BASE_URL="$EXPO_PUBLIC_BACKEND_BASE_URL" EXPO_PACKAGER_PROXY_URL="$EXPO_PACKAGER_PROXY_URL" \
-      nohup npx expo start --clear --port "$EXPO_PORT" 2>&1 | pipe_to_log "CLIENT" "../logs/client.log" ) &
+    ( EXPO_OFFLINE=1 EXPO_NO_DEPENDENCY_VALIDATION=1 EXPO_PUBLIC_BACKEND_BASE_URL="$EXPO_PUBLIC_BACKEND_BASE_URL" EXPO_PACKAGER_PROXY_URL="$EXPO_PACKAGER_PROXY_URL" EXPO_PUBLIC_COZE_PROJECT_ID="$EXPO_PUBLIC_COZE_PROJECT_ID" \
+      nohup npx expo start --clear --port "$EXPO_PORT" 2>&1 | pipe_to_log "CLIENT" "$LOG_CLIENT_FILE" ) &
   else
-    ( EXPO_NO_DOCTOR=1 EXPO_PUBLIC_BACKEND_BASE_URL="$EXPO_PUBLIC_BACKEND_BASE_URL" EXPO_PACKAGER_PROXY_URL="$EXPO_PACKAGER_PROXY_URL" \
-      nohup npx expo start --clear --port "$EXPO_PORT" 2>&1 | pipe_to_log "CLIENT" "../logs/client.log" ) &
+    ( EXPO_NO_DEPENDENCY_VALIDATION=1 EXPO_PUBLIC_BACKEND_BASE_URL="$EXPO_PUBLIC_BACKEND_BASE_URL" EXPO_PACKAGER_PROXY_URL="$EXPO_PACKAGER_PROXY_URL" EXPO_PUBLIC_COZE_PROJECT_ID="$EXPO_PUBLIC_COZE_PROJECT_ID" \
+      nohup npx expo start --clear --port "$EXPO_PORT" 2>&1 | pipe_to_log "CLIENT" "$LOG_CLIENT_FILE" ) &
   fi
   EXPO_PID=$!
   disown $EXPO_PID 2>/dev/null || true
@@ -129,9 +133,9 @@ start_expo() {
 detect_expo_fetch_failed() {
   local timeout="${1:-8}"
   local waited=0
-  local log_file="logs/client.log"
+  local log_file="$LOG_CLIENT_FILE"
   while [ "$waited" -lt "$timeout" ]; do
-    if [ -f "$log_file" ] && grep -q "TypeError: fetch failed" "$log_file" 2>/dev/null; then
+    if [ -f "$log_file" ] && tail -n 100 "$log_file" 2>/dev/null | grep -q "TypeError: fetch failed"; then
       return 0
     fi
     sleep 1
@@ -150,6 +154,12 @@ if [ -f "$PREVIEW_DIR/pre_install.py" ]; then
   python "$PREVIEW_DIR/pre_install.py" || echo "pre_install.py 执行失败"
 fi
 
+echo "检查根目录 post_install.py"
+if [ -f "$PREVIEW_DIR/post_install.py" ]; then
+  echo "执行：python $PREVIEW_DIR/post_install.py"
+  python "$PREVIEW_DIR/post_install.py" || echo "post_install.py 执行失败"
+fi
+
 echo "==================== 开始启动 ===================="
 echo "开始执行服务启动脚本（start_dev.sh）..."
 echo "正在检查依赖命令和目录是否存在..."
@@ -159,15 +169,13 @@ check_command "pnpm"
 check_command "lsof"
 check_command "bash"
 
-echo "准备日志目录：logs"
-mkdir -p logs
 # 端口占用预检查与处理
 ensure_port SERVER_PORT "$SERVER_PORT"
 ensure_port EXPO_PORT "$EXPO_PORT"
 
 echo "==================== 启动 server 服务 ===================="
-echo "正在执行：npm run dev"
-( PORT="$SERVER_PORT" nohup npm run dev --prefix ./server 2>&1 | pipe_to_log "SERVER" "logs/server.log" ) &
+echo "正在执行：pnpm run dev (server)"
+( pushd "$ROOT_DIR/server" > /dev/null && SERVER_PORT="$SERVER_PORT" nohup pnpm run dev; popd > /dev/null ) &
 SERVER_PID=$!
 disown $SERVER_PID 2>/dev/null || true
 if [ -z "${SERVER_PID}" ]; then
@@ -181,13 +189,14 @@ start_expo 0
 if detect_expo_fetch_failed 8; then
   echo "Expo 启动检测到网络错误：TypeError: fetch failed，启用离线模式重试"
   if [ -n "${EXPO_PID}" ]; then kill -9 "$EXPO_PID" 2>/dev/null || true; fi
-  : > logs/client.log
+  : > "$ROOT_DIR/logs/client.log"
   start_expo 1
 fi
 # 输出以下环境变量，确保 Expo 项目能正确连接到 Server 服务
 echo "Expo 环境变量配置："
 echo "EXPO_PUBLIC_BACKEND_BASE_URL=${EXPO_PUBLIC_BACKEND_BASE_URL}"
 echo "EXPO_PACKAGER_PROXY_URL=${EXPO_PACKAGER_PROXY_URL}"
+echo "EXPO_PUBLIC_COZE_PROJECT_ID=${EXPO_PUBLIC_COZE_PROJECT_ID}"
 if [ -z "${EXPO_PID}" ]; then
   echo "无法获取 Expo 后台进程 PID"
 fi

package/lib/__templates__/expo/.cozeproj/scripts/prod_build.sh

@@ -40,8 +40,8 @@ fi
 info "==================== 依赖安装完成！====================\n"
 
 info "==================== dist打包 ===================="
-info "开始执行：npm run build --prefix server"
-(cd "$ROOT_DIR" && npm run build --prefix ./server) || error "dist打包失败"
+info "开始执行：pnpm run build (server)"
+(pushd "$ROOT_DIR/server" > /dev/null && pnpm run build; popd > /dev/null) || error "dist打包失败"
 info "==================== dist打包完成！====================\n"
 
 info "下一步：执行 ./prod_run.sh 启动服务"

package/lib/__templates__/expo/.cozeproj/scripts/prod_run.sh

@@ -29,6 +29,6 @@ check_command() {
 check_command "pnpm"
 check_command "npm"
 
-info "开始执行：npm run start"
-(cd "$ROOT_DIR" && PORT="$PORT" npm run start --prefix ./server) || error "服务启动失败"
+info "开始执行：pnpm run start (server)"
+(pushd "$ROOT_DIR/server" > /dev/null && PORT="$PORT" pnpm run start; popd > /dev/null) || error "服务启动失败"
 info "服务启动完成！\n"

package/lib/__templates__/expo/.cozeproj/scripts/server_dev_run.sh

@@ -2,7 +2,25 @@
 
 ROOT_DIR="$(cd "$(dirname "$0")/../.." && pwd)"
 SERVER_DIR="$ROOT_DIR/server"
-SERVER_PORT="9091"
+LOG_DIR="${COZE_LOG_DIR:-$ROOT_DIR/logs}"
+LOG_SERVER_FILE="$LOG_DIR/server.log"
+SERVER_PORT="${SERVER_PORT:-9091}"
+
+mkdir -p "$LOG_DIR"
+
+pipe_to_log() {
+  local source="${1:-SERVER}"
+  local raw_log="${2:-}"
+  local line clean_line timestamp
+  while IFS= read -r line || [ -n "$line" ]; do
+    clean_line=$(printf '%s' "$line" | sed 's/\x1b\[[0-9;]*[mA-Za-z]//g')
+    if [ -n "$raw_log" ]; then
+      timestamp=$(date '+%Y-%m-%d %H:%M:%S')
+      echo "[$timestamp] $clean_line" >> "$raw_log"
+    fi
+    printf '[%s] %s\n' "$source" "$clean_line"
+  done
+}
 
 kill_old_server() {
   if command -v lsof &> /dev/null; then
@@ -19,9 +37,10 @@ kill_old_server() {
 echo "==================== Server Dev Run ===================="
 echo "Server 目录：$SERVER_DIR"
 echo "Server 端口：$SERVER_PORT"
+echo "日志文件：$LOG_SERVER_FILE"
 
 kill_old_server
 
 echo "启动 server 服务..."
 cd "$SERVER_DIR"
-NODE_ENV=development PORT="$SERVER_PORT" npx tsx ./src/index.ts
+NODE_ENV=development PORT="$SERVER_PORT" npx tsx watch ./src/index.ts 2>&1 | pipe_to_log "SERVER" "$LOG_SERVER_FILE"

package/lib/__templates__/expo/README.md

@@ -1,6 +1,6 @@
 # Expo App + Express.js
 
-## 目录结构规范（严格遵循）
+## 目录结构规范
 
 当前仓库是一个 monorepo（基于 pnpm 的 workspace）
 
@@ -15,23 +15,31 @@
 |   └── package.json            # 服务端 package.json
 ├── client/                     # React Native 前端代码
 │   ├── app/                    # Expo Router 路由目录（仅路由配置）
-│   │   ├── _layout.tsx         # 根布局文件（必需）
-│   │   ├── home.tsx            # 首页
-│   │   └── index.tsx           # re-export home.tsx
+│   │   ├── _layout.tsx         # 根布局文件（必需，务必阅读）
+│   │   └── index.tsx           # 首页
 │   ├── screens/                # 页面实现目录（与 app/ 路由对应）
-│   │   └── home/
-│   │       ├── index.tsx       # 页面组件实现
-│   │       └── styles.ts       # 页面样式
+│   │   └── demo/
+│   │       └── index.tsx       # demo 示例页面（默认首页，不需要可以删除，记得同时更新路由文件）
 │   ├── components/             # 可复用组件
 │   │   └── Screen.tsx          # 页面容器组件（必用）
 │   ├── hooks/                  # 自定义 Hooks
 │   ├── contexts/               # React Context 代码
+│   ├── utils/                  # 工具函数
 │   ├── assets/                 # 静态资源
 |   └── package.json            # Expo 应用 package.json
 ├── package.json
 ├── .cozeproj                   # 预置脚手架脚本（禁止修改）
 └── .coze                       # 配置文件（禁止修改）
 
+## 技术选型（严格遵循）
+
+- 前端：Expo + React Native + TailwindCSS
+- 后端：Express.js
+
+本项目通过 uniwind 实现了 react-native 对 TailwindCSS v4 的支持，在编写样式时应使用 TailwindCSS 写法
+
+在开始开发前，先查看 client/global.css 了解必要的信息
+
 ## 安装依赖
 
 ### 命令
@@ -40,15 +48,6 @@
 pnpm i
 ```
 
-### 新增依赖约束
-
-如果需要新增依赖，需在 client 和 server 各自的目录添加（原因：隔离前后端的依赖），禁止在根目录直接安装依赖
-
-### 新增依赖标准流程
-
-- 编辑 `client/package.json` 或 `server/package.json`
-- 在根目录执行 `pnpm i`
-
 ## Expo 开发规范
 
 ### 路径别名
@@ -63,27 +62,6 @@ import { Screen } from '@/components/Screen';
 import { Screen } from '../../../components/Screen';
 ```
 
-## Server 开发规范
-
-服务端是一个 Node.js 项目，基于 ESM 规范开发，在引用相对路径时，需要加上明确的后缀名
-
-错误的做法
-
-```ts
-import file from './file'
-import folder from './folder'
-import isoWeek from 'dayjs/plugin/isoWeek'
-```
-
-正确的做法
-
-```ts
-import file from './file.ts'
-import folder from './folder/index.ts'
-// 如果是来自 npm 包某个具体路径的引用，如果实际路径为 .js，则使用 .js 后缀
-import isoWeek from 'dayjs/plugin/isoWeek.js'
-```
-
 ## 本地开发
 
 运行 coze dev 可以同时启动前端和后端服务，如果端口已占用，该命令会先杀掉占用端口的进程再启动，也可以用来重启前端和后端服务

package/lib/__templates__/expo/client/app/+not-found.tsx

@@ -0,0 +1,15 @@
+import { View, Text } from 'react-native';
+import { Link } from 'expo-router';
+
+export default function NotFoundScreen() {
+  return (
+    <View className="flex-1 justify-center items-center bg-background">
+      <Text className="text-foreground">
+        页面不存在
+      </Text>
+      <Link href="/" className="text-accent mt-6">
+        返回首页
+      </Link>
+    </View>
+  );
+}

package/lib/__templates__/expo/client/app/_layout.tsx

@@ -6,6 +6,8 @@ import { LogBox } from 'react-native';
 import Toast from 'react-native-toast-message';
 import { AuthProvider } from "@/contexts/AuthContext";
 
+import '../global.css';
+
 LogBox.ignoreLogs([
   "TurboModuleRegistry.getEnforcing(...): 'RNMapsAirModule' could not be found",
   // 添加其它想暂时忽略的错误或警告信息
@@ -15,18 +17,18 @@ export default function RootLayout() {
   return (
     <AuthProvider>
       <GestureHandlerRootView style={{ flex: 1 }}>
-          <StatusBar style="dark"></StatusBar>
-          <Stack screenOptions={{
-              // 设置所有页面的切换动画为从右侧滑入，适用于iOS 和 Android
-              animation: 'slide_from_right',
-              gestureEnabled: true,
-              gestureDirection: 'horizontal',
-              // 隐藏自带的头部
-              headerShown: false
-          }}>
-            <Stack.Screen name="index" options={{ title: "" }} />
-          </Stack>
-          <Toast />
+        <StatusBar style="dark"></StatusBar>
+        <Stack screenOptions={{
+          // 设置所有页面的切换动画为从右侧滑入，适用于iOS 和 Android
+          animation: 'slide_from_right',
+          gestureEnabled: true,
+          gestureDirection: 'horizontal',
+          // 隐藏自带的头部
+          headerShown: false
+        }}>
+          <Stack.Screen name="index" options={{ title: "" }} />
+        </Stack>
+        <Toast />
       </GestureHandlerRootView>
     </AuthProvider>
   );

package/lib/__templates__/expo/client/app.config.ts

@@ -1,7 +1,7 @@
 import { ExpoConfig, ConfigContext } from 'expo/config';
 
-const appName = process.env.EXPO_PUBLIC_COZE_PROJECT_NAME || '应用';
-const projectId = process.env.EXPO_PUBLIC_COZE_PROJECT_ID;
+const appName = process.env.COZE_PROJECT_NAME || process.env.EXPO_PUBLIC_COZE_PROJECT_NAME || '应用';
+const projectId = process.env.COZE_PROJECT_ID || process.env.EXPO_PUBLIC_COZE_PROJECT_ID;
 const slugAppName = projectId ? `app${projectId}` : 'myapp';
 
 export default ({ config }: ConfigContext): ExpoConfig => {

package/lib/__templates__/expo/client/components/Screen.tsx

@@ -197,26 +197,10 @@ export const Screen = ({
   // 强制禁用 iOS 自动调整内容区域，完全由手动 padding 控制，消除系统自动计算带来的多余空白
   const contentInsetBehaviorIOS = 'never';
 
-  // 1. 外层容器样式
-  // 负责：背景色、Top/Left/Right 安全区、以及非滚动模式下的 Bottom 安全区
-  const childArray = React.Children.toArray(children);
-  let firstChild: React.ReactElement<any, any> | null = null;
-  for (let i = 0; i < childArray.length; i++) {
-    const el = childArray[i];
-    if (React.isValidElement(el)) { firstChild = el as React.ReactElement<any, any>; break; }
-  }
-  const firstChildHasInlinePaddingTop = (() => {
-    if (!firstChild) return false;
-    const st: any = (firstChild as any).props?.style;
-    const arr = Array.isArray(st) ? st : st ? [st] : [];
-    return arr.some((s) => s && typeof s === 'object' && typeof (s as any).paddingTop === 'number' && (s as any).paddingTop > 10);
-  })();
-  const applyTopInset = hasTop && !firstChildHasInlinePaddingTop;
-
   const wrapperStyle: ViewStyle = {
     flex: 1,
     backgroundColor,
-    paddingTop: applyTopInset ? insets.top : 0,
+    paddingTop: hasTop ? insets.top : 0,
     paddingLeft: hasLeft ? insets.left : 0,
     paddingRight: hasRight ? insets.right : 0,
     // 当页面不使用外层 ScrollView 时（子树本身可滚动），由外层 View 负责底部安全区

package/lib/__templates__/expo/client/components/ThemedView.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { View, ViewProps, ViewStyle } from 'react-native';
 import { useTheme } from '@/hooks/useTheme';
 
-type BackgroundLevel = 'root' | 'default' | 'secondary' | 'tertiary';
+type BackgroundLevel = 'root' | 'default' | 'tertiary';
 
 interface ThemedViewProps extends ViewProps {
   level?: BackgroundLevel;
@@ -12,7 +12,6 @@ interface ThemedViewProps extends ViewProps {
 const backgroundMap: Record<BackgroundLevel, string> = {
   root: 'backgroundRoot',
   default: 'backgroundDefault',
-  secondary: 'backgroundSecondary',
   tertiary: 'backgroundTertiary',
 };
 

package/lib/__templates__/expo/client/declarations.d.ts

@@ -0,0 +1,5 @@
+// declarations.d.ts
+
+declare module 'expo-file-system/legacy' {
+  export * from 'expo-file-system';
+}

package/lib/__templates__/expo/client/eslint.config.mjs

@@ -1,10 +1,13 @@
-import js from "@eslint/js";
-import globals from "globals";
-import tseslint from "typescript-eslint";
-import pluginReact from "eslint-plugin-react";
-import reactHooks from "eslint-plugin-react-hooks";
-import regexp from "eslint-plugin-regexp";
-import pluginImport from "eslint-plugin-import";
+import js from '@eslint/js';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+import pluginReact from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import regexp from 'eslint-plugin-regexp';
+import pluginImport from 'eslint-plugin-import';
+import fontawesome6 from '../eslint-plugins/fontawesome6/index.js';
+import reanimated from '../eslint-plugins/reanimated/index.js';
+import reactnative from '../eslint-plugins/react-native/index.js';
 
 export default [
   {
@@ -15,19 +18,21 @@ export default [
       'src/api/**',       // 排除 src 下的自动生成 API
       '.expo/**',         // 排除 Expo 自动生成的文件
       'tailwind.config.js', // 排除 Tailwind 配置文件
+      '**/*.d.ts',
+      'eslint.config.*',
     ],
   },
   regexp.configs["flat/recommended"],
   js.configs.recommended,
   ...tseslint.configs.recommended,
-  
+
   // React 的推荐配置
   pluginReact.configs.flat.recommended,
   pluginReact.configs.flat['jsx-runtime'],
   reactHooks.configs.flat.recommended,
   {
     files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
-    
+
     // 语言选项：设置全局变量
     languageOptions: {
       globals: {
@@ -52,6 +57,9 @@ export default [
 
     plugins: {
       import: pluginImport,
+      fontawesome6,
+      reanimated,
+      reactnative,
     },
     rules: {
       // 关闭代码风格规则
@@ -70,6 +78,21 @@ export default [
       'no-prototype-builtins': 'off',
       'react/react-in-jsx-scope': 'off',
       'react/jsx-uses-react': 'off',
+      'fontawesome6/valid-name': 'error',
+      'reanimated/ban-mix-use': 'error',
+      // 禁止使用 via.placeholder.com 服务
+      'no-restricted-syntax': [
+        'error',
+        {
+          'selector': 'Literal[value=/via\\.placeholder\\.com/]',
+          'message': 'via.placeholder.com 服务不可用，禁止在代码中使用',
+        },
+        {
+          'selector': 'TemplateLiteral > TemplateElement[value.raw=/via\\.placeholder\\.com/]',
+          'message': 'via.placeholder.com 服务不可用，禁止在代码中使用',
+        },
+      ],
+      'reactnative/wrap-horizontal-scrollview-inside-view': ['error'],
     },
   },
 
@@ -91,7 +114,7 @@ export default [
       // 在 .js 文件中关闭 TS 规则
       '@typescript-eslint/no-require-imports': 'off',
       // 在 Node.js 文件中允许 require
-      '@typescript-eslint/no-var-requires': 'off', 
+      '@typescript-eslint/no-var-requires': 'off',
       'no-undef': 'off',
     },
   },

package/lib/__templates__/expo/client/global.css

@@ -0,0 +1,78 @@
+@import 'tailwindcss';
+@import 'uniwind';
+
+@import './styles';
+
+:root,
+.light,
+.default,
+[data-theme="light"],
+[data-theme="default"] {
+  /* Theme Colors (Light Mode) */
+  --accent: oklch(55.00% 0.2500 254.00);
+  --accent-foreground: oklch(99.11% 0 0);
+  --background: oklch(97.02% 0.0040 254.00);
+  --border: oklch(90.00% 0.0040 254.00);
+  --danger: oklch(65.32% 0.2347 25.76);
+  --danger-foreground: oklch(99.11% 0 0);
+  --default: oklch(94.00% 0.0040 254.00);
+  --default-foreground: oklch(21.03% 0.0059 254.00);
+  --field-background: oklch(100.00% 0.0020 254.00);
+  --field-foreground: oklch(21.03% 0.0059 254.00);
+  --field-placeholder: oklch(55.17% 0.0081 254.00);
+  --focus: oklch(55.00% 0.2500 254.00);
+  --foreground: oklch(21.03% 0.0059 254.00);
+  --muted: oklch(55.17% 0.0081 254.00);
+  --overlay: oklch(100.00% 0.0012 254.00);
+  --overlay-foreground: oklch(21.03% 0.0059 254.00);
+  --scrollbar: oklch(87.10% 0.0040 254.00);
+  --segment: oklch(100.00% 0.0040 254.00);
+  --segment-foreground: oklch(21.03% 0.0059 254.00);
+  --separator: oklch(92.00% 0.0040 254.00);
+  --success: oklch(73.29% 0.1951 150.83);
+  --success-foreground: oklch(21.03% 0.0059 150.83);
+  --surface: oklch(100.00% 0.0020 254.00);
+  --surface-foreground: oklch(21.03% 0.0059 254.00);
+  --warning: oklch(78.19% 0.1598 72.35);
+  --warning-foreground: oklch(21.03% 0.0059 72.35);
+
+  /* Border Radius */
+  --radius: 0.75rem;
+  --field-radius: 0.5rem;
+
+  /* Font Family */
+  /* Make sure to load Google Sans font in your app */
+  --font-sans: var(--font-google-sans);
+}
+
+.dark,
+[data-theme="dark"] {
+  color-scheme: dark;
+  /* Theme Colors (Dark Mode) */
+  --accent: oklch(55.00% 0.2500 254.00);
+  --accent-foreground: oklch(99.11% 0 0);
+  --background: oklch(12.00% 0.0040 254.00);
+  --border: oklch(28.00% 0.0040 254.00);
+  --danger: oklch(59.40% 0.1983 24.65);
+  --danger-foreground: oklch(99.11% 0 0);
+  --default: oklch(27.40% 0.0040 254.00);
+  --default-foreground: oklch(99.11% 0 0);
+  --field-background: oklch(21.03% 0.0081 254.00);
+  --field-foreground: oklch(99.11% 0.0000 0.00);
+  --field-placeholder: oklch(70.50% 0.0081 254.00);
+  --focus: oklch(55.00% 0.2500 254.00);
+  --foreground: oklch(99.11% 0.0000 0.00);
+  --muted: oklch(70.50% 0.0081 254.00);
+  --overlay: oklch(21.03% 0.0081 254.00);
+  --overlay-foreground: oklch(99.11% 0.0000 0.00);
+  --scrollbar: oklch(70.50% 0.0040 254.00);
+  --segment: oklch(39.64% 0.0040 254.00);
+  --segment-foreground: oklch(99.11% 0.0000 0.00);
+  --separator: oklch(25.00% 0.0040 254.00);
+  --success: oklch(73.29% 0.1951 150.83);
+  --success-foreground: oklch(21.03% 0.0059 150.83);
+  --surface: oklch(21.03% 0.0081 254.00);
+  --surface-foreground: oklch(99.11% 0.0000 0.00);
+  --warning: oklch(82.03% 0.1399 76.36);
+  --warning-foreground: oklch(21.03% 0.0059 76.36);
+}