Added dark mode

sivert-io · Oct 30, 2023 · 2de5a4b · 2de5a4b · vercel · Oct 30, 2023
1 parent 949f543
commit 2de5a4b
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 27 deletions.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -7,10 +7,10 @@ import { IoLogoGithub } from "react-icons/io5";
 
 export function Header({
   headerPadding,
-  maxWidth,
+  width,
 }: {
   headerPadding: string;
-  maxWidth: string;
+  width: string;
 }) {
   const router = useRouter();
   const [allTags, setallTags] = useState<string[]>([]);
@@ -34,15 +34,13 @@ export function Header({
 
   return (
     <motion.header
-      style={{ transition: "all ease .25s" }}
       className={`z-50 flex place-items-center justify-center fixed top-4 left-2 sm:left-[17px] xl:left-0 right-2 md:right-0`}
     >
       <motion.div
-        style={{ transition: "all ease .25s" }}
-        className={`flex flex-row ${maxWidth} justify-between items-center ${headerPadding} rounded-lg shadow bg-base-100 relative`}
+        style={{ transition: "padding ease .25s, width ease .25s" }}
+        className={`flex flex-row ${width} justify-between items-center ${headerPadding} rounded-lg shadow bg-base-100 relative`}
       >
         <motion.div
-          style={{ transition: "all ease .25s" }}
           className={`absolute left-0 right-0 -bottom-12 bg-base-100 rounded-lg shadow p-1 flex items-center justify-end gap-1 ${
             showTags
               ? "pointer-events-auto opacity-100 translate-y-0"

diff --git a/components/ThemeWrapper.tsx b/components/ThemeWrapper.tsx
@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from "react";
+import Head from 'next/head'
+import { FaMoon, FaSun } from "react-icons/fa";
+import colors from "../tailwind.config";
+
+export default function ThemeWrapper({ children }) {
+  const [theme, settheme] = useState<"sivert_dark" | "sivert_light">(
+    "sivert_dark"
+  );
+  useEffect(() => {
+    const localTheme = localStorage.getItem("theme");
+    if (theme) settheme(localTheme as typeof theme);
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+  return (
+    <>
+      <Head>
+        <meta
+          name="theme-color"
+          content={
+            theme === "sivert_dark"
+              ? colors.daisyui.themes[0].sivert_dark["base-100"]
+              : colors.daisyui.themes[0].sivert_light["base-100"]
+          }
+        />
+      </Head>
+      <div data-theme={theme} 
+      className="overflow-y-scroll h-screen scroll-smooth bg-base-200 text-base-content transition-none">
+        <button
+          onClick={() =>
+            settheme(theme === "sivert_dark" ? "sivert_light" : "sivert_dark")
+          }
+          className="btn btn-circle btn-ghost fixed bottom-8 right-8"
+        >
+          {theme === "sivert_dark" ? <FaMoon /> : <FaSun />}
+        </button>
+        {children}
+      </div>
+    </>
+  );
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -9,6 +9,7 @@ import { Roboto, Noto_Color_Emoji, JetBrains_Mono } from "next/font/google";
 import { useEffect, useState } from "react";
 import TimeAgo from "javascript-time-ago";
 import en from "javascript-time-ago/locale/en.json";
+import ThemeWrapper from "components/ThemeWrapper";
 
 const roboto = Roboto({
   subsets: ["latin"],
@@ -40,7 +41,7 @@ export default function MyApp({ Component, pageProps, router }) {
   }, [pageProps.post]);
 
   return (
-    <>
+    <ThemeWrapper>
       <Head>
         <link rel="icon" type="image/x-icon" href="/favicon.png" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -51,7 +52,7 @@ export default function MyApp({ Component, pageProps, router }) {
         </style>
       </Head>
 
-      <Header headerPadding={headerPadding} maxWidth={headerWidth} />
+      <Header headerPadding={headerPadding} width={headerWidth} />
 
       <style jsx global>{`
         html {
@@ -75,6 +76,6 @@ export default function MyApp({ Component, pageProps, router }) {
           key={`${pageProps.post?.url}_${router.route}_${router.query.slug}`}
         />
       </AnimatePresence>
-    </>
+    </ThemeWrapper>
   );
 }
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -4,10 +4,10 @@ export default function Document() {
   return (
     <Html
       lang="en"
-      className="bg-base-200 overflow-y-scroll h-screen scroll-smooth"
+      className="bg-base-200"
+      data-theme='sivert_dark'
     >
       <Head>
-        <meta name="theme-color" content="#fff" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <body>

diff --git a/pages/posts/[slug].tsx b/pages/posts/[slug].tsx
@@ -49,7 +49,7 @@ const PostLayout = ({ post }: { post: Post }) => {
   );
 
   const ImageAuthor = () => {
-    const style = "font-medium text-gray-400 text-sm";
+    const style = "font-medium text-base-content opacity-75 text-sm";
     return (
       <p className={style}>
         Credit:{" "}

diff --git a/styles/pretty-code.css b/styles/pretty-code.css
@@ -49,14 +49,6 @@ pre > code {
   @apply !text-purple-200 bg-purple-800/50 border-b-purple-600 font-bold;
 }
 
-.prose :where(a):not(:where([class~="not-prose"] *)) {
-  color: hsl(var(--n));
-}
-
-.prose :where(a):not(:where([class~="not-prose"] *)):hover {
-  background-color: hsl(var(--a));
-}
-
 code {
   counter-reset: line;
 }

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -8,7 +8,6 @@ const linkHeadingStyles = {
   },
 };
 
-
 module.exports = {
 	theme: {
     extend: {
@@ -32,14 +31,14 @@ module.exports = {
             },
             a: {
               textDecoration: 'none',
-              borderBottom: `2px solid ${colors.cyan[800]}`,
-              color: colors.cyan[400],
+              borderBottom: `2px solid hsl(var(--p))`,
+              color: `hsl(var(--p))`,
               transition:
                 'color 0.2s ease, border-color 0.2s ease, background 0.2s ease',
               '&:hover': {
-                color: `${colors.zinc[900]} !important`,
-                borderBottomColor: `${colors.cyan[200]} !important`,
-                background: colors.cyan[200],
+                color: `hsl(var(--pc)) !important`,
+                borderBottomColor: ` hsl(var(--p)) !important`,
+                background: `hsl(var(--p))`,
               },
             },
             code: {
@@ -78,9 +77,11 @@ module.exports = {
     require("@tailwindcss/line-clamp"),
   ],
   daisyui: {
+    darkTheme: "dark",
+    base: false,
     themes: [
       {
-        mytheme: {
+        sivert_light: {
           primary: "#570df8",
           secondary: "#f000b8",
           accent: "#1dcdbc",
@@ -91,6 +92,17 @@ module.exports = {
           warning: "#fbbd23",
           error: "#f87272",
         },
+        sivert_dark: {
+          primary: "#d0bcff",
+          secondary: "#ccc2dc",
+          accent: "#efb8c8",
+          neutral: "#2b3440",
+          "base-100": "#2b2930",
+          info: "#3abff8",
+          success: "#36d399",
+          warning: "#fbbd23",
+          error: "#f2b8b5",
+        },
       },
     ],
   },