💄 Dark mode

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

@@ -16,9 +16,9 @@ const fontRoboto = Roboto({
 
 const siteTheme = createTheme({
   cssVariables: true,
-  // colorSchemes: {
-  //   dark: true,
-  // },
+  colorSchemes: {
+    dark: true,
+  },
   palette: {
     mode: 'light',
     primary: {

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.