🐛 Fix dark mode account iccon shows wrong

package.json

@@ -24,6 +24,7 @@
     "axios-case-converter": "^1.1.1",
     "cookies-next": "^5.0.2",
     "next": "15.1.3",
+    "next-nprogress-bar": "^2.4.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",

src/components/CapAppBar.tsx

@@ -77,7 +77,7 @@ export function CapAppBar() {
                   <Avatar sx={{ backgroundColor: 'transparent' }} src={getAttachmentUrl(userStore.account.avatar)} />
                 ) : (
                   <Avatar sx={{ backgroundColor: 'transparent' }}>
-                    <AccountCircle sx={{ color: theme.palette.text.primary }} />
+                    <AccountCircle sx={{ color: theme.palette.text.primary }} className="dark:invert" />
                   </Avatar>
                 )}
               </IconButton>

src/components/CapDrawer.tsx

@@ -51,7 +51,14 @@ export function CapDrawer({ width, open, onClose }: { width: number; open: boole
       <Box sx={{ width: width }} role="presentation" onClick={onClose}>
         <Toolbar style={{ padding: 0 }}>
           <Box display="flex" gap={2} sx={{ mx: 2 }}>
-            <Image src="/logo.png" width={28} height={28} alt="company logo" style={{ objectFit: 'contain' }} />
+            <Image
+              src="/logo.png"
+              width={28}
+              height={28}
+              alt="company logo"
+              style={{ objectFit: 'contain' }}
+              className="dark:invert"
+            />
 
             <Box display="flex" flexDirection="column" justifyContent="center">
               <Typography variant="body2" component="h2" fontWeight="bold" lineHeight={1.4}>

src/pages/_app.tsx

@@ -3,6 +3,7 @@ import type { AppProps } from 'next/app'
 import { Box, createTheme, CssBaseline, ThemeProvider } from '@mui/material'
 import { Roboto } from 'next/font/google'
 import { CapAppBar } from '@/components/CapAppBar'
+import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar'
 import { useUserStore } from '@/services/user'
 import { useEffect } from 'react'
 import Head from 'next/head'
@@ -15,9 +16,9 @@ const fontRoboto = Roboto({
 
 const siteTheme = createTheme({
   cssVariables: true,
-  // colorSchemes: {
-  //   dark: true,
-  // },
+  colorSchemes: {
+    dark: true,
+  },
   palette: {
     mode: 'light',
     primary: {
@@ -57,6 +58,12 @@ export default function App({ Component, pageProps }: AppProps) {
 
       <ThemeProvider theme={siteTheme}>
         <CssBaseline />
+        <ProgressBar
+          height="4px"
+          color={siteTheme.palette.primary.main}
+          options={{ showSpinner: false }}
+          shallowRouting
+        />
 
         <CapAppBar />
         <Box sx={{ minHeight: 'calc(100vh - 64px)' }}>

src/pages/index.tsx

@@ -22,7 +22,7 @@ export default function Home() {
     <>
       <Container sx={{ py: 24, display: 'flex', flexDirection: 'column', gap: 32 }}>
         <Box>
-          <Image src="/logo.png" width={128} height={128} alt="company logo" className="mb-2" />
+          <Image src="/logo.png" width={128} height={128} alt="company logo" className="mb-2 dark:invert" />
           <Typography variant="h3" component="h1" gutterBottom>
             Welcome to <br />
             the Solsynth Capital.
@@ -92,6 +92,7 @@ export default function Home() {
                 width={256}
                 height={80}
                 style={{ marginLeft: '-20px' }}
+                className="dark:invert"
               />
               <Typography variant="h4" component="h2" sx={{ my: 2 }}>
                 Made by Solsynth

src/pages/posts/[...id].tsx

@@ -199,7 +199,7 @@ export default function Post({ post, attachments }: InferGetServerSidePropsType<
 
         <Divider />
 
-        <Box sx={{ mt: 2.5, maxWidth: 'unset' }} className="prose prose-lg">
+        <Box sx={{ mt: 2.5, maxWidth: 'unset' }} className="prose prose-lg dark:prose-invert">
           {post.body.content && <div dangerouslySetInnerHTML={{ __html: post.body.content }} />}
         </Box>
 

src/pages/posts/index.tsx

@@ -97,7 +97,7 @@ export default function PostList({ posts, page, pages }: InferGetServerSideProps
 
               <Divider />
 
-              <Box sx={{ maxWidth: 'unset' }} className="prose prose-md">
+              <Box sx={{ maxWidth: 'unset' }} className="prose prose-md dark:prose-invert">
                 {p.body.content && <div dangerouslySetInnerHTML={{ __html: p.body.content }} />}
               </Box>
             </Box>

src/pages/products/solar-network.tsx

@@ -124,7 +124,7 @@ export default function ProductSolarNetwork() {
           width={128}
           height={128}
           style={{ objectFit: 'cover' }}
-          className="shadow-xl rounded-2xl mx-auto mb-8 border border-1 border-gray-200"
+          className="shadow-xl rounded-2xl mx-auto mb-8 border border-1 border-gray-200 dark:invert"
           alt="solar network icon"
         />
         <Box position="relative" width="fit-content" className="animate__animated animate__fadeInUp">

src/pages/terms/privacy-policy.tsx

@@ -17,7 +17,7 @@ export default function PrivacyPolicy() {
 
       <Divider />
 
-      <Box component="article" sx={{ my: 5, maxWidth: 'unset' }} className="prose prose-lg">
+      <Box component="article" sx={{ my: 5, maxWidth: 'unset' }} className="prose prose-lg dark:prose-invert">
         <h2 id="introduction">Introduction</h2>
         <p>
           We take your privacy seriously. This privacy policy outlines the types of personal information we collect, how

src/pages/terms/user-agreements.tsx

@@ -17,7 +17,7 @@ export default function PrivacyPolicy() {
 
       <Divider />
 
-      <Box component="article" sx={{ my: 5, maxWidth: 'unset' }} className="prose prose-lg">
+      <Box component="article" sx={{ my: 5, maxWidth: 'unset' }} className="prose prose-lg dark:prose-invert">
         <p>
           This Agreement applies to all Solsynth LLC products, including but not limited to Solar Network, Solian,
           DietaryGuard, AceField.