diff --git a/components/ThemeSwitch.js b/components/ThemeSwitch.js
index 7ff3d40f..6816de4d 100644
--- a/components/ThemeSwitch.js
+++ b/components/ThemeSwitch.js
@@ -3,6 +3,7 @@ import React from 'react'
 import { Draggable } from './Draggable'
 import { THEMES } from '@/themes/theme'
 import { useRouter } from 'next/router'
+import DarkModeButton from './DarkModeButton'
 /**
  *
  * @returns 主题切换
@@ -22,9 +23,10 @@ const ThemeSwitch = () => {
 
   return (<>
         <Draggable>
-            <div id="draggableBox" style={{ left: '10px', top: '85vh' }} className="fixed text-white bg-black z-50 rounded-lg shadow-card">
+            <div id="draggableBox" style={{ left: '10px', top: '85vh' }} className="fixed dark:text-white bg-gray-50 dark:bg-black z-50 border dark:border-gray-800 rounded-lg shadow-card">
                 <div className="py-2 flex items-center text-sm px-2">
-                    <select value={theme} onChange={onSelectChange} name="cars" className='text-white bg-black uppercase cursor-pointer'>
+                    <DarkModeButton className='mr-1'/>
+                    <select value={theme} onChange={onSelectChange} name="cars" className=' outline-none dark:text-white bg-gray-50 dark:bg-black uppercase cursor-pointer'>
                         {THEMES?.map(t => {
                           return <option key={t} value={t}>{t}</option>
                         })}