theming

src/apps/officer-web/Screens/Dashboard/Settings/ProfileSettings/index.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useMemo } from 'react';
-import { Search, User, Lock, Globe, ListChecks } from 'lucide-react';
+import { Search, User, Lock, Globe, ListChecks, Palette } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion';
 import { Card } from '@/components/Card';
@@ -8,6 +8,7 @@ import { UserData } from './UserData';
 import { ChangePassword } from './ChangePassword';
 import { Languages } from './Languages';
 import { TaskDefaults } from './TaskDefaults';
+import { Appearance } from './Appearance';
 
 const sections = [
   {
@@ -17,6 +18,13 @@ const sections = [
     description: 'Update your name and avatar.',
     content: <UserData />,
   },
+  {
+    key: 'appearance',
+    icon: Palette,
+    title: 'Appearance',
+    description: 'Color theme and light/dark mode.',
+    content: <Appearance />,
+  },
   {
     key: 'tasks',
     icon: ListChecks,