generate palette based on primary color

antho1404 · antho1404 · commit 3237cf193091 · 2023-09-24T18:10:21.000+07:00
diff --git a/colors.ts b/colors.ts
@@ -0,0 +1,46 @@
+function interpolateColor(color1: string, color2: string, ratio: number) {
+  const r1 = parseInt(color1.substring(1, 3), 16)
+  const g1 = parseInt(color1.substring(3, 5), 16)
+  const b1 = parseInt(color1.substring(5, 7), 16)
+
+  const r2 = parseInt(color2.substring(1, 3), 16)
+  const g2 = parseInt(color2.substring(3, 5), 16)
+  const b2 = parseInt(color2.substring(5, 7), 16)
+
+  const r = Math.round(r1 + (r2 - r1) * ratio)
+    .toString(16)
+    .padStart(2, '0')
+  const g = Math.round(g1 + (g2 - g1) * ratio)
+    .toString(16)
+    .padStart(2, '0')
+  const b = Math.round(b1 + (b2 - b1) * ratio)
+    .toString(16)
+    .padStart(2, '0')
+
+  return `#${r}${g}${b}`.toUpperCase()
+}
+
+export function generatePalette(color: string, extra = 0.05) {
+  const palette: { [key: number]: string } = {
+    ...[50, 100, 200, 300, 400].reduce(
+      (prev, x) => ({
+        ...prev,
+        [x]: interpolateColor(color, '#FFFFFF', 1 - x / 500 + extra),
+      }),
+      {},
+    ),
+    500: color,
+    ...[600, 700, 800, 900, 950].reduce(
+      (prev, x) => ({
+        ...prev,
+        [x]: interpolateColor(color, '#000000', x / 500 - 1 - extra),
+      }),
+      {},
+    ),
+  }
+
+  return {
+    ...palette,
+    black: palette[950],
+  }
+}
diff --git a/environment.ts b/environment.ts
@@ -40,6 +40,19 @@ export type Environment = {
   // (Optional) Bugsnag API Key, you can get one at https://www.bugsnag.com/
   BUGSNAG_API_KEY?: string
 
+  /**
+   * Theme configuration
+   */
+
+  // URL of the logo to place in the header
+  LOGO: string
+
+  // URL of the favicon
+  FAVICON: string
+
+  // Brand color to use for the theme
+  BRAND_COLOR: string
+
   /**
    * Wallet/chain configuration
    */
@@ -170,6 +183,10 @@ const getEnvironment = async (): Promise<Environment> => {
     BASE_URL: process.env.NEXT_PUBLIC_BASE_URL,
     MAX_ROYALTIES: maxRoyaltiesPerTenThousand / 100,
     BUGSNAG_API_KEY: process.env.NEXT_PUBLIC_BUGSNAG_API_KEY,
+    // Theme configuration
+    LOGO: metadata.LOGO || '/logo.svg',
+    FAVICON: metadata.FAVICON || '/favicon.svg',
+    BRAND_COLOR: metadata.BRAND_COLOR || '#245BFF',
     // Wallet/chain configuration
     CHAINS: [
       ethereumMainnet,
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -35,7 +35,7 @@ import connectors from '../connectors'
 import getEnvironment, { Environment, EnvironmentContext } from '../environment'
 import useAccount, { COOKIES, COOKIE_JWT_TOKEN } from '../hooks/useAccount'
 import useEnvironment from '../hooks/useEnvironment'
-import { theme } from '../styles/theme'
+import { getTheme } from '../styles/theme'
 import Error from './_error'
 require('dayjs/locale/ja')
 require('dayjs/locale/zh-cn')
@@ -215,6 +215,9 @@ function MyApp({ Component, pageProps }: AppProps<MyAppProps>): JSX.Element {
     () => connectors(environment),
     [environment],
   )
+
+  const theme = useMemo(() => getTheme(environment.BRAND_COLOR), [environment])
+
   return (
     <ErrorBoundary>
       <EnvironmentContext.Provider value={environment}>
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -17,7 +17,7 @@ import invariant from 'ts-invariant'
 import getClient from '../client'
 import getEnvironment from '../environment'
 import { COOKIES, COOKIE_JWT_TOKEN } from '../hooks/useAccount'
-import { theme } from '../styles/theme'
+import { baseTheme } from '../styles/theme'
 import { MyAppProps } from './_app'
 
 type MyDocumentProps = { apolloState: NormalizedCacheObject }
@@ -40,7 +40,9 @@ class MyDocument extends Document {
           />
         </Head>
         <body>
-          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
+          <ColorModeScript
+            initialColorMode={baseTheme.config.initialColorMode}
+          />
           <Main />
           <NextScript />
         </body>
diff --git a/styles/theme.ts b/styles/theme.ts
@@ -1,6 +1,7 @@
 import { extendTheme } from '@chakra-ui/react'
+import { generatePalette } from '../colors'
 
-export const theme = extendTheme({
+export const baseTheme = extendTheme({
   styles: {
     global: {
       '*::placeholder': {
@@ -241,19 +242,6 @@ export const theme = extendTheme({
       500: '#3B82F6',
       600: '#2563EB',
     },
-    brand: {
-      50: '#F5F7FF',
-      100: '#D3E2FF',
-      200: '#A7C4FF',
-      300: '#7BA3FF',
-      400: '#5A88FF',
-      500: '#245BFF',
-      600: '#1A45DB',
-      700: '#1233B7',
-      800: '#0B2393',
-      900: '#06177A',
-      black: '#060F27',
-    },
     secondary: {
       100: '#C9FBCB',
       500: '#02B14F',
@@ -300,3 +288,10 @@ export const theme = extendTheme({
     full: '9999px',
   },
 })
+
+export const getTheme = (brandColor: string) =>
+  extendTheme(baseTheme, {
+    colors: {
+      brand: generatePalette(brandColor),
+    },
+  })
