diff --git a/src/components/userCharacter/tuc-detail-desc-constellation.vue b/src/components/userCharacter/tuc-detail-desc-constellation.vue
index 1b5339ec..a320ac50 100644
--- a/src/components/userCharacter/tuc-detail-desc-constellation.vue
+++ b/src/components/userCharacter/tuc-detail-desc-constellation.vue
@@ -40,7 +40,7 @@ function parseDesc(desc: string): string {
   while (match !== null) {
     const color = match[1];
     const text = match[2];
-    desc = desc.replace(match[0], `<span style="color: ${color}">${text}</span>`);
+    desc = desc.replace(match[0], `<span title="${text}" style="color: ${color};">${text}</span>`);
     match = reg.exec(desc);
   }
   desc = desc.replace(/\\n/g, "<br />");
@@ -60,11 +60,12 @@ function parseDesc(desc: string): string {
 
 .tuc-ddc-top {
   height: 20px;
-  color: var(--tgc-blue-1);
+  color: var(--box-text-3);
 }
 
 .tuc-ddc-bottom {
   height: 20px;
+  color: var(--box-text-1);
 }
 
 .tuc-ddc-bottom :nth-child(1) {
diff --git a/src/components/userCharacter/tuc-detail-desc-relic.vue b/src/components/userCharacter/tuc-detail-desc-relic.vue
index e516df3e..25139348 100644
--- a/src/components/userCharacter/tuc-detail-desc-relic.vue
+++ b/src/components/userCharacter/tuc-detail-desc-relic.vue
@@ -48,7 +48,7 @@ const props = defineProps<TucDetailDescRelicProps>();
 
 .tuc-ddrc-top {
   height: 20px;
-  color: var(--tgc-dark-1);
+  color: var(--box-text-1);
 }
 
 .tuc-ddrc-top :nth-child(1) {
@@ -70,7 +70,7 @@ const props = defineProps<TucDetailDescRelicProps>();
 }
 
 .tuc-ddrd-title {
-  color: var(--tgc-dark-1);
+  color: var(--box-text-3);
   font-family: var(--font-title);
   font-size: 16px;
 }
diff --git a/src/components/userCharacter/tuc-detail-desc-weapon.vue b/src/components/userCharacter/tuc-detail-desc-weapon.vue
index 71e5cc78..8d20d7b3 100644
--- a/src/components/userCharacter/tuc-detail-desc-weapon.vue
+++ b/src/components/userCharacter/tuc-detail-desc-weapon.vue
@@ -49,7 +49,7 @@ const box = computed(() => {
   align-items: start;
   justify-content: space-around;
   margin-left: 5px;
-  color: var(--tgc-dark-1);
+  color: var(--box-text-1);
 }
 
 .tuc-ddwc-top {
diff --git a/src/components/userCharacter/tuc-detail-desc.vue b/src/components/userCharacter/tuc-detail-desc.vue
index 04af8fb2..77173169 100644
--- a/src/components/userCharacter/tuc-detail-desc.vue
+++ b/src/components/userCharacter/tuc-detail-desc.vue
@@ -15,14 +15,14 @@
 <style lang="css" scoped>
 .tuc-dd-box {
   padding: 10px;
-  border: 1px solid rgb(0 0 0 /40%);
+  border: 1px solid var(--common-shadow-2);
   border-radius: 5px;
-  background: var(--tgc-white-1);
+  background: var(--box-bg-2);
 }
 
 .tuc-dd-title {
   width: 100%;
-  color: var(--tgc-dark-1);
+  color: var(--common-text-title);
   font-family: var(--font-title);
   font-size: 20px;
   text-align: left;
@@ -32,8 +32,7 @@
   width: 100%;
   height: 1px;
   margin: 5px 0;
-  background: var(--tgc-dark-1);
-  opacity: 0.5;
+  background: var(--common-shadow-2);
 }
 
 .tuc-dd-content {
@@ -48,7 +47,7 @@
   width: 100%;
   max-height: 50px;
   margin-top: 5px;
-  color: var(--tgc-dark-1);
+  color: var(--box-text-4);
   font-family: var(--font-text);
   font-size: 14px;
   overflow-x: hidden;
diff --git a/src/components/userCharacter/tuc-detail-overlay.vue b/src/components/userCharacter/tuc-detail-overlay.vue
index dcd9f606..9e5096c8 100644
--- a/src/components/userCharacter/tuc-detail-overlay.vue
+++ b/src/components/userCharacter/tuc-detail-overlay.vue
@@ -265,7 +265,7 @@ function switchBg(): void {
   height: 620px;
   padding: 10px;
   border-radius: 5px;
-  background: var(--tgc-white-1);
+  background: var(--box-bg-1);
 }
 
 .tuc-do-bg {
@@ -290,7 +290,7 @@ function switchBg(): void {
   bottom: 0;
   padding: 2px 5px;
   backdrop-filter: blur(10px);
-  background: rgb(0 0 0 /50%);
+  background: var(--common-shadow-2);
   border-bottom-right-radius: 5px;
   border-top-left-radius: 5px;
   color: var(--tgc-white-1);