feat: add NEXT_PUBLIC_THEME_INITIAL_COLOR_MODE

feat: link color, statistic color, statistic bg color

feat: og title

fix: envs

fix: opengraph image url

fix: defaultImageUrl

fix: handle collecting page data for build opengraph image url

fix: home page title no template  %network_name%

fix: regenerate og and twitter meta

tmp: hardcode og imgae url

fix: rollup back to opengraph.url.href

feat: plate background image

fix: width 100% when no plate bg image

fix: add missing schema.ts var

feat: add theme color envs

fix: add theme colors in scheam.ts

feat: add home page chart envs

configs/app/meta.ts

@@ -1,13 +1,22 @@
 import app from './app';
 import { getEnvValue, getExternalAssetFilePath, parseEnvJson } from './utils';
 
-const defaultImageUrl = app.baseUrl + '/static/og_placeholder.png';
+const path = getExternalAssetFilePath('NEXT_PUBLIC_OG_IMAGE_URL');
+let ogImageUrl: URL;
+
+// Hanlde Nextjs to collect page data
+try {
+  ogImageUrl = new URL(path || '', app.baseUrl);
+} catch (e) {
+  ogImageUrl = new URL('', 'https://placehodler');
+}
 
 const meta = Object.freeze({
   promoteBlockscoutInTitle: parseEnvJson<boolean>(getEnvValue('NEXT_PUBLIC_PROMOTE_BLOCKSCOUT_IN_TITLE')) ?? true,
   og: {
+    url: ogImageUrl,
+    title: getEnvValue('NEXT_PUBLIC_OG_TITLE') || '',
     description: getEnvValue('NEXT_PUBLIC_OG_DESCRIPTION') || '',
-    imageUrl: getExternalAssetFilePath('NEXT_PUBLIC_OG_IMAGE_URL') || defaultImageUrl,
   },
 });
 

configs/app/ui.ts

@@ -25,6 +25,25 @@ const hiddenLinks = (() => {
 const HOMEPAGE_PLATE_BACKGROUND_DEFAULT = 'radial-gradient(103.03% 103.03% at 0% 0%, rgba(183, 148, 244, 0.8) 0%, rgba(0, 163, 196, 0.8) 100%), var(--chakra-colors-blue-400)';
 
 const UI = Object.freeze({
+  theme: {
+    initialColorMode: (getEnvValue('NEXT_PUBLIC_THEME_INITIAL_COLOR_MODE') as ('system' | 'light' | 'dark' | undefined)) || 'system',
+    statisticBgColor: getEnvValue('NEXT_PUBLIC_THEME_STATISTIC_BG_COLOR'),
+    statisticBgDarkColor: getEnvValue('NEXT_PUBLIC_THEME_STATISTIC_BG_DARK_COLOR'),
+    statisticTextColor: getEnvValue('NEXT_PUBLIC_THEME_STATISTIC_TEXT_COLOR'),
+    statisticTextDarkColor: getEnvValue('NEXT_PUBLIC_THEME_STATISTIC_TEXT_DARK_COLOR'),
+    linkColor: getEnvValue('NEXT_PUBLIC_THEME_LINK_COLOR') || 'blue.600',
+    linkDarkColor: getEnvValue('NEXT_PUBLIC_THEME_LINK_DARK_COLOR') || 'blue.300',
+    linkHoverColor: getEnvValue('NEXT_PUBLIC_THEME_LINK_HOVER_COLOR') || 'blue.400',
+    linkHoverDarkColor: getEnvValue('NEXT_PUBLIC_THEME_LINK_HOVER_DARK_COLOR') || 'blue.200',
+    textColor: getEnvValue('NEXT_PUBLIC_THEME_TEXT_COLOR') || 'blackAlpha.800',
+    textDarkColor: getEnvValue('NEXT_PUBLIC_THEME_TEXT_DARK_COLOR') || 'whiteAlpha.800',
+    textSecondaryColor: getEnvValue('NEXT_PUBLIC_THEME_TEXT_SECONDARY_COLOR') || 'gray.500',
+    textSecondaryDarkColor: getEnvValue('NEXT_PUBLIC_THEME_TEXT_SECONDARY_DARK_COLOR') || 'gray.400',
+    errorColor: getEnvValue('NEXT_PUBLIC_THEME_ERROR_COLOR') || 'red.400',
+    errorDarkColor: getEnvValue('NEXT_PUBLIC_THEME_ERROR_DARK_COLOR') || 'red.300',
+    dividerColor: getEnvValue('NEXT_PUBLIC_THEME_DIVIDER_COLOR') || 'blackAlpha.200',
+    dividerDarkColor: getEnvValue('NEXT_PUBLIC_THEME_DIVIDER_DARK_COLOR') || 'whiteAlpha.200',
+  },
   sidebar: {
     logo: {
       'default': getExternalAssetFilePath('NEXT_PUBLIC_NETWORK_LOGO'),
@@ -46,7 +65,16 @@ const UI = Object.freeze({
   homepage: {
     title: getEnvValue('NEXT_PUBLIC_HOMEPAGE_TITLE') || 'blockchain explorer',
     charts: parseEnvJson<Array<ChainIndicatorId>>(getEnvValue('NEXT_PUBLIC_HOMEPAGE_CHARTS')) || [],
+    chart: {
+      containerBorder: getEnvValue('NEXT_PUBLIC_HOMEPAGE_CHART_CONTAINER_BORDER'),
+      lineColor: getEnvValue('NEXT_PUBLIC_HOMEPAGE_CHART_LINE_COLOR'),
+      areaStartColor: getEnvValue('NEXT_PUBLIC_HOMEPAGE_CHART_AREA_START_COLOR'),
+      areaStartDarkColor: getEnvValue('NEXT_PUBLIC_HOMEPAGE_CHART_AREA_START_DARK_COLOR'),
+      areaStopColor: getEnvValue('NEXT_PUBLIC_HOMEPAGE_CHART_AREA_STOP_COLOR'),
+      areaStopDarkColor: getEnvValue('NEXT_PUBLIC_HOMEPAGE_CHART_AREA_STOP_DARK_COLOR'),
+    },
     plate: {
+      bgImageURL: getExternalAssetFilePath('NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND_IMAGE'),
       title: getEnvValue('NEXT_PUBLIC_HOMEPAGE_PLATE_TITLE') || `${ getEnvValue('NEXT_PUBLIC_NETWORK_NAME') } explorer`,
       background: getEnvValue('NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND') || HOMEPAGE_PLATE_BACKGROUND_DEFAULT,
       textColor: getEnvValue('NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR') || 'white',

deploy/scripts/download_assets.sh

@@ -23,6 +23,7 @@ ASSETS_ENVS=(
     "NEXT_PUBLIC_NETWORK_ICON"
     "NEXT_PUBLIC_NETWORK_ICON_DARK"
     "NEXT_PUBLIC_OG_IMAGE_URL"
+    "NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND_IMAGE"
 )
 
 # Create the assets directory if it doesn't exist

deploy/tools/envs-validator/schema.ts

@@ -399,7 +399,14 @@ const schema = yup
     NEXT_PUBLIC_HOMEPAGE_PLATE_TITLE: yup.string().optional(),
     NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR: yup.string(),
     NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND: yup.string(),
+    NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND_IMAGE: yup.string().test(urlTest),
     NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME: yup.boolean(),
+    NEXT_PUBLIC_HOMEPAGE_CHART_CONTAINER_BORDER: yup.string().optional(),
+    NEXT_PUBLIC_HOMEPAGE_CHART_LINE_COLOR: yup.string().optional(),
+    NEXT_PUBLIC_HOMEPAGE_CHART_AREA_START_COLOR: yup.string().optional(),
+    NEXT_PUBLIC_HOMEPAGE_CHART_AREA_START_DARK_COLOR: yup.string().optional(),
+    NEXT_PUBLIC_HOMEPAGE_CHART_AREA_STOP_COLOR: yup.string().optional(),
+    NEXT_PUBLIC_HOMEPAGE_CHART_AREA_STOP_DARK_COLOR: yup.string().optional(),
 
     //     b. sidebar
     NEXT_PUBLIC_FEATURED_NETWORKS: yup
@@ -501,6 +508,7 @@ const schema = yup
     NEXT_PUBLIC_AD_TEXT_PROVIDER: yup.string<AdTextProviders>().oneOf(SUPPORTED_AD_TEXT_PROVIDERS),
     NEXT_PUBLIC_PROMOTE_BLOCKSCOUT_IN_TITLE: yup.boolean(),
     NEXT_PUBLIC_OG_DESCRIPTION: yup.string(),
+    NEXT_PUBLIC_OG_TITLE: yup.string().optional(),
     NEXT_PUBLIC_OG_IMAGE_URL: yup.string().test(urlTest),
     NEXT_PUBLIC_SAFE_TX_SERVICE_URL: yup.string().test(urlTest),
     NEXT_PUBLIC_IS_SUAVE_CHAIN: yup.boolean(),
@@ -518,6 +526,25 @@ const schema = yup
     NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN: yup.string(),
     NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY: yup.string(),
 
+    // 7. Theme configuraton
+    NEXT_PUBLIC_THEME_INITIAL_COLOR_MODE: yup.string().oneOf([ 'system', 'light', 'dark' ]).optional(),
+    NEXT_PUBLIC_THEME_STATISTIC_BG_COLOR: yup.string().optional(),
+    NEXT_PUBLIC_THEME_STATISTIC_TEXT_COLOR: yup.string().optional(),
+    NEXT_PUBLIC_THEME_LINK_COLOR: yup.string().optional(),
+    NEXT_PUBLIC_THEME_STATISTIC_BG_DARK_COLOR: yup.string().optional(),
+    NEXT_PUBLIC_THEME_STATISTIC_TEXT_DARK_COLOR: yup.string().optional(),
+    NEXT_PUBLIC_THEME_LINK_DARK_COLOR: yup.string().optional(),
+    NEXT_PUBLIC_THEME_LINK_HOVER_COLOR: yup.string().optional(),
+    NEXT_PUBLIC_THEME_LINK_HOVER_DARK_COLOR: yup.string().optional(),
+    NEXT_PUBLIC_THEME_TEXT_COLOR: yup.string().optional(),
+    NEXT_PUBLIC_THEME_TEXT_DARK_COLOR: yup.string().optional(),
+    NEXT_PUBLIC_THEME_TEXT_SECONDARY_COLOR: yup.string().optional(),
+    NEXT_PUBLIC_THEME_TEXT_SECONDARY_DARK_COLOR: yup.string().optional(),
+    NEXT_PUBLIC_THEME_ERROR_COLOR: yup.string().optional(),
+    NEXT_PUBLIC_THEME_ERROR_DARK_COLOR: yup.string().optional(),
+    NEXT_PUBLIC_THEME_DIVIDER_COLOR: yup.string().optional(),
+    NEXT_PUBLIC_THEME_DIVIDER_DARK_COLOR: yup.string().optional(),
+
     // Misc
     NEXT_PUBLIC_USE_NEXT_JS_PROXY: yup.boolean(),
 

docs/ENVS.md

@@ -15,6 +15,7 @@ Please be aware that all environment variables prefixed with `NEXT_PUBLIC_` will
 - [Blockchain parameters](ENVS.md#blockchain-parameters)
 - [API configuration](ENVS.md#api-configuration)
 - [UI configuration](ENVS.md#ui-configuration)
+  - [Theme](ENVS.md#theme)
   - [Homepage](ENVS.md#homepage)
   - [Sidebar](ENVS.md#sidebar)
   - [Footer](ENVS.md#footer)
@@ -103,6 +104,30 @@ Please be aware that all environment variables prefixed with `NEXT_PUBLIC_` will
 
 ## UI configuration
 
+## Theme configuration
+
+| Variable | Type| Description | Compulsoriness | Default value | Example value |
+| --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_THEME_INITIAL_COLOR_MODE | `system \| light \| dark` | initial code mode | - | `light` | `light` |
+| NEXT_PUBLIC_THEME_STATISTIC_BG_COLOR | - | - | - |  |  |
+| NEXT_PUBLIC_THEME_STATISTIC_BG_DARK_COLOR | - | - | - |  |  |
+| NEXT_PUBLIC_THEME_STATISTIC_TEXT_COLOR | - | - | - |  |  |
+| NEXT_PUBLIC_THEME_STATISTIC_TEXT_DARK_COLOR | - | - | - |  |  |
+| NEXT_PUBLIC_THEME_LINK_COLOR | - | - | - |  |  |
+| NEXT_PUBLIC_THEME_LINK_DARK_COLOR | - | - | - |  |  |
+| NEXT_PUBLIC_THEME_LINK_HOVER_COLOR | - | - | - |  |  |
+| NEXT_PUBLIC_THEME_LINK_HOVER_DARK_COLOR | - | - | - |  |  |
+| NEXT_PUBLIC_THEME_TEXT_COLOR | - | - | - |  |  |
+| NEXT_PUBLIC_THEME_TEXT_DARK_COLOR | - | - | - |  |  |
+| NEXT_PUBLIC_THEME_TEXT_SECONDARY_COLOR | - | - | - |  |  |
+| NEXT_PUBLIC_THEME_TEXT_SECONDARY_DARK_COLOR | - | - | - |  |  |
+| NEXT_PUBLIC_THEME_ERROR_COLOR | - | - | - |  |  |
+| NEXT_PUBLIC_THEME_ERROR_DARK_COLOR | - | - | - |  |  |
+| NEXT_PUBLIC_THEME_DIVIDER_COLOR | - | - | - |  |  |
+| NEXT_PUBLIC_THEME_DIVIDER_DARK_COLOR | - | - | - |  |  |
+
+ 
+
 ### Homepage
 
 | Variable | Type| Description | Compulsoriness  | Default value | Example value |
@@ -113,6 +138,13 @@ Please be aware that all environment variables prefixed with `NEXT_PUBLIC_` will
 | NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME | `boolean` | Set to false if average block time is useless for the network | - | `true` | `false` |
 | NEXT_PUBLIC_HOMEPAGE_TITLE | `string` | Tab title for homepage | - | - | 'blockchain explorer' |
 | NEXT_PUBLIC_HOMEPAGE_PLATE_TITLE | `string` | Plate title in homepage | - | - | `${NEXT_PUBLIC_NETWORK_NAME} explorer` |
+| NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND_IMAGE | `string` | Background image URL in homepage plate | - | - | - |
+| NEXT_PUBLIC_HOMEPAGE_CHART_CONTAINER_BORDER | `string` | Background image URL in homepage plate | - | - | - |
+| NEXT_PUBLIC_HOMEPAGE_CHART_LINE_COLOR | `string` | Background image URL in homepage plate | - | - | - |
+| NEXT_PUBLIC_HOMEPAGE_CHART_AREA_START_COLOR | `string` | Background image URL in homepage plate | - | - | - |
+| NEXT_PUBLIC_HOMEPAGE_CHART_AREA_START_DARK_COLOR | `string` | Background image URL in homepage plate | - | - | - |
+| NEXT_PUBLIC_HOMEPAGE_CHART_AREA_STOP_COLOR | `string` | Background image URL in homepage plate | - | - | - |
+| NEXT_PUBLIC_HOMEPAGE_CHART_AREA_STOP_DARK_COLOR | `string` | Background image URL in homepage plate | - | - | - |
 
  
 
@@ -176,6 +208,7 @@ Settings for meta tags and OG tags
 | Variable | Type| Description | Compulsoriness  | Default value | Example value |
 | --- | --- | --- | --- | --- | --- |
 | NEXT_PUBLIC_PROMOTE_BLOCKSCOUT_IN_TITLE | `boolean` | Set to `true` to promote Blockscout in meta and OG titles | - | `true` | `true` |
+| NEXT_PUBLIC_OG_TITLE | `string` | Custom OG title | - | - | - |
 | NEXT_PUBLIC_OG_DESCRIPTION | `string` | Custom OG description | - | - | `Blockscout is the #1 open-source blockchain explorer available today. 100+ chains and counting rely on Blockscout data availability, APIs, and ecosystem tools to support their networks.` |
 | NEXT_PUBLIC_OG_IMAGE_URL | `string` | OG image url. Minimum image size is 200 x 20 pixels (recommended: 1200 x 600); maximum supported file size is 8 MB; 2:1 aspect ratio; supported formats: image/jpeg, image/gif, image/png | - | `static/og_placeholder.png` | `https://placekitten.com/1200/600` |
 

lib/metadata/generate.ts

@@ -6,7 +6,6 @@ import config from 'configs/app';
 import getNetworkTitle from 'lib/networks/getNetworkTitle';
 
 import compileValue from './compileValue';
-import getPageOgType from './getPageOgType';
 import * as templates from './templates';
 
 export default function generate<R extends Route>(route: R, apiData?: ApiData<R>): Metadata {
@@ -21,15 +20,13 @@ export default function generate<R extends Route>(route: R, apiData?: ApiData<R>
   const title = compiledTitle ? compiledTitle + (config.meta.promoteBlockscoutInTitle ? ' | Blockscout' : '') : '';
   const description = compileValue(templates.description.make(route.pathname), params);
 
-  const pageOgType = getPageOgType(route.pathname);
-
   return {
     title: title,
     description,
     opengraph: {
-      title: title,
-      description: pageOgType !== 'Regular page' ? config.meta.og.description : '',
-      imageUrl: pageOgType !== 'Regular page' ? config.meta.og.imageUrl : '',
+      url: config.meta.og.url,
+      title: config.meta.og.title || title,
+      description: config.meta.og.description || description,
     },
   };
 }

lib/metadata/templates/title.ts

@@ -59,5 +59,5 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
 export function make(pathname: Route['pathname']) {
   const template = TEMPLATE_MAP[pathname];
 
-  return `%network_name% ${ template }`;
+  return pathname === '/' ? template : `%network_name% ${ template }`;
 }

lib/metadata/types.ts

@@ -11,8 +11,8 @@ export interface Metadata {
     title: string;
     description: string;
     opengraph: {
+        url: URL;
         title: string;
-        description?: string;
-        imageUrl?: string;
+        description: string;
     };
 }

nextjs/PageNextJs.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import Head from 'next/head';
 import React from 'react';
 
@@ -32,11 +33,18 @@ const PageNextJs = (props: Props) => {
 
         { /* OG TAGS */ }
         <meta property="og:title" content={ opengraph.title }/>
-        { opengraph.description && <meta property="og:description" content={ opengraph.description }/> }
-        <meta property="og:image" content={ opengraph.imageUrl }/>
-        <meta name="twitter:card" content="summary_large_image"/>
-        <meta property="twitter:image" content={ opengraph.imageUrl }/>
+        <meta property="og:description" content={ opengraph.description }/>
+        <meta property="og:image" content={ opengraph.url.href }/>
         <meta property="og:type" content="website"/>
+        <meta property="og:url" content={ opengraph.url.origin }/>
+
+        { /* Twitter Meta Tags  */ }
+        <meta name="twitter:card" content="summary_large_image"/>
+        <meta property="twitter:domain" content={ opengraph.url.host }/>
+        <meta property="twitter:url" content={ opengraph.url.origin }/>
+        <meta name="twitter:title" content={ opengraph.title }/>
+        <meta name="twitter:description" content={ opengraph.description }/>
+        <meta name="twitter:image" content={ opengraph.url.href }/>
       </Head>
       { props.children }
     </>

theme/config.ts

@@ -1,7 +1,9 @@
 import { type ThemeConfig } from '@chakra-ui/react';
 
+import appConfig from 'configs/app';
+
 const config: ThemeConfig = {
-  initialColorMode: 'system',
+  initialColorMode: appConfig.UI.theme.initialColorMode,
   useSystemColorMode: false,
   disableTransitionOnChange: false,
 };

theme/foundations/semanticTokens.ts

@@ -1,27 +1,30 @@
+import config from 'configs/app';
+
 const semanticTokens = {
   colors: {
     divider: {
-      'default': 'blackAlpha.200',
-      _dark: 'whiteAlpha.200',
+      'default': config.UI.theme.dividerColor,
+      _dark: config.UI.theme.dividerDarkColor,
     },
     text: {
-      'default': 'blackAlpha.800',
-      _dark: 'whiteAlpha.800',
+      'default': config.UI.theme.textColor,
+      _dark: config.UI.theme.textDarkColor,
     },
     text_secondary: {
-      'default': 'gray.500',
-      _dark: 'gray.400',
+      'default': config.UI.theme.textSecondaryColor,
+      _dark: config.UI.theme.textSecondaryDarkColor,
     },
     link: {
-      'default': 'blue.600',
-      _dark: 'blue.300',
+      'default': config.UI.theme.linkColor,
+      _dark: config.UI.theme.linkDarkColor,
     },
     link_hovered: {
-      'default': 'blue.400',
+      'default': config.UI.theme.linkHoverColor,
+      _dark: config.UI.theme.linkHoverDarkColor,
     },
     error: {
-      'default': 'red.400',
-      _dark: 'red.300',
+      'default': config.UI.theme.errorColor,
+      _dark: config.UI.theme.errorDarkColor,
     },
   },
   shadows: {

ui/home/StatsItem.tsx

@@ -2,6 +2,7 @@ import type { SystemStyleObject } from '@chakra-ui/react';
 import { Skeleton, Flex, useColorModeValue, chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import config from 'configs/app';
 import breakpoints from 'theme/foundations/breakpoints';
 import type { IconName } from 'ui/shared/IconSvg';
 import IconSvg from 'ui/shared/IconSvg';
@@ -27,12 +28,15 @@ const StatsItem = ({ icon, title, value, className, tooltip, url, isLoading }: P
     [`@media screen and (min-width: ${ breakpoints.lg }) and (max-width: ${ LARGEST_BREAKPOINT })`]: { alignItems: 'center' },
   };
 
-  const bgColor = useColorModeValue('blue.50', 'blue.800');
+  const bgColor = useColorModeValue(config.UI.theme.statisticBgColor, config.UI.theme.statisticBgDarkColor);
+  const defaultBgColor = useColorModeValue('blue.50', 'blue.800');
+  const textColor = useColorModeValue(config.UI.theme.statisticTextColor, config.UI.theme.statisticTextDarkColor);
+  const defaultTextColor = useColorModeValue('black', 'white');
   const loadingBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
 
   return (
     <Flex
-      backgroundColor={ isLoading ? loadingBgColor : bgColor }
+      backgroundColor={ isLoading ? loadingBgColor : bgColor || defaultBgColor }
       padding={ 3 }
       borderRadius="md"
       flexDirection="row"
@@ -57,7 +61,7 @@ const StatsItem = ({ icon, title, value, className, tooltip, url, isLoading }: P
         <Skeleton isLoaded={ !isLoading } color="text_secondary" fontSize="xs" lineHeight="16px" borderRadius="base">
           <span>{ title }</span>
         </Skeleton>
-        <Skeleton isLoaded={ !isLoading } fontWeight={ 500 } fontSize="md" color={ useColorModeValue('black', 'white') } borderRadius="base">
+        <Skeleton isLoaded={ !isLoading } fontWeight={ 500 } fontSize="md" color={ textColor || defaultTextColor } borderRadius="base">
           { typeof value === 'string' ? <span>{ value }</span> : value }
         </Skeleton>
       </Flex>

ui/home/indicators/ChainIndicatorChart.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import type { TimeChartData } from 'ui/shared/chart/types';
 
+import config from 'configs/app';
 import ChartArea from 'ui/shared/chart/ChartArea';
 import ChartLine from 'ui/shared/chart/ChartLine';
 import ChartOverlay from 'ui/shared/chart/ChartOverlay';
@@ -18,7 +19,8 @@ const CHART_MARGIN = { bottom: 5, left: 10, right: 10, top: 0 };
 
 const ChainIndicatorChart = ({ data }: Props) => {
   const overlayRef = React.useRef<SVGRectElement>(null);
-  const lineColor = useToken('colors', 'blue.500');
+  const defaultLineColor = useToken('colors', 'blue.500');
+  const lineColor = config.UI.homepage.chart.lineColor || defaultLineColor;
 
   const axesConfig = React.useMemo(() => {
     return {

ui/home/indicators/ChainIndicators.tsx

@@ -68,6 +68,7 @@ const ChainIndicators = () => {
       borderRadius={{ base: 'none', lg: 'lg' }}
       boxShadow={{ base: 'none', lg: 'xl' }}
       bgColor={{ base: bgColorMobile, lg: bgColorDesktop }}
+      border={ config.UI.homepage.chart.containerBorder || undefined }
       columnGap={ 12 }
       rowGap={ 0 }
       flexDir={{ base: 'column', lg: 'row' }}