feat: pure black

src/pages/secondary/AppearanceSettingsPage/index.tsx

@@ -0,0 +1,48 @@
+import { Label } from '@/components/ui/label'
+import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
+import { cn } from '@/lib/utils'
+import { useTheme } from '@/providers/ThemeProvider'
+import { Monitor, Moon, Sun } from 'lucide-react'
+import { forwardRef } from 'react'
+import { useTranslation } from 'react-i18next'
+
+const THEMES = [
+  { key: 'system', label: 'System', icon: <Monitor className="w-5 h-5" /> },
+  { key: 'light', label: 'Light', icon: <Sun className="w-5 h-5" /> },
+  { key: 'dark', label: 'Dark', icon: <Moon className="w-5 h-5" /> },
+  { key: 'pure-black', label: 'Pure Black', icon: <Moon className="w-5 h-5 fill-current" /> }
+] as const
+
+const AppearanceSettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
+  const { t } = useTranslation()
+  const { themeSetting, setThemeSetting } = useTheme()
+
+  return (
+    <SecondaryPageLayout ref={ref} index={index} title={t('Appearance')}>
+      <div className="space-y-4 mt-3">
+        <div className="flex flex-col gap-2 px-4">
+          <Label className="text-base">{t('Theme')}</Label>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 w-full">
+            {THEMES.map(({ key, label, icon }) => (
+              <button
+                key={key}
+                onClick={() => {
+                  setThemeSetting(key)
+                }}
+                className={cn(
+                  'flex flex-col items-center gap-2 py-4 rounded-lg border-2 transition-all',
+                  themeSetting === key ? 'border-primary' : 'border-border hover:border-primary/60'
+                )}
+              >
+                <div className="flex items-center justify-center w-8 h-8">{icon}</div>
+                <span className="text-xs font-medium">{t(label)}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </SecondaryPageLayout>
+  )
+})
+AppearanceSettingsPage.displayName = 'AppearanceSettingsPage'
+export default AppearanceSettingsPage

src/pages/secondary/GeneralSettingsPage/index.tsx

@@ -6,7 +6,6 @@ import { LocalizedLanguageNames, TLanguage } from '@/i18n'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
 import { cn, isSupportCheckConnectionType } from '@/lib/utils'
 import { useContentPolicy } from '@/providers/ContentPolicyProvider'
-import { useTheme } from '@/providers/ThemeProvider'
 import { useUserPreferences } from '@/providers/UserPreferencesProvider'
 import { useUserTrust } from '@/providers/UserTrustProvider'
 import { TMediaAutoLoadPolicy } from '@/types'
@@ -18,7 +17,6 @@ import { useTranslation } from 'react-i18next'
 const GeneralSettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
   const { t, i18n } = useTranslation()
   const [language, setLanguage] = useState<TLanguage>(i18n.language as TLanguage)
-  const { themeSetting, setThemeSetting } = useTheme()
   const {
     autoplay,
     setAutoplay,
@@ -57,21 +55,6 @@ const GeneralSettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
             </SelectContent>
           </Select>
         </SettingItem>
-        <SettingItem>
-          <Label htmlFor="theme" className="text-base font-normal">
-            {t('Theme')}
-          </Label>
-          <Select defaultValue="system" value={themeSetting} onValueChange={setThemeSetting}>
-            <SelectTrigger id="theme" className="w-48">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="system">{t('System')}</SelectItem>
-              <SelectItem value="light">{t('Light')}</SelectItem>
-              <SelectItem value="dark">{t('Dark')}</SelectItem>
-            </SelectContent>
-          </Select>
-        </SettingItem>
         <SettingItem>
           <Label htmlFor="notification-list-style" className="text-base font-normal">
             <div>{t('Notification list style')}</div>

src/pages/secondary/SettingsPage/index.tsx

@@ -2,6 +2,7 @@ import AboutInfoDialog from '@/components/AboutInfoDialog'
 import Donation from '@/components/Donation'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
 import {
+  toAppearanceSettings,
   toGeneralSettings,
   toPostSettings,
   toRelaySettings,
@@ -18,6 +19,7 @@ import {
   Info,
   KeyRound,
   Languages,
+  Palette,
   PencilLine,
   Server,
   Settings2,
@@ -42,6 +44,13 @@ const SettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
         </div>
         <ChevronRight />
       </SettingItem>
+      <SettingItem className="clickable" onClick={() => push(toAppearanceSettings())}>
+        <div className="flex items-center gap-4">
+          <Palette />
+          <div>{t('Appearance')}</div>
+        </div>
+        <ChevronRight />
+      </SettingItem>
       <SettingItem className="clickable" onClick={() => push(toRelaySettings())}>
         <div className="flex items-center gap-4">
           <Server />