Feat: configure dark mode legacy (#15394)

web/app/components/app/configuration/config/automatic/automatic-btn.tsx

@@ -2,7 +2,10 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Generator } from '@/app/components/base/icons/src/vender/other'
+import {
+  RiSparklingFill,
+} from '@remixicon/react'
+import Button from '@/app/components/base/button'
 
 export type IAutomaticBtnProps = {
   onClick: () => void
@@ -13,12 +16,10 @@ const AutomaticBtn: FC<IAutomaticBtnProps> = ({
   const { t } = useTranslation()
 
   return (
-    <div className='flex space-x-1 items-center !h-8 cursor-pointer'
-      onClick={onClick}
-    >
-      <Generator className='w-3.5 h-3.5 text-indigo-600' />
-      <span className='text-xs font-semibold text-indigo-600'>{t('appDebug.operation.automatic')}</span>
-    </div>
+    <Button variant='secondary-accent' size='small' onClick={onClick}>
+      <RiSparklingFill className='w-3.5 h-3.5 mr-1' />
+      <span className=''>{t('appDebug.operation.automatic')}</span>
+    </Button>
   )
 }
 export default React.memo(AutomaticBtn)