diff --git a/packages/frontend/src/components/MkTutorial.Note.vue b/packages/frontend/src/components/MkTutorial.Note.vue
index 1d430c2240..715543d11c 100644
--- a/packages/frontend/src/components/MkTutorial.Note.vue
+++ b/packages/frontend/src/components/MkTutorial.Note.vue
@@ -136,10 +136,10 @@ defineExpose<TutorialPageCommonExpose>({
 .image {
 	max-width: 300px;
 	margin: 0 auto;
-	border-radius: var(--radius);
+	border-radius: var(--MI-radius);
 }
 
 .actionWaitText {
-	color: var(--error);
+	color: var(--MI_THEME-error);
 }
 </style>
diff --git a/packages/frontend/src/components/MkTutorial.ProfileSettings.vue b/packages/frontend/src/components/MkTutorial.ProfileSettings.vue
index 072deca421..6c34fe31a4 100644
--- a/packages/frontend/src/components/MkTutorial.ProfileSettings.vue
+++ b/packages/frontend/src/components/MkTutorial.ProfileSettings.vue
@@ -103,6 +103,6 @@ defineExpose<TutorialPageCommonExpose>({
 .avatar {
 	width: 100px;
 	height: 100px;
-	background: var(--bg);
+	background: var(--MI_THEME-bg);
 }
 </style>
diff --git a/packages/frontend/src/components/MkTutorial.Sensitive.vue b/packages/frontend/src/components/MkTutorial.Sensitive.vue
index 0e6f0e9b63..2917a240c2 100644
--- a/packages/frontend/src/components/MkTutorial.Sensitive.vue
+++ b/packages/frontend/src/components/MkTutorial.Sensitive.vue
@@ -145,6 +145,6 @@ defineExpose<TutorialPageCommonExpose>({
 }
 
 .actionWaitText {
-	color: var(--error);
+	color: var(--MI_THEME-error);
 }
 </style>
diff --git a/packages/frontend/src/components/MkTutorial.vue b/packages/frontend/src/components/MkTutorial.vue
index b7bfe92926..d677e300ef 100644
--- a/packages/frontend/src/components/MkTutorial.vue
+++ b/packages/frontend/src/components/MkTutorial.vue
@@ -347,7 +347,7 @@ defineExpose({
 
 .progressBarValue {
 	height: 100%;
-	background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+	background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
 	transition: all 0.5s cubic-bezier(0,.5,.5,1);
 }
 
@@ -384,7 +384,7 @@ defineExpose({
 
 .progressBarValue {
 	height: 100%;
-	background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+	background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
 	transition: all 0.5s cubic-bezier(0,.5,.5,1);
 }
 
@@ -424,8 +424,8 @@ defineExpose({
 	box-sizing: border-box;
 	flex-shrink: 0;
 	padding: 12px;
-	border-top: solid 0.5px var(--divider);
-	background: var(--acrylicBg);
+	border-top: solid 0.5px var(--MI_THEME-divider);
+	background: var(--MI_THEME-acrylicBg);
 
 	transition: transform 0.3s cubic-bezier(0,0,.35,1);
 	transform: translateY(100%);