样式微调，主题切换功能

components/ThemeSwitch.js

@@ -1,4 +1,5 @@
 import { useGlobal } from '@/lib/global'
+import { ALL_THEME } from '@/themes'
 import React from 'react'
 import { Draggable } from './Draggable'
 /**
@@ -6,15 +7,24 @@ import { Draggable } from './Draggable'
  * @returns 主题切换
  */
 export function ThemeSwitch() {
-  const { theme, switchTheme } = useGlobal()
+  const { theme, changeTheme } = useGlobal()
+
+  const onSelectChange = (e) => {
+    changeTheme(e.target.value)
+  }
 
   return (<>
         <Draggable>
             <div id="draggableBox" style={{ left: '10px', top: '90vh' }} className="fixed text-white bg-black z-50 rounded-lg shadow-card">
                 <div className="p-2 flex items-center">
-                    <i className="fas fa-palette mr-1 cursor-move" />
-                    <div className='uppercase font-sans whitespace-nowrap cursor-pointer ' onClick={switchTheme}> {theme}</div>
-                    <i className='fas fa-arrows cursor-move pl-2' title='click to change theme' alt='click to change theme' />
+                    <i className='fas fa-arrows cursor-move px-2' />
+                    {/* <div className='uppercase font-sans whitespace-nowrap cursor-pointer ' onClick={switchTheme}> {theme}</div> */}
+                    <select onChange={onSelectChange} name="cars" className='text-white bg-black uppercase'>
+                        {ALL_THEME.map(t => {
+                          const selected = t === theme
+                          return <option key={t} value={t} selected={selected}>{t}</option>
+                        })}
+                    </select>
                 </div>
             </div>
         </Draggable>