upd: tampilan dark dan light

src/frontend/components/AppCard.tsx

@@ -1,4 +1,4 @@
-import { Card, Group, Text, ThemeIcon, Badge, Avatar, Stack, Button, Progress, Box } from '@mantine/core'
+import { Card, Group, Text, ThemeIcon, Badge, Avatar, Stack, Button, Progress, Box, useComputedColorScheme } from '@mantine/core'
 import { Link } from '@tanstack/react-router'
 import { TbDeviceMobile, TbActivity, TbAlertTriangle, TbChevronRight } from 'react-icons/tb'
 
@@ -13,6 +13,7 @@ interface AppCardProps {
 
 export function AppCard({ id, name, status, users, errors, version }: AppCardProps) {
   const statusColor = status === 'active' ? 'teal' : status === 'warning' ? 'orange' : 'red'
+  const scheme = useComputedColorScheme('light', { getInitialValueInEffect: true })
 
   return (
     <Card
@@ -22,12 +23,12 @@ export function AppCard({ id, name, status, users, errors, version }: AppCardPro
       className="premium-card glass"
       styles={(theme) => ({
         root: {
-          backgroundColor: 'rgba(30, 41, 59, 0.4)',
-          borderColor: 'rgba(255,255,255,0.08)',
-          transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+          backgroundColor: 'var(--mantine-color-body)',
+          borderColor: scheme === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)',
+          transition: 'transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease',
           '&:hover': {
             transform: 'translateY(-4px)',
-            boxShadow: '0 12px 24px -8px rgba(0, 0, 0, 0.4)',
+            boxShadow: theme.shadows.md,
             borderColor: 'rgba(37, 99, 235, 0.3)',
           },
         },