feat(accent color): use color of navBar (#6391)

* feat(accent color): use color of header * fix: update type * fix: make it work correctly
nodejs · Mar 2, 2024 · 456614e · 456614e
1 parent c4ec78a
commit 456614e
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/next.dynamic.constants.mjs b/next.dynamic.constants.mjs
@@ -79,7 +79,16 @@ export const PAGE_METADATA = {
  * @return {import('next').Viewport}
  */
 export const PAGE_VIEWPORT = {
-  themeColor: siteConfig.accentColor,
+  themeColor: [
+    {
+      color: siteConfig.lightAccentColor,
+      media: '(prefers-color-scheme: light)',
+    },
+    {
+      color: siteConfig.darkAccentColor,
+      media: '(prefers-color-scheme: dark)',
+    },
+  ],
   width: 'device-width',
   initialScale: 1,
 };
diff --git a/site.json b/site.json
@@ -2,7 +2,8 @@
   "title": "Node.js",
   "description": "Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.",
   "favicon": "/static/images/favicons/favicon.png",
-  "accentColor": "#333",
+  "lightAccentColor": "#FFFFFF",
+  "darkAccentColor": "#0D121C",
   "twitter": {
     "username": "@nodejs",
     "card": "summary",

diff --git a/types/config.ts b/types/config.ts
@@ -29,7 +29,8 @@ export interface SiteConfig {
   description: string;
   featuredImage: string;
   favicon: string;
-  accentColor: string;
+  lightAccentColor: string;
+  darkAccentColor: string;
   og: OGConfig;
   twitter: TwitterConfig;
   rssFeeds: Array<RSSFeed>;