diff --git a/.gitignore b/.gitignore
index a56dfa5..93f61c6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -58,14 +58,14 @@ Thumbs.db
 *.temp
 .cache/
 
-# Frontend specific
+# Frontend specific (React + Vite)
 frontend/dist/
 frontend/node_modules/
 frontend/.env
 frontend/.env.local
 frontend/.env.*.local
 
-# Backend specific
+# Backend specific (NestJS)
 backend/dist/
 backend/node_modules/
 backend/.env
@@ -73,7 +73,7 @@ backend/.env.local
 backend/.env.*.local
 backend/test-game-server.js
 
-# Package manager files
+# Package manager lock files
 package-lock.json
 yarn.lock
 pnpm-lock.yaml
diff --git a/frontend/src/components/PlayerLayout.tsx b/frontend/src/components/PlayerLayout.tsx
index e157099..3155a3d 100644
--- a/frontend/src/components/PlayerLayout.tsx
+++ b/frontend/src/components/PlayerLayout.tsx
@@ -1,4 +1,4 @@
-import { Layout, Menu, Button, Dropdown } from 'antd';
+import { Layout, Menu, Button, Dropdown, theme } from 'antd';
 import {
   HomeOutlined,
   UserOutlined,
@@ -12,6 +12,9 @@ import { playerAuthService } from '../services/playerAuthService';
 const { Header, Content, Footer } = Layout;
 
 const PlayerLayout = () => {
+  const {
+    token: { colorBgContainer, colorBgLayout },
+  } = theme.useToken();
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -55,7 +58,7 @@ const PlayerLayout = () => {
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
-          background: '#001529',
+          background: colorBgLayout,
           padding: '0 24px',
         }}
       >
@@ -93,7 +96,7 @@ const PlayerLayout = () => {
         style={{
           padding: '24px 50px',
           minHeight: 'calc(100vh - 128px)',
-          background: '#f0f2f5',
+          background: colorBgContainer,
         }}
       >
         <div style={{ padding: 24, minHeight: 380, background: 'white', borderRadius: 8 }}>
@@ -103,7 +106,7 @@ const PlayerLayout = () => {
       <Footer
         style={{
           textAlign: 'center',
-          background: '#001529',
+          background: colorBgLayout,
           color: 'rgba(255, 255, 255, 0.65)',
         }}
       >
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index c7a3572..888740f 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,14 +1,21 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
-import { ConfigProvider } from 'antd';
+import { ConfigProvider, theme } from 'antd';
 import zhCN from 'antd/locale/zh_CN';
 import './index.css';
 import router from './router';
+import { appTheme } from './theme';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <ConfigProvider locale={zhCN}>
+    <ConfigProvider 
+      locale={zhCN} 
+      theme={{
+        algorithm: theme.defaultAlgorithm,
+        ...appTheme,
+      }}
+    >
       <RouterProvider router={router} />
     </ConfigProvider>
   </StrictMode>,
diff --git a/frontend/src/theme/index.ts b/frontend/src/theme/index.ts
new file mode 100644
index 0000000..98a21d6
--- /dev/null
+++ b/frontend/src/theme/index.ts
@@ -0,0 +1,39 @@
+// 全局主题配置
+import type { ThemeConfig } from 'antd';
+
+// 自定义主题配置
+export const appTheme: ThemeConfig = {
+  token: {
+    // 主色调
+    colorPrimary: '#1890ff',
+    colorSuccess: '#52c41a',
+    colorWarning: '#faad14',
+    colorError: '#ff4d4f',
+    colorInfo: '#1890ff',
+    
+    // 字体设置
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    fontSize: 14,
+    
+    // 圆角
+    borderRadius: 6,
+  },
+  
+  components: {
+    // Layout 组件主题
+    Layout: {
+      headerBg: '#001529', // 顶部导航和侧边栏背景色
+      footerBg: '#001529', // 页脚背景色
+      siderBg: '#001529', // 侧边栏背景色
+    },
+    
+    // Menu 组件主题
+    Menu: {
+      darkItemSelectedBg: '#1890ff', // 菜单激活背景色
+      darkItemHoverBg: 'rgba(24, 144, 255, 0.2)', // 菜单悬停背景色
+      darkItemColor: 'rgba(255, 255, 255, 0.65)', // 菜单项文字颜色
+      darkItemSelectedColor: '#fff', // 菜单激活文字颜色
+      darkItemHoverColor: '#fff', // 菜单悬停文字颜色
+    },
+  },
+};