feat: 优化页面主题为亮蓝色系，增加色彩丰富度

src/App.svelte

@@ -232,45 +232,45 @@
 <Toast />
 
 {#if isInitializing}
-  <div class="min-h-screen flex items-center justify-center bg-gray-100">
+  <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-sky-50 via-blue-50 to-cyan-50">
     <div class="text-center">
-      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto"></div>
-      <p class="mt-4 text-gray-600">加载中...</p>
+      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-sky-500 mx-auto"></div>
+      <p class="mt-4 text-sky-700">加载中...</p>
     </div>
   </div>
 {:else if !isAuthenticated}
-  <div class="min-h-screen flex items-center justify-center bg-gray-100" transition:fade>
-    <div class="w-[480px] space-y-8 p-8 bg-white rounded-lg shadow-lg">
+  <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-sky-50 via-blue-50 to-cyan-50" transition:fade>
+    <div class="w-[480px] space-y-8 p-8 bg-white/90 backdrop-blur-sm rounded-xl shadow-xl border border-sky-100">
       <div>
-        <h2 class="text-center text-3xl font-extrabold text-gray-900">
+        <h2 class="text-center text-3xl font-extrabold bg-gradient-to-r from-sky-600 to-blue-600 bg-clip-text text-transparent">
           我的评分
         </h2>
-        <p class="mt-2 text-center text-sm text-gray-600">
+        <p class="mt-2 text-center text-sm text-sky-600">
           登录你的账号
         </p>
       </div>
       <form class="mt-8 space-y-6" onsubmit={handleLogin}>
         <div class="space-y-4">
           <div>
-            <label for="username" class="block text-sm font-medium text-gray-700">用户名</label>
+            <label for="username" class="block text-sm font-medium text-sky-700">用户名</label>
             <input
               id="username"
               name="username"
               type="text"
               required
-              class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+              class="mt-1 block w-full px-3 py-2 border border-sky-200 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 sm:text-sm bg-white/50"
               placeholder="请输入用户名"
               bind:value={username}
             />
           </div>
           <div>
-            <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
+            <label for="password" class="block text-sm font-medium text-sky-700">密码</label>
             <input
               id="password"
               name="password"
               type="password"
               required
-              class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+              class="mt-1 block w-full px-3 py-2 border border-sky-200 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 sm:text-sm bg-white/50"
               placeholder="请输入密码"
               bind:value={password}
             />
@@ -286,7 +286,7 @@
         <div>
           <button
             type="submit"
-            class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+            class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gradient-to-r from-sky-500 to-blue-500 hover:from-sky-600 hover:to-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500 transition-all duration-200"
           >
             登录
           </button>
@@ -295,16 +295,16 @@
     </div>
   </div>
 {:else}
-  <div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100" transition:fade>
+  <div class="min-h-screen bg-gradient-to-br from-sky-50 via-blue-50 to-cyan-50" transition:fade>
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <!-- 类别选择栏 -->
-      <div class="bg-white/80 backdrop-blur-sm shadow-sm rounded-xl mb-6 border border-gray-200">
+      <div class="bg-white/80 backdrop-blur-sm shadow-sm rounded-xl mb-6 border border-sky-200/50">
         <div class="px-6 py-4">
           <div class="flex justify-between items-center">
             <div class="flex space-x-4">
               {#each categories as category}
                 <button
-                  class="px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 {currentCategory === category.id ? 'bg-gradient-to-r from-indigo-500 to-indigo-600 text-white shadow-sm' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
+                  class="px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 {currentCategory === category.id ? 'bg-gradient-to-r from-sky-500 to-blue-500 text-white shadow-md shadow-sky-200' : 'bg-sky-50 text-sky-700 hover:bg-sky-100 border border-sky-200/50'}"
                   onclick={() => {
                     currentCategory = category.id;
                     currentPage = 1;
@@ -316,7 +316,7 @@
               {/each}
             </div>
             <button
-              class="px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-indigo-500 to-indigo-600 rounded-lg hover:from-indigo-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-200 shadow-sm hover:shadow-md"
+              class="px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-sky-500 to-blue-500 rounded-lg hover:from-sky-600 hover:to-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500 transition-all duration-200 shadow-md shadow-sky-200 hover:shadow-lg"
               onclick={() => showCreateModal = true}
             >
               添加新作品
@@ -326,11 +326,11 @@
       </div>
 
       <!-- 媒体列表 -->
-      <div class="bg-white/80 backdrop-blur-sm shadow-sm rounded-xl border border-gray-200">
+      <div class="bg-white/80 backdrop-blur-sm shadow-sm rounded-xl border border-sky-200/50">
         <div class="px-6 py-4">
           {#if loading}
             <div class="text-center py-8">
-              <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600 mx-auto"></div>
+              <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-sky-500 mx-auto"></div>
             </div>
           {:else}
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -346,7 +346,7 @@
               </div>
               <div class="flex items-center space-x-1">
                 <button
-                  class="px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 {currentPage === 1 ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 hover:bg-gray-50 border border-gray-200 shadow-sm hover:shadow-md'}"
+                  class="px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 {currentPage === 1 ? 'bg-sky-100 text-sky-300 cursor-not-allowed' : 'bg-white text-sky-700 hover:bg-sky-50 border border-sky-200 shadow-sm hover:shadow-md'}"
                   disabled={currentPage === 1}
                   onclick={() => {
                     currentPage = currentPage - 1;
@@ -357,10 +357,10 @@
                 </button>
                 {#each pageNumbers as num, i}
                   {#if num === '...'}
-                    <span class="px-2 text-gray-400 select-none">...</span>
+                    <span class="px-2 text-sky-400 select-none">...</span>
                   {:else}
                     <button
-                      class="px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 {currentPage === num ? 'bg-indigo-500 text-white shadow-sm' : 'bg-white text-gray-700 hover:bg-gray-50 border border-gray-200 shadow-sm hover:shadow-md'}"
+                      class="px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 {currentPage === num ? 'bg-gradient-to-r from-sky-500 to-blue-500 text-white shadow-md shadow-sky-200' : 'bg-white text-sky-700 hover:bg-sky-50 border border-sky-200 shadow-sm hover:shadow-md'}"
                       disabled={typeof num === 'number' ? currentPage === num : false}
                       onclick={() => {
                         if (typeof num === 'number') {
@@ -374,7 +374,7 @@
                   {/if}
                 {/each}
                 <button
-                  class="px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 {currentPage * pageSize >= totalItems ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 hover:bg-gray-50 border border-gray-200 shadow-sm hover:shadow-md'}"
+                  class="px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 {currentPage * pageSize >= totalItems ? 'bg-sky-100 text-sky-300 cursor-not-allowed' : 'bg-white text-sky-700 hover:bg-sky-50 border border-sky-200 shadow-sm hover:shadow-md'}"
                   disabled={currentPage * pageSize >= totalItems}
                   onclick={() => {
                     currentPage = currentPage + 1;

src/app.css

@@ -19,11 +19,11 @@
 
 a {
   font-weight: 500;
-  color: #646cff;
+  color: #3b82f6;
   text-decoration: inherit;
 }
 a:hover {
-  color: #535bf2;
+  color: #60a5fa;
 }
 
 body {
@@ -61,7 +61,7 @@ button {
   transition: border-color 0.25s;
 }
 button:hover {
-  border-color: #646cff;
+  border-color: #3b82f6;
 }
 button:focus,
 button:focus-visible {
@@ -74,7 +74,7 @@ button:focus-visible {
     background-color: #ffffff;
   }
   a:hover {
-    color: #747bff;
+    color: #60a5fa;
   }
   button {
     background-color: #f9f9f9;

src/lib/MediaFormModal.svelte

@@ -50,19 +50,19 @@
 
 {#if show}
   <div 
-    class="fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center z-50" 
+    class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50" 
     transition:fade={{ duration: 200 }}
     onclick={handleClose}
     role="presentation"
   >
     <div 
-      class="bg-gradient-to-br from-white to-gray-50 rounded-xl p-6 w-full mx-4 max-w-[800px] shadow-2xl"
+      class="bg-gradient-to-br from-white via-sky-50/80 to-blue-50/80 backdrop-blur-md rounded-xl p-6 w-full mx-4 max-w-[800px] shadow-2xl border border-sky-100/50"
       transition:scale={{ duration: 200 }}
       onclick={(e) => e.stopPropagation()}
       role="presentation"
     >
       <div class="flex justify-between items-center mb-6">
-        <h2 id="modal-title" class="text-xl font-semibold bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent">
+        <h2 id="modal-title" class="text-xl font-semibold bg-gradient-to-r from-sky-600 to-blue-600 bg-clip-text text-transparent">
           {mode === 'add' ? '添加新作品' : '编辑作品'}
         </h2>
         <button 
@@ -79,12 +79,12 @@
 
       <form onsubmit={handleSubmit} class="space-y-4">
         <div class="flex justify-between items-center gap-6">
-          <label class="font-medium text-gray-700 whitespace-nowrap" for="title">标题</label>
+          <label class="font-medium text-sky-700 whitespace-nowrap" for="title">标题</label>
           <input
             id="title"
             type="text"
             bind:value={media.title}
-            class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white/50 backdrop-blur-sm transition-all duration-200"
+            class="w-full px-3 py-2 border border-sky-200 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500 bg-white/90 backdrop-blur-sm transition-all duration-200"
             placeholder="请输入标题"
             required
             aria-required="true"
@@ -92,11 +92,11 @@
         </div>
 
         <div class="flex justify-between items-center gap-6">
-          <label class="font-medium text-gray-700 whitespace-nowrap" for="type">类别</label>
+          <label class="font-medium text-sky-700 whitespace-nowrap" for="type">类别</label>
           <select
             id="type"
             bind:value={media.type}
-            class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white/50 backdrop-blur-sm transition-all duration-200"
+            class="w-full px-3 py-2 border border-sky-200 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500 bg-white/90 backdrop-blur-sm transition-all duration-200"
             required
             aria-required="true"
           >
@@ -107,7 +107,7 @@
         </div>
 
         <div class="flex justify-between items-center gap-6">
-          <label class="font-medium text-gray-700 whitespace-nowrap" for="date">日期</label>
+          <label class="font-medium text-sky-700 whitespace-nowrap" for="date">日期</label>
           <DatePicker
             value={media.date}
             onSelect={(date: string) => media.date = date}
@@ -116,7 +116,7 @@
         </div>
 
         <div class="flex start items-center gap-6">
-          <label for="score" class="font-medium text-gray-700 whitespace-nowrap">评分</label>
+          <label for="score" class="font-medium text-sky-700 whitespace-nowrap">评分</label>
           <StarRating
             value={media.rating}
             onSelect={(score: number) => media.rating = score}
@@ -124,25 +124,25 @@
         </div>
         {#if media.type === 'game' || media.type === 'other'}
           <div class="flex justify-between items-center gap-6">
-            <label class="font-medium text-gray-700 whitespace-nowrap" for="platform">{
+            <label class="font-medium text-sky-700 whitespace-nowrap" for="platform">{
               media.type === 'game' ? '平台' : '类别'
             }</label>
             <input
               id="platform"
               type="text"
               bind:value={media.platform}
-              class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white/50 backdrop-blur-sm transition-all duration-200"
+              class="w-full px-3 py-2 border border-sky-200 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500 bg-white/90 backdrop-blur-sm transition-all duration-200"
               placeholder="例如：Steam、Netflix、Kindle等"
               aria-label="输入平台名称"
             />
           </div>
         {/if}
         <div class="flex justify-between items-center gap-6">
-          <label class="font-medium text-gray-700 whitespace-nowrap" for="notes">备注</label>
+          <label class="font-medium text-sky-700 whitespace-nowrap" for="notes">备注</label>
           <textarea
             id="notes"
             bind:value={media.notes}
-            class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white/50 backdrop-blur-sm transition-all duration-200"
+            class="w-full px-3 py-2 border border-sky-200 rounded-lg focus:ring-2 focus:ring-sky-500 focus:border-sky-500 bg-white/90 backdrop-blur-sm transition-all duration-200"
             rows="10"
             placeholder="添加一些备注..."
             aria-label="添加备注信息"
@@ -153,7 +153,7 @@
         <div class="flex justify-end gap-3 mt-6">
           <button
             type="button"
-            class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-all duration-200"
+            class="px-4 py-2 text-sm font-medium text-sky-700 bg-sky-100 rounded-lg hover:bg-sky-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500 transition-all duration-200"
             onclick={handleClose}
           >
             取消
@@ -161,7 +161,7 @@
           <button
             type="button"
             onclick={() => submitMedia(media)}
-            class="px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-indigo-500 to-indigo-600 rounded-lg hover:from-indigo-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-200 shadow-sm hover:shadow-md"
+            class="px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-sky-500 to-blue-500 rounded-lg hover:from-sky-600 hover:to-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500 transition-all duration-200 shadow-md shadow-sky-200 hover:shadow-lg"
           >
             {mode === 'add' ? '添加' : '保存'}
           </button>

src/lib/MediaItem.svelte

@@ -6,7 +6,7 @@
   import { StarRating } from './utils';
 </script>
 
-<div class="bg-white/90 backdrop-blur-sm rounded-xl shadow-[0_2px_8px_-2px_rgba(0,0,0,0.1)] hover:shadow-[0_4px_12px_-4px_rgba(0,0,0,0.15)] transition-all duration-200 border border-gray-100/50 overflow-hidden">
+<div class="bg-white/90 backdrop-blur-sm rounded-xl shadow-[0_2px_8px_-2px_rgba(59,130,246,0.1)] hover:shadow-[0_4px_12px_-4px_rgba(59,130,246,0.2)] transition-all duration-200 border border-sky-100/50 overflow-hidden">
   <div class="p-6">
     <div class="flex justify-between items-center mb-1">
       <span>
@@ -20,7 +20,7 @@
       <div class="flex items-center gap-2">
         <button
           onclick={() => onEdit(media)}
-          class="text-gray-400 hover:text-indigo-400 transition-colors duration-200"
+          class="text-gray-400 hover:text-sky-500 transition-colors duration-200"
           aria-label="编辑"
         >
           <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">

src/routes/+layout.svelte

@@ -2,6 +2,6 @@
   import '../app.css';
 </script>
 
-<div class="min-h-screen bg-gray-100">
+<div class="min-h-screen bg-gradient-to-br from-sky-50 via-blue-50 to-cyan-50">
   <slot />
 </div> 

tailwind.config.js

@@ -1,8 +1,23 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ['./src/**/*.{html,js,svelte,ts}'],
+  content: ["./src/**/*.{html,js,svelte,ts}"],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        "bright-blue": {
+          50: "#eff6ff",
+          100: "#dbeafe",
+          200: "#bfdbfe",
+          300: "#93c5fd",
+          400: "#60a5fa",
+          500: "#3b82f6",
+          600: "#2563eb",
+          700: "#1d4ed8",
+          800: "#1e40af",
+          900: "#1e3a8a",
+        },
+      },
+    },
   },
   plugins: [],
-} 
+};