From d72fd1bfbe7e44856a8be474e22b4994a4027b89 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Wed, 5 Nov 2025 11:44:34 -0800
Subject: [PATCH] refactor: unify colour tokens for future dark mode support

---
 src/webapp/.storybook/preview.tsx             |  4 +--
 .../profile/[handle]/(withHeader)/layout.tsx  |  2 +-
 src/webapp/app/layout.tsx                     |  2 +-
 .../bottomBarItem/BottomBarItem.tsx           | 10 ++++--
 .../components/navigation/header/Header.tsx   |  6 ++--
 .../feedActivityStatus/FeedActivityStatus.tsx | 12 ++++---
 .../components/feedItem/Skeleton.FeedItem.tsx | 15 ++++++--
 .../profileHeader/ProfileHeader.tsx           |  6 ++--
 .../profileHeader/Skeleton.ProfileHeader.tsx  |  2 +-
 .../components/profileMenu/ProfileMenu.tsx    |  5 +--
 .../components/profileTabs/ProfileTabs.tsx    | 34 ++++++++++---------
 11 files changed, 60 insertions(+), 38 deletions(-)

diff --git a/src/webapp/.storybook/preview.tsx b/src/webapp/.storybook/preview.tsx
index d54f76ab..05689d5a 100644
--- a/src/webapp/.storybook/preview.tsx
+++ b/src/webapp/.storybook/preview.tsx
@@ -1,7 +1,7 @@
 import '@mantine/core/styles.css';
 
-import React, { useEffect } from 'react';
-import { MantineProvider, useMantineColorScheme } from '@mantine/core';
+import React from 'react';
+import { MantineProvider } from '@mantine/core';
 import { theme } from '../styles/theme';
 import { Hanken_Grotesk } from 'next/font/google';
 
diff --git a/src/webapp/app/(dashboard)/profile/[handle]/(withHeader)/layout.tsx b/src/webapp/app/(dashboard)/profile/[handle]/(withHeader)/layout.tsx
index d152aac6..48cf3c36 100644
--- a/src/webapp/app/(dashboard)/profile/[handle]/(withHeader)/layout.tsx
+++ b/src/webapp/app/(dashboard)/profile/[handle]/(withHeader)/layout.tsx
@@ -42,7 +42,7 @@ export default async function Layout(props: Props) {
           zIndex: 1,
         }}
       >
-        <Container bg={'white'} px={'xs'} mt={'md'} size={'xl'}>
+        <Container px={'xs'} mt={'md'} size={'xl'}>
           <ProfileTabs handle={handle} />
         </Container>
       </Box>
diff --git a/src/webapp/app/layout.tsx b/src/webapp/app/layout.tsx
index c7262cd6..73839230 100644
--- a/src/webapp/app/layout.tsx
+++ b/src/webapp/app/layout.tsx
@@ -26,7 +26,7 @@ export default function RootLayout({
       {...mantineHtmlProps}
     >
       <head>
-        <ColorSchemeScript />
+        <ColorSchemeScript defaultColorScheme="light" />
       </head>
       <body className={GlobalStyles.main}>
         <Providers>{children}</Providers>
diff --git a/src/webapp/components/navigation/bottomBarItem/BottomBarItem.tsx b/src/webapp/components/navigation/bottomBarItem/BottomBarItem.tsx
index c289c264..0683b7bf 100644
--- a/src/webapp/components/navigation/bottomBarItem/BottomBarItem.tsx
+++ b/src/webapp/components/navigation/bottomBarItem/BottomBarItem.tsx
@@ -3,6 +3,7 @@ import { ActionIcon } from '@mantine/core';
 import { usePathname } from 'next/navigation';
 import Link from 'next/link';
 import { ReactElement, isValidElement } from 'react';
+import { useColorScheme } from '@mantine/hooks';
 
 interface Props {
   href: string;
@@ -10,6 +11,7 @@ interface Props {
 }
 
 export default function BottomBarItem(props: Props) {
+  const colorScheme = useColorScheme();
   const pathname = usePathname();
   const isActive = pathname === props.href;
 
@@ -28,8 +30,12 @@ export default function BottomBarItem(props: Props) {
       href={props.href}
       variant={isActive ? 'light' : 'transparent'}
       size={'lg'}
-      bg={isActive ? 'gray.1' : 'transparent'}
-      color={isActive ? 'dark' : 'gray'}
+      bg={
+        isActive
+          ? `${colorScheme === 'dark' ? 'dark.5' : 'gray.1'}`
+          : 'transparent'
+      }
+      color="gray"
     >
       {renderIcon()}
     </ActionIcon>
diff --git a/src/webapp/components/navigation/header/Header.tsx b/src/webapp/components/navigation/header/Header.tsx
index ced2768c..278ca9b4 100644
--- a/src/webapp/components/navigation/header/Header.tsx
+++ b/src/webapp/components/navigation/header/Header.tsx
@@ -1,4 +1,4 @@
-import { Box, Divider, Group } from '@mantine/core';
+import { Box, Divider, Group, Paper } from '@mantine/core';
 import NavbarToggle from '../NavbarToggle';
 import { ReactElement } from 'react';
 
@@ -8,7 +8,7 @@ interface Props {
 
 export default function Header(props: Props) {
   return (
-    <Box pos={'sticky'} top={0} bg={'white'} style={{ zIndex: 1 }}>
+    <Paper pos={'sticky'} top={0} style={{ zIndex: 1 }}>
       <Group gap={'xs'} p={'xs'} justify="space-between">
         {props.children}
         <Box ml={'auto'}>
@@ -16,6 +16,6 @@ export default function Header(props: Props) {
         </Box>
       </Group>
       <Divider />
-    </Box>
+    </Paper>
   );
 }
diff --git a/src/webapp/features/feeds/components/feedActivityStatus/FeedActivityStatus.tsx b/src/webapp/features/feeds/components/feedActivityStatus/FeedActivityStatus.tsx
index 2f6616cc..a1f4dfde 100644
--- a/src/webapp/features/feeds/components/feedActivityStatus/FeedActivityStatus.tsx
+++ b/src/webapp/features/feeds/components/feedActivityStatus/FeedActivityStatus.tsx
@@ -1,10 +1,13 @@
-import { Anchor, Avatar, Group, Paper, Stack, Text } from '@mantine/core';
+'use client';
+
+import { Anchor, Avatar, Card, Group, Paper, Stack, Text } from '@mantine/core';
 import { FeedItem, Collection } from '@/api-client';
 import { Fragment } from 'react';
 import Link from 'next/link';
 import { getRelativeTime } from '@/lib/utils/time';
 import { getRecordKey } from '@/lib/utils/atproto';
 import { sanitizeText } from '@/lib/utils/text';
+import { useColorScheme } from '@mantine/hooks';
 
 interface Props {
   user: FeedItem['user'];
@@ -13,6 +16,7 @@ interface Props {
 }
 
 export default function FeedActivityStatus(props: Props) {
+  const colorScheme = useColorScheme();
   const MAX_DISPLAYED = 2;
   const time = getRelativeTime(props.createdAt.toString());
   const relativeCreatedDate = time === 'just now' ? `Now` : `${time} ago`;
@@ -23,7 +27,7 @@ export default function FeedActivityStatus(props: Props) {
     const remainingCount = collections.length - MAX_DISPLAYED;
 
     return (
-      <Text fw={500} c={'gray.7'}>
+      <Text fw={500} c={colorScheme === 'dark' ? 'gray' : 'gray.7'}>
         <Anchor
           component={Link}
           href={`/profile/${props.user.handle}`}
@@ -64,7 +68,7 @@ export default function FeedActivityStatus(props: Props) {
   };
 
   return (
-    <Paper bg={'gray.1'} radius={'lg'}>
+    <Card p={0} bg={colorScheme === 'dark' ? 'dark.4' : 'gray.1'} radius={'lg'}>
       <Stack gap={'xs'}>
         <Group gap={'xs'} wrap="nowrap" align="center" p={'xs'}>
           <Avatar
@@ -76,6 +80,6 @@ export default function FeedActivityStatus(props: Props) {
           {renderActivityText()}
         </Group>
       </Stack>
-    </Paper>
+    </Card>
   );
 }
diff --git a/src/webapp/features/feeds/components/feedItem/Skeleton.FeedItem.tsx b/src/webapp/features/feeds/components/feedItem/Skeleton.FeedItem.tsx
index ade0bb0e..c2e30188 100644
--- a/src/webapp/features/feeds/components/feedItem/Skeleton.FeedItem.tsx
+++ b/src/webapp/features/feeds/components/feedItem/Skeleton.FeedItem.tsx
@@ -1,11 +1,20 @@
+'use client';
+
 import UrlCardSkeleton from '@/features/cards/components/urlCard/Skeleton.UrlCard';
-import { Avatar, Group, Paper, Skeleton, Stack } from '@mantine/core';
+import { Avatar, Card, Group, Paper, Skeleton, Stack } from '@mantine/core';
+import { useColorScheme } from '@mantine/hooks';
 
 export default function FeedItemSkeleton() {
+  const colorScheme = useColorScheme();
+
   return (
     <Stack gap={'xs'} align="stretch">
       {/* Feed activity status*/}
-      <Paper bg={'gray.1'} radius={'lg'}>
+      <Card
+        p={0}
+        bg={colorScheme === 'dark' ? 'dark.4' : 'gray.1'}
+        radius={'lg'}
+      >
         <Stack gap={'xs'} align="stretch" w={'100%'}>
           <Group gap={'xs'} wrap="nowrap" align="center" p={'xs'}>
             <Avatar />
@@ -15,7 +24,7 @@ export default function FeedItemSkeleton() {
             </Stack>
           </Group>
         </Stack>
-      </Paper>
+      </Card>
 
       <UrlCardSkeleton />
     </Stack>
diff --git a/src/webapp/features/profile/components/profileHeader/ProfileHeader.tsx b/src/webapp/features/profile/components/profileHeader/ProfileHeader.tsx
index 5f7dc3fe..cd20535d 100644
--- a/src/webapp/features/profile/components/profileHeader/ProfileHeader.tsx
+++ b/src/webapp/features/profile/components/profileHeader/ProfileHeader.tsx
@@ -23,7 +23,7 @@ export default async function ProfileHeader(props: Props) {
   const profile = await getProfile(props.handle);
 
   return (
-    <Container bg={'white'} p={0} size={'xl'}>
+    <Container p={0} size={'xl'}>
       <MinimalProfileHeaderContainer
         avatarUrl={profile.avatarUrl}
         name={profile.name}
@@ -69,9 +69,9 @@ export default async function ProfileHeader(props: Props) {
             component="a"
             href={`https://bsky.app/profile/${profile.handle}`}
             target="_blank"
+            variant="light"
             radius={'xl'}
-            bg="gray.2"
-            c={'gray'}
+            color={'gray'}
             leftSection={<FaBluesky />}
           >
             {truncateText(profile.handle, 14)}
diff --git a/src/webapp/features/profile/components/profileHeader/Skeleton.ProfileHeader.tsx b/src/webapp/features/profile/components/profileHeader/Skeleton.ProfileHeader.tsx
index f450ccc0..638a070e 100644
--- a/src/webapp/features/profile/components/profileHeader/Skeleton.ProfileHeader.tsx
+++ b/src/webapp/features/profile/components/profileHeader/Skeleton.ProfileHeader.tsx
@@ -10,7 +10,7 @@ import {
 
 export default function ProfileHeaderSkeleton() {
   return (
-    <Container bg={'white'} p={'xs'} size={'xl'}>
+    <Container p={'xs'} size={'xl'}>
       <Stack gap={'sm'}>
         <Stack gap={'xl'}>
           <Grid gutter={'md'} align={'center'} grow>
diff --git a/src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx b/src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx
index b5548912..1d3bd1e3 100644
--- a/src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx
+++ b/src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx
@@ -16,9 +16,11 @@ import Link from 'next/link';
 import { IoMdLogOut } from 'react-icons/io';
 import { useNavbarContext } from '@/providers/navbar';
 import { BiSolidUserCircle } from 'react-icons/bi';
+import { useColorScheme } from '@mantine/hooks';
 
 export default function ProfileMenu() {
   const router = useRouter();
+  const colorScheme = useColorScheme();
   const { toggleMobile } = useNavbarContext();
   const { data, error, isPending } = useMyProfile();
   const { logout } = useAuth();
@@ -46,8 +48,7 @@ export default function ProfileMenu() {
         <Menu.Target>
           <Button
             variant="subtle"
-            color="gray"
-            c={'dark'}
+            color={colorScheme === 'dark' ? 'gray' : 'dark'}
             fz={'md'}
             radius={'md'}
             size="lg"
diff --git a/src/webapp/features/profile/components/profileTabs/ProfileTabs.tsx b/src/webapp/features/profile/components/profileTabs/ProfileTabs.tsx
index 77e2b9ad..ffe81b8d 100644
--- a/src/webapp/features/profile/components/profileTabs/ProfileTabs.tsx
+++ b/src/webapp/features/profile/components/profileTabs/ProfileTabs.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Group, ScrollAreaAutosize, Tabs } from '@mantine/core';
+import { Group, Paper, ScrollAreaAutosize, Tabs } from '@mantine/core';
 import TabItem from './TabItem';
 import { usePathname } from 'next/navigation';
 
@@ -16,21 +16,23 @@ export default function ProfileTabs({ handle }: Props) {
 
   return (
     <Tabs value={currentTab}>
-      <ScrollAreaAutosize type="scroll">
-        <Tabs.List>
-          <Group wrap="nowrap">
-            <TabItem value="profile" href={basePath}>
-              Profile
-            </TabItem>
-            <TabItem value="cards" href={`${basePath}/cards`}>
-              Cards
-            </TabItem>
-            <TabItem value="collections" href={`${basePath}/collections`}>
-              Collections
-            </TabItem>
-          </Group>
-        </Tabs.List>
-      </ScrollAreaAutosize>
+      <Paper radius={0}>
+        <ScrollAreaAutosize type="scroll">
+          <Tabs.List>
+            <Group wrap="nowrap">
+              <TabItem value="profile" href={basePath}>
+                Profile
+              </TabItem>
+              <TabItem value="cards" href={`${basePath}/cards`}>
+                Cards
+              </TabItem>
+              <TabItem value="collections" href={`${basePath}/collections`}>
+                Collections
+              </TabItem>
+            </Group>
+          </Tabs.List>
+        </ScrollAreaAutosize>
+      </Paper>
     </Tabs>
   );
 }
-- 
2.51.2