diff --git a/doc/src/.vuepress/components/UserInfo.vue b/doc/src/.vuepress/components/UserInfo.vue
index abd8766..2e49ee7 100644
--- a/doc/src/.vuepress/components/UserInfo.vue
+++ b/doc/src/.vuepress/components/UserInfo.vue
@@ -72,8 +72,7 @@ onUnmounted(() => {
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  background: var(--c-brand);
-  /* color: white; */
+  background: var(--vp-c-bg);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -95,7 +94,7 @@ onUnmounted(() => {
   position: fixed;
   top: 50px;
   right: 20px;
-  background: var(--c-bg);
+  background: var(--vp-c-bg);
   border-radius: 8px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
   padding: 1rem;
@@ -110,7 +109,7 @@ onUnmounted(() => {
   right: 10px;
   width: 12px;
   height: 12px;
-  background: var(--c-bg);
+  background: var(--vp-c-bg);
   transform: rotate(45deg);
   box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.04);
 }
@@ -128,13 +127,13 @@ onUnmounted(() => {
   align-items: center;
   gap: 0.8rem;
   padding-bottom: 0.8rem;
-  border-bottom: 1px solid var(--c-border);
+  border-bottom: 1px solid var(--vp-c-divider);
 }
 
 .user-avatar {
   width: 24px;
   height: 24px;
-  color: var(--c-text-lighter);
+  color: var(--vp-c-text-2);
 }
 
 .logout-icon {
@@ -144,7 +143,7 @@ onUnmounted(() => {
 
 .fullname {
   font-size: 0.9rem;
-  color: var(--c-text);
+  color: var(--vp-c-text-1);
 }
 
 .logout-btn {
@@ -153,13 +152,13 @@ onUnmounted(() => {
   gap: 0.5rem;
   padding: 0.5rem;
   border-radius: 4px;
-  color: var(--c-text);
+  color: var(--vp-c-text-1);
   text-decoration: none;
   transition: all 0.2s;
 }
 
 .logout-btn:hover {
-  background: var(--c-brand-light);
+  background: var(--vp-c-brand);
   color: white;
 }
 </style> 
\ No newline at end of file