diff --git a/docs/docs/.vitepress/config.ts b/docs/docs/.vitepress/config.ts
index c1ebeb4..09b2cb0 100644
--- a/docs/docs/.vitepress/config.ts
+++ b/docs/docs/.vitepress/config.ts
@@ -144,10 +144,10 @@ function sidebarConfig() {
           text: 'Limit the number of toast displayed',
           link: '/usage/limit',
         },
-        {
-          text: 'Use a controlled progress bar',
-          link: '/usage/use-a-controlled-progress-bar',
-        },
+        // {
+        //   text: 'Use a controlled progress bar',
+        //   link: '/usage/use-a-controlled-progress-bar',
+        // },
         {
           text: 'How to style',
           link: '/usage/how-to-style',
diff --git a/docs/package.json b/docs/package.json
index 3f4d606..e469aa4 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -11,12 +11,12 @@
   },
   "dependencies": {
     "@documate/vue": "latest",
-    "ant-design-vue": "^3.2.20"
+    "ant-design-vue": "^4.2.6"
   },
   "devDependencies": {
     "@documate/documate": "latest",
     "markdown-it-container": "^4.0.0",
-    "vitepress": "^1.4.1",
+    "vitepress": "^1.5.0",
     "vitepress-plugin-sandpack": "latest"
   }
 }
diff --git a/package.json b/package.json
index db5f107..6f074ba 100644
--- a/package.json
+++ b/package.json
@@ -85,57 +85,57 @@
     "@babel/plugin-transform-typescript": "^7.25.9",
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-typescript": "^7.26.0",
-    "@commitlint/cli": "^19.5.0",
-    "@commitlint/config-conventional": "^19.5.0",
-    "@stylistic/eslint-plugin-js": "^2.9.0",
-    "@stylistic/eslint-plugin-jsx": "^2.9.0",
-    "@stylistic/eslint-plugin-plus": "^2.9.0",
-    "@stylistic/eslint-plugin-ts": "^2.9.0",
-    "@swc/core": "^1.7.40",
-    "@testing-library/jest-dom": "^6.6.2",
+    "@commitlint/cli": "^19.6.0",
+    "@commitlint/config-conventional": "^19.6.0",
+    "@stylistic/eslint-plugin-js": "^2.11.0",
+    "@stylistic/eslint-plugin-jsx": "^2.11.0",
+    "@stylistic/eslint-plugin-plus": "^2.11.0",
+    "@stylistic/eslint-plugin-ts": "^2.11.0",
+    "@swc/core": "^1.9.3",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.5.2",
     "@testing-library/vue": "^8.1.0",
     "@types/lodash.isequal": "^4.5.8",
     "@types/lz-string": "^1.5.0",
-    "@types/node": "^20.17.1",
-    "@typescript-eslint/parser": "^8.11.0",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "@vitejs/plugin-vue-jsx": "^4.0.1",
-    "@vitest/ui": "^2.1.3",
+    "@types/node": "^22.10.0",
+    "@typescript-eslint/parser": "^8.16.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
+    "@vitest/ui": "^2.1.6",
     "@vue/babel-plugin-jsx": "^1.2.5",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.2.1",
     "browserslist-to-esbuild": "^2.1.1",
-    "bumpp": "^9.7.1",
-    "core-js": "^3.38.1",
+    "bumpp": "^9.8.1",
+    "core-js": "^3.39.0",
     "cssnano": "^7.0.6",
     "esbuild-plugin-babel": "^0.2.3",
-    "eslint-plugin-vue": "^9.29.1",
-    "husky": "^9.1.6",
+    "eslint-plugin-vue": "^9.31.0",
+    "husky": "^9.1.7",
     "jsdom": "^25.0.1",
     "lint-staged": "^15.2.10",
-    "npm": "^10.9.0",
+    "npm": "^10.9.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "postcss-cli": "^11.0.0",
     "postcss-loader": "^8.1.1",
-    "postcss-nested": "^6.2.0",
+    "postcss-nested": "^7.0.2",
     "postcss-scss": "^4.0.9",
     "rimraf": "^5.0.10",
-    "sass": "^1.80.4",
+    "sass": "^1.81.0",
     "shelljs": "^0.8.5",
     "stylelint": "^16.10.0",
     "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-config-standard": "^36.0.1",
     "tsup": "^8.3.5",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.10",
+    "typescript": "~5.6.3",
+    "vite": "^6.0.1",
     "vite-plugin-dts": "^4.3.0",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-style-import": "^2.0.0",
-    "vitest": "^2.1.3",
+    "vitest": "^2.1.6",
     "vue-eslint-parser": "^9.4.3",
-    "vue-tsc": "^2.1.8"
+    "vue-tsc": "^2.1.10"
   },
   "peerDependencies": {
     "vue": ">=3.2.0"
diff --git a/playground/package.json b/playground/package.json
index d9e1652..8ce9efe 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -10,9 +10,9 @@
     "typecheck": "tsc && vue-tsc"
   },
   "dependencies": {
-    "ant-design-vue": "^3.2.20",
+    "ant-design-vue": "^4.2.6",
     "highlight.js": "^11.10.0",
-    "vue-router": "^4.4.5"
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
     "cross-env": "^7.0.3"
diff --git a/playground/src/components/Conditions.vue b/playground/src/components/Conditions.vue
index 43b3e82..faaeeda 100644
--- a/playground/src/components/Conditions.vue
+++ b/playground/src/components/Conditions.vue
@@ -241,10 +241,10 @@
 import { Divider, Input, Select, SelectOption, Checkbox } from 'ant-design-vue';
 import { reactive, ref, watchEffect, watch, type VNode } from 'vue';
 import { toast, updateGlobalOptions, ToastOptions, ToastPosition, ToastTheme, ToastTransition, ToastType } from 'vue3-toastify';
-import 'ant-design-vue/es/input/style/index.css';
-import 'ant-design-vue/es/divider/style/index.css';
-import 'ant-design-vue/es/select/style/index.css';
-import 'ant-design-vue/es/checkbox/style/index.css';
+import 'ant-design-vue/es/input/style/index.js';
+import 'ant-design-vue/es/divider/style/index.js';
+import 'ant-design-vue/es/select/style/index.js';
+import 'ant-design-vue/es/checkbox/style/index.js';
 
 type Icon = string | number | boolean | VNode | undefined;
 
diff --git a/playground/src/components/constomCompo.vue b/playground/src/components/constomCompo.vue
index 5ea1d58..9d79948 100644
--- a/playground/src/components/constomCompo.vue
+++ b/playground/src/components/constomCompo.vue
@@ -2,25 +2,20 @@
   <div>
     {{ contentProps.title }}
   </div>
-  <button>Click me</button>
+  <Button type="primary" size="small">
+    Click me
+  </Button>
 </template>
+
 <script setup>
- 
+import { Button } from 'ant-design-vue';
+
 const props = defineProps({
   contentProps: {
     type: Object,
-    default: () => ({ title: String }) 
-    , 
-  }, 
+    default: () => ({ title: String }),
+  },
 });
 
 console.log(props);
 </script>
-
-<style>
-button{
-  background-color: orange;
-  padding: 3px;
-  border: 1px solid red
-}
-</style>
\ No newline at end of file
diff --git a/playground/src/pages/index.vue b/playground/src/pages/index.vue
index 6112c28..177d4c0 100644
--- a/playground/src/pages/index.vue
+++ b/playground/src/pages/index.vue
@@ -2,11 +2,12 @@
 import { h, ref } from 'vue';
 import { Divider } from 'ant-design-vue';
 import { toast, ToastOptions } from 'vue3-toastify';
+import constomCompo from '../components/constomCompo.vue';
 import Conditions from '../components/Conditions.vue';
 import ToastCode from '../components/ToastCode.vue';
-import 'ant-design-vue/es/button/style/index.css';
-import 'ant-design-vue/es/divider/style/index.css';
-import constomCompo from '@/components/constomCompo.vue';
+
+import 'ant-design-vue/es/button/style/index.js';
+import 'ant-design-vue/es/divider/style/index.js';
 
 const options = ref({} as ToastOptions);
 
diff --git a/src/utils/tools.ts b/src/utils/tools.ts
index 91b3304..a8c7771 100644
--- a/src/utils/tools.ts
+++ b/src/utils/tools.ts
@@ -58,5 +58,8 @@ export function getGlobalOptions() {
 }
 
 export function getSystemTheme(): ToastTheme {
-  return document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+  const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+  const customDark = document.documentElement.classList.contains('dark');
+
+  return customDark ? 'dark' : prefersDark ? 'dark' : 'light';
 }