From ac17e059c7999ded413b444466bf71b16c3a6d7d Mon Sep 17 00:00:00 2001 From: amal Date: Thu, 2 Apr 2026 11:59:21 +0800 Subject: [PATCH] upd: tampilan dark dan light --- src/frontend/App.tsx | 48 ++++++++++----------- src/frontend/components/AppCard.tsx | 11 ++--- src/frontend/components/DashboardLayout.tsx | 27 +++++++++--- src/frontend/components/StatsCard.tsx | 4 +- src/frontend/components/SummaryCard.tsx | 14 ++++-- src/index.css | 8 ++-- 6 files changed, 68 insertions(+), 44 deletions(-) diff --git a/src/frontend/App.tsx b/src/frontend/App.tsx index 09b029f..838a693 100644 --- a/src/frontend/App.tsx +++ b/src/frontend/App.tsx @@ -4,38 +4,38 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { createRouter, RouterProvider } from '@tanstack/react-router' import { routeTree } from './routeTree.gen' -const theme = createTheme({ + const theme = createTheme({ primaryColor: 'brand-blue', colors: { 'brand-blue': [ - '#ebf2ff', - '#d6e4ff', - '#adc8ff', - '#85acff', - '#5c90ff', - '#2563eb', // Primary Blue - '#1e4fb8', - '#173b85', - '#102752', - '#09131f', + '#f0f9ff', + '#e0f2fe', + '#bae6fd', + '#7dd3fc', + '#38bdf8', + '#0ea5e9', // Primary Blue (Sky) + '#0284c7', + '#0369a1', + '#075985', + '#0c4a6e', ], 'brand-purple': [ - '#f3ebff', - '#e7d6ff', - '#cfadff', - '#b785ff', - '#9f5cff', - '#7c3aed', // Primary Purple - '#632eb8', - '#4a2285', - '#311652', - '#180b1f', + '#faf5ff', + '#f3e8ff', + '#e9d5ff', + '#d8b4fe', + '#c084fc', + '#a855f7', // Primary Purple + '#9333ea', + '#7e22ce', + '#6b21a8', + '#581c87', ], }, fontFamily: 'Inter, system-ui, Avenir, Helvetica, Arial, sans-serif', headings: { fontFamily: 'Inter, system-ui, sans-serif', - fontWeight: '600', + fontWeight: '500', // Softer headings }, }) @@ -59,8 +59,8 @@ declare module '@tanstack/react-router' { export function App() { return ( <> - - + + diff --git a/src/frontend/components/AppCard.tsx b/src/frontend/components/AppCard.tsx index 4880e26..130c03b 100644 --- a/src/frontend/components/AppCard.tsx +++ b/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 ( ({ 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)', }, }, diff --git a/src/frontend/components/DashboardLayout.tsx b/src/frontend/components/DashboardLayout.tsx index 1a119e7..133c8ad 100644 --- a/src/frontend/components/DashboardLayout.tsx +++ b/src/frontend/components/DashboardLayout.tsx @@ -1,5 +1,6 @@ import { APP_CONFIGS } from '@/frontend/config/appMenus' import { + ActionIcon, AppShell, Avatar, Box, @@ -14,6 +15,7 @@ import { ThemeIcon } from '@mantine/core' import { useDisclosure } from '@mantine/hooks' +import { useMantineColorScheme, useComputedColorScheme } from '@mantine/core' import { Link, useLocation, useMatches, useNavigate, useParams } from '@tanstack/react-router' import { TbApps, @@ -23,7 +25,9 @@ import { TbDeviceMobile, TbLogout, TbSettings, - TbUserCircle + TbUserCircle, + TbSun, + TbMoon } from 'react-icons/tb' interface DashboardLayoutProps { @@ -31,7 +35,10 @@ interface DashboardLayoutProps { } export function DashboardLayout({ children }: DashboardLayoutProps) { - const [opened, { toggle }] = useDisclosure() + const [mobileOpened, { toggle: toggleMobile }] = useDisclosure() + const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true) + const { toggleColorScheme } = useMantineColorScheme() + const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true }) const location = useLocation() const navigate = useNavigate() const { appId } = useParams({ strict: false }) as { appId?: string } @@ -54,19 +61,21 @@ export function DashboardLayout({ children }: DashboardLayoutProps) { navbar={{ width: 260, breakpoint: 'sm', - collapsed: { mobile: !opened }, + collapsed: { mobile: !mobileOpened, desktop: !desktopOpened }, }} padding="xl" styles={(theme) => ({ main: { - backgroundColor: theme.colors.dark[7], // Dark mode background + backgroundColor: computedColorScheme === 'dark' ? theme.colors.dark[9] : theme.colors.gray[0], + transition: 'background-color 0.2s ease', }, })} > - + + + toggleColorScheme()} + variant="default" + size="lg" + aria-label="Toggle color scheme" + > + {computedColorScheme === 'dark' ? : } + ({ root: { - backgroundColor: theme.colors.dark[6], - borderColor: 'rgba(255,255,255,0.05)', + backgroundColor: 'var(--mantine-color-body)', + borderColor: 'rgba(128,128,128,0.1)', }, })} > diff --git a/src/frontend/components/SummaryCard.tsx b/src/frontend/components/SummaryCard.tsx index d3c3681..e1238dc 100644 --- a/src/frontend/components/SummaryCard.tsx +++ b/src/frontend/components/SummaryCard.tsx @@ -1,4 +1,4 @@ -import { Card, Group, Text, ThemeIcon, Stack, Progress, Badge } from '@mantine/core' +import { Card, Group, Text, ThemeIcon, Stack, Progress, Badge, useComputedColorScheme } from '@mantine/core' import { IconType } from 'react-icons' import { TbTrendingUp, TbTrendingDown } from 'react-icons/tb' @@ -27,6 +27,8 @@ export function SummaryCard({ progress, isError }: SummaryCardProps) { + const scheme = useComputedColorScheme('light', { getInitialValueInEffect: true }) + return ( ({ root: { - backgroundColor: isError && Number(value) > 0 ? 'rgba(239, 68, 68, 0.05)' : 'rgba(30, 41, 59, 0.4)', - borderColor: isError && Number(value) > 10 ? 'rgba(239, 68, 68, 0.3)' : 'rgba(255, 255, 255, 0.08)', - transition: 'transform 0.2s ease', + backgroundColor: isError && Number(value) > 0 + ? (scheme === 'dark' ? 'rgba(239, 68, 68, 0.1)' : 'rgba(255, 241, 242, 1)') // light pink for error in light mode + : 'var(--mantine-color-body)', + borderColor: isError && Number(value) > 10 + ? 'rgba(239, 68, 68, 0.3)' + : scheme === 'dark' ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.05)', + transition: 'transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease', '&:hover': { transform: 'translateY(-4px)', } diff --git a/src/index.css b/src/index.css index 774be0a..6b5e2f4 100644 --- a/src/index.css +++ b/src/index.css @@ -27,8 +27,8 @@ html, body { height: 100%; width: 100%; font-family: var(--font-inter); - background-color: var(--bg-dark); /* Default to Dark Mode as per App.tsx */ - color: #F8FAFC; + /* background-color handled by Mantine */ + color: var(--mantine-color-text); } body { @@ -53,9 +53,9 @@ body { /* Premium Dashboard Utilities */ .glass { - background: rgba(30, 41, 59, 0.7); + background: var(--mantine-color-default); backdrop-filter: blur(12px); - border: 1px solid rgba(255, 255, 255, 0.1); + border: 1px solid rgba(128, 128, 128, 0.1); border-radius: 24px; /* XL rounding for cards */ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }