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

* feat(accent color): use color of header

* fix: update type

* fix: make it work correctly

Author: AugustinMauroy

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,
 };

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",

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>;