feat: support customize accent colors

Author: Innei

example/color.json

@@ -0,0 +1,28 @@
+{
+  "color": {
+    "light": [
+      "#33A6B8",
+      "#FF6666",
+      "#26A69A",
+      "#fb7287",
+      "#69a6cc",
+      "#F11A7B",
+      "#78C1F3",
+      "#FF6666",
+      "#FF9EAA",
+      "#7ACDF6"
+    ],
+    "dark": [
+      "#F596AA",
+      "#A0A7D4",
+      "#ff7b7b",
+      "#99D8CF",
+      "#838BC6",
+      "#FFE5AD",
+      "#9BE8D8",
+      "#A1CCD1",
+      "#FFD0D0",
+      "#EAAEBA"
+    ]
+  }
+}

src/app/config.d.ts

@@ -1,5 +1,24 @@
 import type { ScriptProps } from 'next/script'
 
+export interface AppThemeConfig {
+  config: AppConfig
+  footer: FooterConfig
+}
+
+export interface AccentColor {
+  light: string[]
+  dark: string[]
+}
+
+export interface AppConfig {
+  site: Site
+  hero: Hero
+  module: Module
+  color?: AccentColor
+
+  custom?: Custom
+}
+
 export interface LinkSection {
   name: string
   links: {
@@ -16,18 +35,7 @@ export interface OtherInfo {
     link: string
   }
 }
-export interface AppThemeConfig {
-  config: AppConfig
-  footer: FooterConfig
-}
 
-export interface AppConfig {
-  site: Site
-  hero: Hero
-  module: Module
-
-  custom?: Custom
-}
 export interface Custom {
   css: string[]
   styles: any[]

src/providers/root/accent-color-provider.tsx

@@ -1,8 +1,12 @@
 import { useServerInsertedHTML } from 'next/navigation'
+import type { AccentColor } from '~/app/config'
 import type { PropsWithChildren } from 'react'
 
 import { sample } from '~/lib/_'
 import { hexToHsl } from '~/lib/color'
+import { noopObj } from '~/lib/noop'
+
+import { useAppConfigSelector } from './aggregation-data-provider'
 
 const accentColorLight = [
   // 浅葱
@@ -22,10 +26,13 @@ const accentColorDark = [
   '#99D8CF',
   '#838BC6',
 ]
+
 export const AccentColorProvider = ({ children }: PropsWithChildren) => {
+  const { light, dark } =
+    useAppConfigSelector((config) => config.color) || (noopObj as AccentColor)
   useServerInsertedHTML(() => {
-    const accentColorL = sample(accentColorLight)
-    const accentColorD = sample(accentColorDark)
+    const accentColorL = sample(light ?? accentColorLight)
+    const accentColorD = sample(dark ?? accentColorDark)
 
     const lightHsl = hexToHsl(accentColorL)
     const darkHsl = hexToHsl(accentColorD)
@@ -35,12 +42,14 @@ export const AccentColorProvider = ({ children }: PropsWithChildren) => {
 
     return (
       <style
+        data-light={accentColorL}
+        data-dark={accentColorD}
         dangerouslySetInnerHTML={{
-          __html: `html[data-theme='dark'] {
+          __html: `html[data-theme='light'] {
           --a: ${`${hl} ${sl}% ${ll}%`};
           --af: ${`${hl} ${sl}% ${ll + 6}%`};
         }
-        html[data-theme='light'] {
+        html[data-theme='dark'] {
           --a: ${`${hd} ${sd}% ${ld}%`};
           --af: ${`${hd} ${sd}% ${ld - 6}%`};
         }