💄 add root background style

JohnsonMao · Nov 1, 2023 · 6f39742 · 6f39742
1 parent c087bdc
commit 6f39742
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 16 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -21,7 +21,8 @@ export async function generateMetadata(): Promise<Metadata> {
 function HtmlLayout({ children }: React.PropsWithChildren) {
   return (
     <Html>
-      <body className="body-bg dark:body-bg-dark">
+      <body>
+        <div className="root-background fixed inset-0 -z-50"></div>
         <Providers>{children}</Providers>
       </body>
     </Html>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -37,29 +37,32 @@ const tailwindcssConfig = {
   },
   plugins: [
     require('@tailwindcss/typography'),
-    plugin(({ addUtilities }) => {
-      addUtilities({
-        '.body-bg': {
-          '--color': 'rgba(0, 0, 0, 0.1)',
+    plugin(({ addComponents, theme }) => {
+      addComponents({
+        '.root-background': {
+          '--base-color': theme('colors.zinc.100'),
+          '--line-color': 'rgba(0, 0, 0, 0.04)',
           background: `
             linear-gradient(
               to left,
-              var(--color) 0,
-              var(--color) 1px,
-              transparent 1px,
-              transparent 10px
+              var(--line-color) 0,
+              var(--line-color) 10%,
+              transparent 10%,
+              transparent 100%
             ),
             linear-gradient(
               to top,
-              var(--color) 0,
-              var(--color) 1px,
-              transparent 1px,
-              transparent 10px
-            );`,
+              var(--line-color) 0,
+              var(--line-color) 10%,
+              transparent 10%,
+              transparent 100%
+            ),
+            var(--base-color);`,
           backgroundSize: '10px 10px;'
         },
-        '.body-bg-dark': {
-          '--color': 'rgba(255, 255, 255, 0.05)',
+        '.dark .root-background': {
+          '--base-color': theme('colors.zinc.900'),
+          '--line-color': 'rgba(255, 255, 255, 0.04)',
         }
       })
     })