diff --git a/packages/materialDesign3ThemeBuilder/README.md b/packages/materialDesign3ThemeBuilder/README.md
index 6983ea9..617c518 100644
--- a/packages/materialDesign3ThemeBuilder/README.md
+++ b/packages/materialDesign3ThemeBuilder/README.md
@@ -4,7 +4,7 @@
 
 Material Design 3 (MD3) 主题配置提供了一套完整的接口定义，用于构建符合MD3设计规范的主题。这包括颜色调色板、亮色和暗色模式的颜色方案等。
 
-### 代码示例
+## 代码示例
 
 ```typescript
 import { generateTheme } from './generateTheme';
@@ -22,7 +22,7 @@ const theme = generateTheme({
 });
 ```
 
-### 返回值
+## 返回值
 
 生成的主题对象包含以下属性：
 
@@ -38,91 +38,156 @@ const theme = generateTheme({
 
 ### 主色（Primary）
 
-| 属性名称           | 描述                           |
-| ------------------ | ------------------------------ |
-| primary            | 主色                           |
-| onPrimary          | 主色上的文本和图标颜色         |
-| primaryContainer   | 主色容器颜色                   |
-| onPrimaryContainer | 主色容器颜色上的文本和图标颜色 |
+| 属性名称           | 描述                           | 用途                             |
+| ------------------ | ------------------------------ | -------------------------------- |
+| primary            | 主色                           | 用于按钮、开关等主色调背景       |
+| onPrimary          | 主色上的文本和图标颜色         | 用于主色调背景上的文本和图标     |
+| primaryContainer   | 主色容器颜色                   | 用于卡片、对话框等主色调背景     |
+| onPrimaryContainer | 主色容器颜色上的文本和图标颜色 | 用于主色调容器背景上的文本和图标 |
 
 ### 次色（Secondary）
 
-| 属性名称             | 描述                           |
-| -------------------- | ------------------------------ |
-| secondary            | 次色                           |
-| onSecondary          | 次色上的文本和图标颜色         |
-| secondaryContainer   | 次色容器颜色                   |
-| onSecondaryContainer | 次色容器颜色上的文本和图标颜色 |
+| 属性名称             | 描述                           | 用途                             |
+| -------------------- | ------------------------------ | -------------------------------- |
+| secondary            | 次色                           | 用于按钮、开关等次色调背景       |
+| onSecondary          | 次色上的文本和图标颜色         | 用于次色调背景上的文本和图标     |
+| secondaryContainer   | 次色容器颜色                   | 用于卡片、对话框等次色调背景     |
+| onSecondaryContainer | 次色容器颜色上的文本和图标颜色 | 用于次色调容器背景上的文本和图标 |
 
 ### 第三色（Tertiary）
 
-| 属性名称            | 描述                             |
-| ------------------- | -------------------------------- |
-| tertiary            | 第三色                           |
-| onTertiary          | 第三色上的文本和图标颜色         |
-| tertiaryContainer   | 第三色容器颜色                   |
-| onTertiaryContainer | 第三色容器颜色上的文本和图标颜色 |
+| 属性名称            | 描述                             | 用途                               |
+| ------------------- | -------------------------------- | ---------------------------------- |
+| tertiary            | 第三色                           | 用于按钮、开关等第三色调背景       |
+| onTertiary          | 第三色上的文本和图标颜色         | 用于第三色调背景上的文本和图标     |
+| tertiaryContainer   | 第三色容器颜色                   | 用于卡片、对话框等第三色调背景     |
+| onTertiaryContainer | 第三色容器颜色上的文本和图标颜色 | 用于第三色调容器背景上的文本和图标 |
 
 ### 错误色（Error）
 
-| 属性名称         | 描述                           |
-| ---------------- | ------------------------------ |
-| error            | 错误色                         |
-| onError          | 错误色上的文本和图标颜色       |
-| errorContainer   | 错误容器颜色                   |
-| onErrorContainer | 错误容器颜色上的文本和图标颜色 |
+| 属性名称         | 描述                           | 用途                           |
+| ---------------- | ------------------------------ | ------------------------------ |
+| error            | 错误色                         | 用于错误提示按钮、文本等       |
+| onError          | 错误色上的文本和图标颜色       | 用于错误色背景上的文本和图标   |
+| errorContainer   | 错误容器颜色                   | 用于错误提示卡片、对话框等     |
+| onErrorContainer | 错误容器颜色上的文本和图标颜色 | 用于错误容器背景上的文本和图标 |
 
 ### 信息色（Info）
 
-| 属性名称        | 描述                           |
-| --------------- | ------------------------------ |
-| info            | 信息色                         |
-| onInfo          | 信息色上的文本和图标颜色       |
-| infoContainer   | 信息容器颜色                   |
-| onInfoContainer | 信息容器颜色上的文本和图标颜色 |
+| 属性名称        | 描述                           | 用途                           |
+| --------------- | ------------------------------ | ------------------------------ |
+| info            | 信息色                         | 用于信息提示按钮、文本等       |
+| onInfo          | 信息色上的文本和图标颜色       | 用于信息色背景上的文本和图标   |
+| infoContainer   | 信息容器颜色                   | 用于信息提示卡片、对话框等     |
+| onInfoContainer | 信息容器颜色上的文本和图标颜色 | 用于信息容器背景上的文本和图标 |
 
 ### 警告色（Warning）
 
-| 属性名称           | 描述                           |
-| ------------------ | ------------------------------ |
-| warning            | 警告色                         |
-| onWarning          | 警告色上的文本和图标颜色       |
-| warningContainer   | 警告容器颜色                   |
-| onWarningContainer | 警告容器颜色上的文本和图标颜色 |
+| 属性名称           | 描述                           | 用途                           |
+| ------------------ | ------------------------------ | ------------------------------ |
+| warning            | 警告色                         | 用于警告提示按钮、文本等       |
+| onWarning          | 警告色上的文本和图标颜色       | 用于警告色背景上的文本和图标   |
+| warningContainer   | 警告容器颜色                   | 用于警告提示卡片、对话框等     |
+| onWarningContainer | 警告容器颜色上的文本和图标颜色 | 用于警告容器背景上的文本和图标 |
 
 ### 成功色（Success）
 
-| 属性名称           | 描述                           |
-| ------------------ | ------------------------------ |
-| success            | 成功色                         |
-| onSuccess          | 成功色上的文本和图标颜色       |
-| successContainer   | 成功容器颜色                   |
-| onSuccessContainer | 成功容器颜色上的文本和图标颜色 |
+| 属性名称           | 描述                           | 用途                           |
+| ------------------ | ------------------------------ | ------------------------------ |
+| success            | 成功色                         | 用于成功提示按钮、文本等       |
+| onSuccess          | 成功色上的文本和图标颜色       | 用于成功色背景上的文本和图标   |
+| successContainer   | 成功容器颜色                   | 用于成功提示卡片、对话框等     |
+| onSuccessContainer | 成功容器颜色上的文本和图标颜色 | 用于成功容器背景上的文本和图标 |
 
 ### 背景和表面（Background and Surface）
 
-| 属性名称                | 描述                         |
-| ----------------------- | ---------------------------- |
-| background              | 背景色                       |
-| onBackground            | 背景色上的文本和图标颜色     |
-| surface                 | 表面色                       |
-| onSurface               | 表面色上的文本和图标颜色     |
-| surfaceVariant          | 表面变体色                   |
-| onSurfaceVariant        | 表面变体色上的文本和图标颜色 |
-| surfaceContainerLowest  | 最低表面容器颜色             |
-| surfaceContainerLow     | 低表面容器颜色               |
-| surfaceContainer        | 表面容器颜色                 |
-| surfaceContainerHigh    | 高表面容器颜色               |
-| surfaceContainerHighest | 最高表面容器颜色             |
+| 属性名称                | 描述                         | 用途                           |
+| ----------------------- | ---------------------------- | ------------------------------ |
+| background              | 背景色                       | 用于应用或网页的背景色         |
+| onBackground            | 背景色上的文本和图标颜色     | 用于背景色上的文本和图标       |
+| surface                 | 表面色                       | 用于表面元素，如卡片、对话框等 |
+| onSurface               | 表面色上的文本和图标颜色     | 用于表面元素上的文本和图标     |
+| surfaceVariant          | 表面变体色                   | 用于不同层次的表面元素         |
+| onSurfaceVariant        | 表面变体色上的文本和图标颜色 | 用于表面变体元素上的文本和图标 |
+| surfaceContainerLowest  | 最低表面容器颜色             | 用于最低层次的容器背景色       |
+| surfaceContainerLow     | 低表面容器颜色               | 用于低层次的容器背景色         |
+| surfaceContainer        | 表面容器颜色                 | 用于中层次的容器背景色         |
+| surfaceContainerHigh    | 高表面容器颜色               | 用于高层次的容器背景色         |
+| surfaceContainerHighest | 最高表面容器颜色             | 用于最高层次的容器背景色       |
 
 ### 其他（Others）
 
-| 属性名称         | 描述                         |
-| ---------------- | ---------------------------- |
-| inverseSurface   | 反色表面色                   |
-| inverseOnSurface | 反色表面色上的文本和图标颜色 |
-| inversePrimary   | 反色主色                     |
-| surfaceTint      | 表面色调                     |
-| outline          | 轮廓色                       |
-| outlineVariant   | 轮廓变体色                   |
-| shadow           | 阴影色                       |
+| 属性名称         | 描述                         | 用途                         |
+| ---------------- | ---------------------------- | ---------------------------- |
+| inverseSurface   | 反色表面色                   | 用于在暗色背景上提供亮色表面 |
+| inverseOnSurface | 反色表面色上的文本和图标颜色 | 用于在暗色背景上的文本和图标 |
+| inversePrimary   | 反色主色                     | 用于在暗色背景上提供主色调   |
+| surfaceTint      | 表面色调                     | 用于调整表面元素的颜色深浅   |
+| outline          | 轮廓色                       | 用于边框、线条等             |
+| outlineVariant   | 轮廓变体色                   | 用于不同层次的边框、线条等   |
+| shadow           | 阴影色                       | 用于提供阴影效果，增强立体感 |
+
+## MD3Palettes 接口
+
+`MD3Palettes` 定义了主题的颜色调色板，包括各种色调的集合。
+
+### 主色调（Primary）
+
+| 属性名称 | 色调值 | 描述   | 用途                       |
+| -------- | ------ | ------ | -------------------------- |
+| primary  | 0-100  | 主色调 | 用于按钮、开关等主色调背景 |
+
+### 次色调（Secondary）
+
+| 属性名称  | 色调值 | 描述   | 用途                       |
+| --------- | ------ | ------ | -------------------------- |
+| secondary | 0-100  | 次色调 | 用于按钮、开关等次色调背景 |
+
+### 第三色（Tertiary）
+
+| 属性名称 | 色调值 | 描述   | 用途                         |
+| -------- | ------ | ------ | ---------------------------- |
+| tertiary | 0-100  | 第三色 | 用于按钮、开关等第三色调背景 |
+
+### 错误色（Error）
+
+| 属性名称 | 色调值 | 描述   | 用途                     |
+| -------- | ------ | ------ | ------------------------ |
+| error    | 0-100  | 错误色 | 用于错误提示按钮、文本等 |
+
+### 信息色（Info）
+
+| 属性名称 | 色调值 | 描述   | 用途                     |
+| -------- | ------ | ------ | ------------------------ |
+| info     | 0-100  | 信息色 | 用于信息提示按钮、文本等 |
+
+### 警告色（Warning）
+
+| 属性名称 | 色调值 | 描述   | 用途                     |
+| -------- | ------ | ------ | ------------------------ |
+| warning  | 0-100  | 警告色 | 用于警告提示按钮、文本等 |
+
+### 成功色（Success）
+
+| 属性名称 | 色调值 | 描述   | 用途                     |
+| -------- | ------ | ------ | ------------------------ |
+| success  | 0-100  | 成功色 | 用于成功提示按钮、文本等 |
+
+### 中性色（Neutral）
+
+| 属性名称 | 色调值 | 描述   | 用途                     |
+| -------- | ------ | ------ | ------------------------ |
+| neutral  | 0-100  | 中性色 | 用于文本、图标等默认颜色 |
+
+### 中性色变体（Neutral Variant）
+
+| 属性名称       | 色调值 | 描述       | 用途                               |
+| -------------- | ------ | ---------- | ---------------------------------- |
+| neutralVariant | 0-100  | 中性色变体 | 用于提供中性色的变体，以增加层次感 |
+
+### 常用颜色（Common）
+
+| 属性名称 | 描述 | 用途                               |
+| -------- | ---- | ---------------------------------- |
+| black    | 黑色 | 用于文本、图标等需要强调的地方     |
+| white    | 白色 | 用于背景、弹窗等需要高亮显示的地方 |
diff --git a/src/components/WeekGantView/GantDate.vue b/src/components/WeekGantView/GantDate.vue
index 743ae5a..58a91b8 100644
--- a/src/components/WeekGantView/GantDate.vue
+++ b/src/components/WeekGantView/GantDate.vue
@@ -80,7 +80,7 @@ const weekDatesForMarks = computed(() => {
 </script>
 
 <template>
-  <div class="gantDateShadow flex flex-col pb-2 pt-2">
+  <div class="gantDateShadow bg-secondaryContainer flex flex-col pb-2 pt-2">
     <div class="relative flex flex-1 flex-row items-center justify-center flex-self-stretch">
       <div class="relative flex flex-row items-center gap-2">
         <!-- <n-date-picker
@@ -90,10 +90,10 @@ const weekDatesForMarks = computed(() => {
           type="date"
           @update:value="datePickerChange"
         /> -->
-        <span class="font-bold text-inverseSurface">
+        <span class="font-bold text-onSecondaryContainer">
           {{ dayjs(selectedDate).format('YYYY年M月') }}
         </span>
-        <SvgIcon class="rotate-0 font-bold" icon="i-ic-round-keyboard-arrow-down" />
+        <SvgIcon class="rotate-0 text-onSecondaryContainer font-bold" icon="i-ic-round-keyboard-arrow-down" />
       </div>
       <div class="absolute b h-full flex-col flex items-center justify-center right-0 flex-self-stretch">
         <div
@@ -114,7 +114,7 @@ const weekDatesForMarks = computed(() => {
       <div
         class="absolute h-32 w-32 flex items-center justify-center rounded-full bg-primary left-8rpx" @click="prevWeek"
       >
-        <SvgIcon class="text-28 text-white font-bold" icon="i-material-symbols-chevron-left-rounded" />
+        <SvgIcon class="text-28 text-onPrimary font-bold" icon="i-material-symbols-chevron-left-rounded" />
       </div>
 
       <!-- 周历表 -->
@@ -126,7 +126,7 @@ const weekDatesForMarks = computed(() => {
           @click="selectDate(item.date)"
         >
           <span
-            class="text-20 text-inverseSurface"
+            class="text-20 text-onSecondaryContainer"
             :class="{
               'text-primary': item.date === selectedDate,
             }"
@@ -135,7 +135,7 @@ const weekDatesForMarks = computed(() => {
           </span>
 
           <span
-            class="text-20 font-bold text-inverseSurface"
+            class="text-20 font-bold text-onSecondaryContainer"
             :class="{
               'text-primary': item.date === selectedDate,
             }"
@@ -145,7 +145,7 @@ const weekDatesForMarks = computed(() => {
 
           <!-- 标记点 -->
           <div
-            class="mt-0 h-1 w-1 rounded-full"
+            class="mt-0 h-8 w-8 rounded-full"
             :class="{
               'bg-primary': item.isMark,
               '!bg-[#CCCCCC]': item.isMark && item.date < dayjs().startOf('day').valueOf(),
@@ -155,7 +155,7 @@ const weekDatesForMarks = computed(() => {
       </div>
 
       <div class="absolute right-8rpx h-32 w-32 flex items-center justify-center rounded-full bg-primary" @click="nextWeek">
-        <SvgIcon class="text-5 text-white font-bold" icon="i-material-symbols-chevron-right-rounded" />
+        <SvgIcon class="text-5 text-onPrimary font-bold" icon="i-material-symbols-chevron-right-rounded" />
       </div>
     </div>
   </div>
diff --git a/src/components/WeekGantView/GantView.vue b/src/components/WeekGantView/GantView.vue
index e326971..145a96f 100644
--- a/src/components/WeekGantView/GantView.vue
+++ b/src/components/WeekGantView/GantView.vue
@@ -104,7 +104,7 @@ const scrollTop = computed(() => {
 </script>
 
 <template>
-  <div class="relative flex-1">
+  <div class="relative flex-1 bg-tertiaryContainer">
     <scroll-view
       :scroll-anchoring="true"
       :scroll-with-animation="true"
@@ -128,7 +128,7 @@ const scrollTop = computed(() => {
             }"
           >
             <span
-              class="relative block text-20rpx translate-y-[-50%] text-inverseSurface line-height-none text-center"
+              class="relative block text-20rpx translate-y-[-50%] text-onTertiaryContainer line-height-none text-center"
               :class="{
                 'translate-y-0': inex === 0,
               }"
diff --git a/src/components/WeekGantView/demo.vue b/src/components/WeekGantView/demo.vue
index bd188eb..4a33b99 100644
--- a/src/components/WeekGantView/demo.vue
+++ b/src/components/WeekGantView/demo.vue
@@ -68,7 +68,7 @@ function addThing() {
   <button class="" @click="addThing">
     addThing
   </button>
-  <div class="h-660rpx flex flex-col mx-4 bg-primaryContainer rounded-3 shadow overflow-clip ">
+  <div class="h-660rpx flex flex-col mx-4 bg-tertiaryContainer rounded-3 shadow-lg overflow-clip ">
     <week-gant-view v-model:value="value" v-model:things="things" />
   </div>
 </template>
diff --git a/src/components/WeekGantView/helper.ts b/src/components/WeekGantView/helper.ts
index 2a30dce..73a2278 100644
--- a/src/components/WeekGantView/helper.ts
+++ b/src/components/WeekGantView/helper.ts
@@ -1,6 +1,5 @@
 import type { ThingType } from './type';
 import dayjs from 'dayjs';
-import 'dayjs/locale/zh-cn';
 
 export function getWeekDates(date: string | number | Date | dayjs.Dayjs | null | undefined) {
   const startOfWeek = dayjs(date).weekday(0);
diff --git a/src/pages/splashScreen/index.vue b/src/pages/splashScreen/index.vue
index f19f893..65d3753 100644
--- a/src/pages/splashScreen/index.vue
+++ b/src/pages/splashScreen/index.vue
@@ -67,7 +67,7 @@ function toNumerology() {
 </script>
 
 <template>
-  <view class="bg-background flex-1">
+  <view class=" flex-1">
     <div class="flex flex-col gap-4 mt-32rpx">
       <WeekGantViewDemo />
 
diff --git a/src/stores/helper/themes.ts b/src/stores/helper/themes.ts
index 6bd185c..1b61f50 100644
--- a/src/stores/helper/themes.ts
+++ b/src/stores/helper/themes.ts
@@ -9,7 +9,7 @@
  *
  * ## Last Modified: 2024-09-05 15:54:91
  *
- * Modified By: KuroSago
+ * Modified By: kurosago
  *
  * ## Copyright (c) 2024 self.
  *
@@ -30,7 +30,6 @@ const Avocado = {
   neutralVariant: '#f0e68c', // 浅黄色调，作为一种温和的变体色
 };
 
-// 西瓜
 const Watermelon = {
   primary: '#ff4757', // 西瓜果肉的鲜红色
   secondary: '#2ecc71', // 西瓜外皮的绿色
@@ -43,7 +42,6 @@ const Watermelon = {
   neutralVariant: '#95a5a6', // 较浅的灰色，作为中性色变体
 };
 
-// 蓝莓
 const Blueberry = {
   primary: '#4a69bd', // 蓝莓的深蓝色
   secondary: '#82ccdd', // 浅蓝色，代表天空的清爽感