feat: update generated noise background

Signed-off-by: Innei <[email protected]>
Innei · Feb 9, 2024 · cfb8c6a · cfb8c6a
1 parent 3cfaec3
commit cfb8c6a
Show file tree

Hide file tree

Showing 20 changed files with 101 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -96,6 +96,7 @@
     "next": "14.1.0",
     "next-themes": "0.2.1",
     "openai": "4.26.1",
+    "pngjs": "7.0.0",
     "qrcode.react": "3.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -133,6 +134,7 @@
     "@types/js-yaml": "4.0.9",
     "@types/markdown-escape": "1.1.3",
     "@types/node": "20.11.16",
+    "@types/pngjs": "6.0.4",
     "@types/react": "18.2.55",
     "@types/react-dom": "18.2.19",
     "@types/react-responsive-masonry": "2.1.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/(app)/friends/page.tsx b/src/app/(app)/friends/page.tsx
@@ -165,7 +165,7 @@ const Card: FC<{ link: LinkModel }> = ({ link }) => {
         text={link.name[0]}
         alt={`Avatar of ${link.name}`}
         size={64}
-        className="ring-2 ring-gray-400/30 dark:ring-slate-50"
+        className="ring-2 ring-gray-400/30 dark:ring-zinc-50"
       />
       <span className="flex h-full flex-col items-center justify-center space-y-2 py-3">
         <span className="text-lg font-medium">{link.name}</span>

diff --git a/src/app/(app)/layout.tsx b/src/app/(app)/layout.tsx
@@ -139,11 +139,16 @@ export default async function RootLayout(props: PropsWithChildren) {
   return (
     <ClerkProvider>
       <AppFeatureProvider tmdb={!!process.env.TMDB_API_KEY}>
-        <html lang="zh-CN" className="noise" suppressHydrationWarning>
+        <html
+          lang="zh-CN"
+          className="noise !bg-accent"
+          suppressHydrationWarning
+        >
           <head>
             <SayHi />
             <HydrationEndDetector />
-            <AccentColorStyleInjector />
+            <AccentColorStyleInjector color={themeConfig.config.color} />
+
             <link
               rel="shortcut icon"
               href={themeConfig.config.site.faviconDark}

diff --git a/src/app/(app)/thinking/page.tsx b/src/app/(app)/thinking/page.tsx
@@ -62,7 +62,7 @@ const PostBox = () => {
   return (
     <form onSubmit={preventDefault} className="mb-8">
       <TextArea
-        className="h-[150px] rounded-md border border-slate-200 bg-slate-50 dark:border-zinc-800 dark:bg-neutral-900/50"
+        className="h-[150px] rounded-md border border-slate-200 bg-zinc-50 dark:border-zinc-800 dark:bg-neutral-900/50"
         value={value}
         placeholder="此刻在想什么？"
         onChange={(e) => {

diff --git a/src/components/layout/container/Paper.tsx b/src/components/layout/container/Paper.tsx
@@ -6,7 +6,7 @@ export const Paper: Component<{
   return (
     <As
       className={clsxm(
-        'relative bg-slate-50 dark:bg-zinc-900 md:col-start-1 lg:col-auto',
+        'relative bg-white dark:bg-zinc-900 md:col-start-1 lg:col-auto',
         '-m-4 p-[2rem_1rem] md:m-0 lg:p-[30px_45px]',
         'rounded-[0_6px_6px_0] border-zinc-200/70 shadow-sm dark:border-neutral-800 dark:shadow-[#333] lg:border',
         'note-layout-main',

diff --git a/src/components/layout/footer/Footer.tsx b/src/components/layout/footer/Footer.tsx
@@ -6,7 +6,7 @@ export const Footer = () => {
   return (
     <footer
       data-hide-print
-      className="relative z-[1] mt-32 border-t border-x-uk-separator-opaque-light bg-slate-50 py-6 text-base-content/80 dark:border-uk-separator-opaque-dark dark:bg-neutral-900"
+      className="relative z-[1] mt-32 border-t border-x-uk-separator-opaque-light bg-accent/5 py-6 text-base-content/80 dark:border-uk-separator-opaque-dark"
     >
       <div className="px-4 sm:px-8">
         <div className="relative mx-auto max-w-7xl lg:px-8">

diff --git a/src/components/modules/post/PostItem.tsx b/src/components/modules/post/PostItem.tsx
@@ -32,7 +32,7 @@ export const PostItem = memo<{ data: PostModel }>(function PostItem({ data }) {
       </h2>
       <main className="relative mt-8 space-y-2">
         {!!data.summary && (
-          <p className="break-all leading-relaxed text-gray-900 dark:text-slate-50">
+          <p className="break-all leading-relaxed text-gray-900 dark:text-zinc-50">
             摘要： {data.summary}
           </p>
         )}

diff --git a/src/components/modules/shared/AccentColorStyleInjector.tsx b/src/components/modules/shared/AccentColorStyleInjector.tsx
@@ -1,5 +1,6 @@
 import Color from 'colorjs.io'
-import type { FC } from 'react'
+
+import { createPngNoiseBackground } from '~/lib/noise'
 
 const hexToOklchString = (hex: string) => {
   return new Color(hex).oklch
@@ -24,9 +25,11 @@ const accentColorDark = [
   '#838BC6',
 ]
 const defaultAccentColor = { light: accentColorLight, dark: accentColorDark }
-export const AccentColorStyleInjector: FC<{
+export async function AccentColorStyleInjector({
+  color,
+}: {
   color?: AccentColor
-}> = ({ color }) => {
+}) {
   const { light, dark } = color || defaultAccentColor
 
   const lightColors = light ?? accentColorLight
@@ -49,7 +52,14 @@ export const AccentColorStyleInjector: FC<{
       data-light={currentAccentColorLRef}
       data-dark={currentAccentColorDRef}
       dangerouslySetInnerHTML={{
-        __html: `html[data-theme='light'] {
+        __html: `
+        html[data-theme='light'].noise body::before {
+          background-image: ${await createPngNoiseBackground(currentAccentColorLRef)}
+        }
+        html[data-theme='dark'].noise body::before {
+          background-image: ${await createPngNoiseBackground(currentAccentColorDRef)}
+        }
+        html[data-theme='light'] {
           --a: ${`${hl} ${sl} ${ll}`};
         }
         html[data-theme='dark'] {

diff --git a/src/components/modules/shared/SearchFAB.tsx b/src/components/modules/shared/SearchFAB.tsx
@@ -222,7 +222,7 @@ const SearchPanelImpl = () => {
     <m.div
       className={clsx(
         'h-[600px] max-h-[80vh] w-[800px] max-w-[100vw] rounded-none md:h-screen md:max-h-[60vh] md:max-w-[80vw]',
-        'min-h-50 flex flex-col bg-slate-50/80 shadow-2xl backdrop-blur-md dark:bg-neutral-900/80 md:rounded-xl',
+        'min-h-50 flex flex-col bg-zinc-50/80 shadow-2xl backdrop-blur-md dark:bg-neutral-900/80 md:rounded-xl',
         'border-0 border-zinc-200 dark:border-zinc-800 md:border',
       )}
       onKeyDown={handleKeyDown}

diff --git a/src/components/modules/shared/ToastCard.tsx b/src/components/modules/shared/ToastCard.tsx
@@ -34,7 +34,7 @@ export const ToastCard: FC<{
       className={clsx(
         'relative w-full overflow-hidden rounded-xl card-shadow',
         'my-4 mr-4 px-4 py-5 pr-7',
-        'bg-slate-50/90 backdrop-blur-sm dark:bg-neutral-900/90',
+        'bg-zinc-50/90 backdrop-blur-sm dark:bg-neutral-900/90',
         'border border-slate-100/80 dark:border-neutral-900/80',
         'space-x-4',
         'flex items-center',

diff --git a/src/components/ui/button/StyledButton.tsx b/src/components/ui/button/StyledButton.tsx
@@ -15,12 +15,12 @@ const variantStyles = tv({
         'bg-accent text-zinc-100',
         'active:contrast-125 hover:contrast-[1.10]',
         'font-semibold',
-        'disabled:bg-gray-400 disabled:opacity-30 disabled:dark:bg-gray-800 disabled:dark:text-slate-50 disabled:cursor-not-allowed',
+        'disabled:bg-gray-400 disabled:opacity-30 disabled:dark:bg-gray-800 disabled:dark:text-zinc-50 disabled:cursor-not-allowed',
         'dark:text-neutral-800',
       ),
       secondary: clsx(
         'group rounded-full bg-gradient-to-b from-zinc-50/50 to-white/90 px-3 py-2 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur transition dark:from-zinc-900/50 dark:to-zinc-800/90 dark:ring-white/10 dark:hover:ring-white/20',
-        'disabled:bg-gray-400 disabled:opacity-30 disabled:dark:bg-gray-800 disabled:dark:text-slate-50 disabled:cursor-not-allowed',
+        'disabled:bg-gray-400 disabled:opacity-30 disabled:dark:bg-gray-800 disabled:dark:text-zinc-50 disabled:cursor-not-allowed',
       ),
     },
   },

diff --git a/src/components/ui/dialog/DialogOverlay.tsx b/src/components/ui/dialog/DialogOverlay.tsx
@@ -12,7 +12,7 @@ export const DialogOverlay = ({
     <Dialog.Overlay asChild>
       <m.div
         onClick={onClick}
-        className="fixed inset-0 z-[11] bg-slate-50/80 dark:bg-neutral-900/80"
+        className="fixed inset-0 z-[11] bg-zinc-50/80 dark:bg-neutral-900/80"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}

diff --git a/src/components/ui/fab/FABContainer.tsx b/src/components/ui/fab/FABContainer.tsx
@@ -51,7 +51,7 @@ export const FABBase = typescriptHappyForwardRef(
               'h-12 w-12 text-lg md:h-10 md:w-10 md:text-base',
               'border border-accent outline-accent hover:opacity-100 focus:opacity-100 focus:outline-none',
               'rounded-xl border border-zinc-400/20 shadow-lg backdrop-blur-lg dark:border-zinc-500/30 dark:bg-zinc-800/80 dark:text-zinc-200',
-              'bg-slate-50/80 shadow-lg dark:bg-neutral-900/80',
+              'bg-zinc-50/80 shadow-lg dark:bg-neutral-900/80',
               'transition-all duration-500 ease-in-out',
 
               className,

diff --git a/src/components/ui/float-panel/FloatPanel.tsx b/src/components/ui/float-panel/FloatPanel.tsx
@@ -62,7 +62,7 @@ export const FloatPanel: FC<FloatPanelProps & PropsWithChildren> = (props) => {
               className={clsxm(
                 '!shadow-out-sm focus:!shadow-out-sm focus-visible:!shadow-out-sm',
                 'rounded-xl border border-zinc-400/20 p-4 shadow-lg outline-none backdrop-blur-lg dark:border-zinc-500/30',
-                'bg-slate-50/80 dark:bg-neutral-900/80',
+                'bg-zinc-50/80 dark:bg-neutral-900/80',
 
                 'relative z-[2]',
               )}

diff --git a/src/components/ui/float-popover/FloatPopover.tsx b/src/components/ui/float-popover/FloatPopover.tsx
@@ -215,7 +215,7 @@ export const FloatPopover = function FloatPopover<T extends {}>(
                   !headless && [
                     '!shadow-out-sm focus:!shadow-out-sm focus-visible:!shadow-out-sm',
                     'rounded-xl border border-zinc-400/20 p-4 shadow-lg outline-none backdrop-blur-lg dark:border-zinc-500/30',
-                    'bg-slate-50/80 dark:bg-neutral-900/80',
+                    'bg-zinc-50/80 dark:bg-neutral-900/80',
                   ],
 
                   'relative z-[2]',

diff --git a/src/components/ui/modal/stacked/modal.tsx b/src/components/ui/modal/stacked/modal.tsx
@@ -196,7 +196,7 @@ export const Modal: Component<{
                 transition={modalTransition}
                 className={clsxm(
                   'relative flex flex-col overflow-hidden rounded-lg',
-                  'bg-slate-50/80 dark:bg-neutral-900/80',
+                  'bg-zinc-50/80 dark:bg-neutral-900/80',
                   'p-2 shadow-2xl shadow-stone-300 backdrop-blur-sm dark:shadow-stone-800',
                   max
                     ? 'h-[90vh] w-[90vw]'

diff --git a/src/lib/noise.ts b/src/lib/noise.ts
@@ -0,0 +1,46 @@
+'use server'
+
+import { PNG } from 'pngjs'
+
+const hexToRbg = (hex: string) => {
+  const r = parseInt(hex.slice(1, 3), 16)
+  const g = parseInt(hex.slice(3, 5), 16)
+  const b = parseInt(hex.slice(5, 7), 16)
+  return { r, g, b }
+}
+export const createPngNoiseBackground = (hex: string) => {
+  const { b, g, r } = hexToRbg(hex)
+  const width = 72
+  const height = 72
+  const png = new PNG({
+    width,
+    height,
+    filterType: -1, // 禁用过滤器
+  })
+
+  // 生成随机噪点
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const idx = (width * y + x) << 2
+      const rand = Math.random()
+      const color = rand > 0.5 ? 255 : 0
+      png.data[idx] = r
+      png.data[idx + 1] = g
+      png.data[idx + 2] = b
+      png.data[idx + 3] = color
+    }
+  }
+
+  return new Promise<string>((resolve) => {
+    const chunks = [] as Buffer[]
+    png
+      .pack()
+      .on('data', (chunk) => {
+        chunks.push(chunk)
+      })
+      .on('end', () => {
+        const buffer = Buffer.concat(chunks)
+        resolve(`url('data:image/png;base64,${buffer.toString('base64')}')`)
+      })
+  })
+}
diff --git a/src/styles/image-zoom.css b/src/styles/image-zoom.css
@@ -2,7 +2,7 @@
 .medium-zoom-overlay {
   z-index: 99;
 
-  @apply !bg-slate-50 dark:!bg-neutral-900;
+  @apply !bg-zinc-50 dark:!bg-neutral-900;
 }
 
 /* .medium-zoom-overlay + .medium-zoom-image {

diff --git a/src/styles/tailwindcss.css b/src/styles/tailwindcss.css