From 456614e78671e775a03aab50b4ea07cdd7733975 Mon Sep 17 00:00:00 2001
From: Augustin Mauroy <augustin.mauroy@outlook.fr>
Date: Sat, 2 Mar 2024 15:45:55 +0100
Subject: [PATCH] feat(accent color): use color of `navBar` (#6391)

* feat(accent color): use color of header

* fix: update type

* fix: make it work correctly
---
 next.dynamic.constants.mjs | 11 ++++++++++-
 site.json                  |  3 ++-
 types/config.ts            |  3 ++-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/next.dynamic.constants.mjs b/next.dynamic.constants.mjs
index b30af675070dd..8fe7e245d13f3 100644
--- 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
index eb0a1792908f1..80ab878a926a2 100644
--- 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
index 408b8fff9951e..5aec8465e8aa8 100644
--- 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>;