fix: dark theme issue

RealKai42 · Oct 15, 2023 · f726091 · f726091 · vercel · Oct 15, 2023
1 parent d1a0fd9
commit f726091
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/src/index.css b/src/index.css
@@ -108,25 +108,25 @@ body,
   }
 
   .listbox-button {
-    @apply relative w-40 cursor-pointer rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none;
+    @apply relative w-40 cursor-pointer rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none dark:bg-gray-600;
   }
   .listbox-button span:nth-of-type(1) {
-    @apply block truncate text-gray-900;
+    @apply block truncate text-gray-900 dark:text-white dark:text-opacity-60;
   }
   .listbox-button span:nth-of-type(2) {
     @apply pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 focus:outline-none;
   }
   .listbox-options {
-    @apply absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg  focus:outline-none;
+    @apply absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg  focus:outline-none dark:bg-gray-600;
   }
   .listbox-options > li {
-    @apply relative cursor-pointer select-none py-2 pl-10 pr-4 text-gray-900 ui-active:bg-indigo-100 ui-active:text-indigo-900;
+    @apply relative cursor-pointer select-none py-2 pl-10 pr-4 text-gray-900 ui-active:bg-indigo-100 ui-active:text-indigo-900 dark:text-white dark:text-opacity-60 dark:ui-active:bg-gray-500 dark:ui-active:text-indigo-300;
   }
   .listbox-options > li > span:first-child {
     @apply block truncate font-normal  ui-selected:font-medium;
   }
   .listbox-options-icon {
-    @apply absolute inset-y-0 left-0 flex items-center pl-3 text-indigo-600;
+    @apply absolute inset-y-0 left-0 flex items-center pl-3 text-indigo-600 dark:text-indigo-400;
   }
 
   .slider {

diff --git a/src/pages/Typing/components/StartButton/index.tsx b/src/pages/Typing/components/StartButton/index.tsx
@@ -36,12 +36,16 @@ export default function StartButton({ isLoading }: { isLoading: boolean }) {
       <div
         ref={refs.setReference}
         {...getReferenceProps()}
-        className={`${state.isTyping ? 'bg-gray-400 shadow-gray-200 dark:bg-gray-700' : 'bg-indigo-600 shadow-indigo-200'} ${
+        className={`${
+          state.isTyping
+            ? 'bg-gray-400 shadow-gray-200 dark:bg-gray-600  dark:shadow-none'
+            : 'bg-indigo-500 shadow-indigo-300 dark:shadow-indigo-500/60'
+        } ${
           isShowReStartButton ? 'h-20' : 'h-auto'
-        } flex-column absolute left-0 top-0 w-20 rounded-lg shadow transition-colors duration-200`}
+        } flex-column absolute left-0 top-0 w-20 rounded-lg shadow-lg transition-colors duration-200`}
       >
         <button
-          className={`${state.isTyping ? 'bg-gray-400 shadow-gray-200 dark:bg-gray-700' : 'bg-indigo-600'} btn-primary w-20`}
+          className={`${state.isTyping ? 'bg-gray-400  dark:bg-gray-700 dark:hover:bg-gray-500' : 'bg-indigo-500'} btn-primary w-20 shadow`}
           type="button"
           onClick={onToggleIsTyping}
           aria-label={state.isTyping ? '暂停' : '开始'}
@@ -52,8 +56,8 @@ export default function StartButton({ isLoading }: { isLoading: boolean }) {
           <div className="absolute bottom-0 flex w-20 justify-center" ref={refs.setFloating} {...getFloatingProps()}>
             <button
               className={`${
-                state.isTyping ? 'bg-gray-600 dark:bg-gray-500' : 'bg-indigo-400 '
-              } btn-primary mb-1 mt-1 w-18 shadow transition-colors duration-200`}
+                state.isTyping ? 'bg-gray-500 dark:bg-gray-700 dark:hover:bg-gray-500 ' : 'bg-indigo-400 '
+              } btn-primary mb-1 mt-1 w-18  transition-colors duration-200`}
               type="button"
               onClick={onClickRestart}
               aria-label={'重新开始'}