revert: light mode

public/blog/atom.xml

@@ -2,7 +2,7 @@
 <feed xmlns="http://www.w3.org/2005/Atom">
     <id>https://srizan.dev/blog</id>
     <title>Sr Izan's Blog</title>
-    <updated>2023-11-22T20:55:41.512Z</updated>
+    <updated>2023-11-23T15:57:20.074Z</updated>
     <generator>https://github.com/jpmonette/feed</generator>
     <author>
         <name>Sr Izan</name>

public/blog/rss.xml

@@ -4,7 +4,7 @@
         <title>Sr Izan's Blog</title>
         <link>https://srizan.dev/blog</link>
         <description>My little donowall place on the net</description>
-        <lastBuildDate>Wed, 22 Nov 2023 20:55:41 GMT</lastBuildDate>
+        <lastBuildDate>Thu, 23 Nov 2023 15:57:20 GMT</lastBuildDate>
         <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
         <generator>https://github.com/jpmonette/feed</generator>
         <language>en</language>

src/app/(pages)/blog/[id]/page.tsx

@@ -78,6 +78,7 @@ export async function generateMetadata({ params }: { params: { id: string } }):
     }
 
     const filteredPost = jsonDataArray.filter((post) => post.id === id)[0];
+    if (!filteredPost) redirect('/blog')
     jsonData = filteredPost;
 
     return {

src/app/_components/BlogNavBar.tsx

@@ -4,8 +4,6 @@
 import { useEffect, useState } from 'react';
 import '../_css/BlogNavBar.css'
 import Link from 'next/link';
-import Pfp from '../../../public/pfp.webp';
-import Image from 'next/image';
 
 export default function BlogNavBar(props: Props) {
     const [isScrolled, setIsScrolled] = useState(false);

src/app/_components/BlogPostCard.tsx

@@ -22,7 +22,7 @@ export default function BlogPostCard(props: Props) {
                     <Typography variant="h5">
                         {props.title}
                     </Typography>
-                    <Typography variant="subtitle1" color="text.secondary" component="div">
+                    <Typography variant="subtitle1" color="text.secondary" component="div" suppressHydrationWarning>
                         {dayjs(props.date, 'DD/MM/YYYY').toDate().toLocaleDateString()}
                     </Typography>
                     <Typography variant="body2" color="text.secondary" component="div">

src/app/_components/ThemeRegistry/theme.ts

@@ -6,23 +6,12 @@ const roboto = Roboto({
   subsets: ['latin'],
   display: 'swap',
 });
-
-// Check if window is defined before accessing its properties
-const prefersDarkMode = typeof window !== 'undefined' ? window.matchMedia('(prefers-color-scheme: dark)') : null;
-
-// Add event listener only if prefersDarkMode is defined
-if (prefersDarkMode) {
-  prefersDarkMode.addEventListener('change', () => {
-    location.reload();
-  });
-}
-
 const theme = createTheme({
   palette: {
-    mode: prefersDarkMode && prefersDarkMode.matches ? 'dark' : 'light',
+    mode: 'dark',
     background: {
-      default: prefersDarkMode && prefersDarkMode.matches ? '#0d0d0d' : '#fafafa',
-      paper: prefersDarkMode && prefersDarkMode.matches ? '#0d0d0d' : '#fafafa',
+      default: '#0d0d0d',
+      paper: '#0d0d0d',
     },
     primary: {
       main: '#646cff',

src/app/_css/BlogNavBar.css

@@ -48,6 +48,6 @@
 
 @media (prefers-color-scheme: light) {
     .navBar {
-        background-color: #f2f2f2;
+        background-color: #0d0d0d;
     }
 }

src/app/globals.css

@@ -53,13 +53,10 @@ button:focus-visible {
 
 @media (prefers-color-scheme: light) {
   :root {
-    color: #213547;
-    background-color: #ffffff;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #1d1d1d;
   }
   a:hover {
     color: #747bff;
   }
-  button {
-    background-color: #f9f9f9;
-  }
 }