diff --git a/src/layouts/modules/theme-drawer/modules/config-operation.vue b/src/layouts/modules/theme-drawer/modules/config-operation.vue
index 196f7e42..6233c985 100644
--- a/src/layouts/modules/theme-drawer/modules/config-operation.vue
+++ b/src/layouts/modules/theme-drawer/modules/config-operation.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import Clipboard from 'clipboard';
 import { $t } from '@/locales';
 import { useThemeStore } from '@/store/modules/theme';
@@ -15,9 +15,7 @@ const domRef = ref<HTMLElement | null>(null);
 function initClipboard() {
   if (!domRef.value) return;
 
-  const clipboard = new Clipboard(domRef.value, {
-    text: () => getClipboardText()
-  });
+  const clipboard = new Clipboard(domRef.value);
 
   clipboard.on('success', () => {
     window.$message?.success($t('theme.configOperation.copySuccessMsg'));
@@ -40,6 +38,8 @@ function handleReset() {
   }, 50);
 }
 
+const dataClipboardText = computed(() => getClipboardText());
+
 onMounted(() => {
   initClipboard();
 });
@@ -47,8 +47,9 @@ onMounted(() => {
 
 <template>
   <div class="flex justify-between w-full">
+    <textarea id="themeConfigCopyTarget" v-model="dataClipboardText" class="absolute opacity-0 -z-1" />
     <NButton type="error" ghost @click="handleReset">{{ $t('theme.configOperation.resetConfig') }}</NButton>
-    <div ref="domRef">
+    <div ref="domRef" data-clipboard-target="#themeConfigCopyTarget">
       <NButton type="primary">{{ $t('theme.configOperation.copyConfig') }}</NButton>
     </div>
   </div>