go full dark mode cuz why not

Signed-off-by: Vu Van Dung <me@joulev.dev>
joulev · May 6, 2024 · 2722c73 · 2722c73
1 parent 2618475
commit 2722c73
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 124 deletions.
diff --git a/package.json b/package.json
@@ -81,6 +81,7 @@
     "tailwind-merge": "2.3.0",
     "tailwindcss": "3.4.3",
     "tailwindcss-animate": "1.0.7",
+    "tailwindcss-bg-patterns": "0.3.0",
     "typescript": "5.4.5",
     "valibot": "0.30.0",
     "wrangler": "3.53.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/background.tsx b/src/app/background.tsx
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -7,7 +7,6 @@ import localFont from "next/font/local";
 
 import { cn } from "~/lib/cn";
 
-import { Background } from "./background";
 import "./globals.css";
 import { VersionFooter } from "./version-footer";
 
@@ -31,7 +30,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <body
         className={cn(sans.variable, mono.variable, "bg-[#334155] font-sans text-text-primary")}
       >
-        <Background />
+        <div className="fixed inset-0 pattern-cross pattern-text-tertiary pattern-bg-black pattern-size-6 pattern-opacity-20" />
         {children}
         <VersionFooter />
         <Analytics />

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,6 +1,8 @@
 import typography from "@tailwindcss/typography";
 import type { Config } from "tailwindcss";
 import animate from "tailwindcss-animate";
+// @ts-expect-error
+import bgPatterns from "tailwindcss-bg-patterns";
 import defaultTheme from "tailwindcss/defaultTheme";
 
 const config: Config = {
@@ -84,7 +86,7 @@ const config: Config = {
       },
     },
   },
-  plugins: [animate, typography],
+  plugins: [animate, typography, bgPatterns],
 };
 
 export default config;