diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts
index 3f133ff446..91ddaa4efe 100644
--- a/website/docusaurus.config.ts
+++ b/website/docusaurus.config.ts
@@ -123,7 +123,8 @@ const config: Config = {
       title: "React DayPicker",
       logo: {
         alt: "DayPicker Logo",
-        src: "img/logo.png"
+        src: "img/logo.png",
+        srcDark: "img/logo-dark.png"
       },
       items: [
         {
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index a60912217c..eabbe15bce 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -45,13 +45,13 @@
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 html[data-theme="dark"] {
-  --ifm-color-primary: #00c7fc;
-  --ifm-color-primary-dark: #00b3e3;
-  --ifm-color-primary-darker: #00a9d6;
-  --ifm-color-primary-darkest: #008bb0;
-  --ifm-color-primary-light: #16ceff;
-  --ifm-color-primary-lighter: #23d1ff;
-  --ifm-color-primary-lightest: #49d9ff;
+  --ifm-color-primary: #4a8cf8;
+  --ifm-color-primary-dark: #2681f7;
+  --ifm-color-primary-darker: #1679f6;
+  --ifm-color-primary-darkest: #0862d5;
+  --ifm-color-primary-light: #62a5f9;
+  --ifm-color-primary-lighter: #72adfa;
+  --ifm-color-primary-lightest: #9fc8fb;
 
   --ifm-table-background: rgba(0, 0, 0, 0.1);
   --ifm-table-border-color: var(--ifm-color-emphasis-100);
diff --git a/website/static/img/logo-dark.png b/website/static/img/logo-dark.png
new file mode 100644
index 0000000000..d80bd356c3
Binary files /dev/null and b/website/static/img/logo-dark.png differ