From 6f3974246446322971175c6d7551d2b1fd877a59 Mon Sep 17 00:00:00 2001 From: Johnson Mao Date: Wed, 1 Nov 2023 22:51:07 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20add=20root=20background=20style?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/layout.tsx | 3 ++- tailwind.config.js | 33 ++++++++++++++++++--------------- 2 files changed, 20 insertions(+), 16 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index e028c78..de31ec1 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -21,7 +21,8 @@ export async function generateMetadata(): Promise { function HtmlLayout({ children }: React.PropsWithChildren) { return ( - + +
{children} diff --git a/tailwind.config.js b/tailwind.config.js index 3e5bf74..a09ea24 100644 --- 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)', } }) })