From 57eae42080d6a928e8010c6bc77489964a5777ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Pedro=20Sousa?= <jose@aztecprotocol.com>
Date: Tue, 19 Dec 2023 21:43:47 +0000
Subject: [PATCH] fix: fixing dark mode background on the CTA button (#3882)

# Description

As usual I got a little bit carried away, but the whole point was to
just remove the white background in the CTA box with dark mode.

Ended up making some other color changes.

## Problem\*

A picture worth a thousand words:
![Screenshot 2023-12-19 at 18 01
19](https://github.com/noir-lang/noir/assets/20129824/3fd2938b-6d26-4d98-bab5-6bbc642306c5)

## Summary\*

- Fixes the CTA box
- Changes primary colors to match Aztec's color sheet, not much since
we're gonna have a restyling later on anyway
- Makes docs respect system theme instead of defaulting to white
---
 docs/docusaurus.config.ts |  4 ++++
 docs/src/css/custom.css   | 50 +++++++++++++++++++++++----------------
 2 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts
index 7516d35c6d9..043c6cba72e 100644
--- a/docs/docusaurus.config.ts
+++ b/docs/docusaurus.config.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 import type { Config } from '@docusaurus/types';
 
 const { themes } = require('prism-react-renderer');
@@ -47,6 +48,9 @@ export default {
   ],
 
   themeConfig: {
+    colorMode: {
+      respectPrefersColorScheme: true,
+    },
     navbar: {
       logo: {
         alt: 'Noir Logo',
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 53dec741513..c96e9df9832 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -6,45 +6,47 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #9f3fff;
-  --ifm-color-primary-dark: #2f1f49;
-  --ifm-color-primary-darker: #2f1f49;
-  --ifm-color-primary-darkest: #2f1f49;
-  --ifm-color-primary-light: #9f3fff;
-  --ifm-color-primary-lighter: #9f3fff;
-  --ifm-color-primary-lightest: #9f3fff;
+  --ifm-color-primary: #514167;
+  --ifm-color-primary-dark: #493a5d;
+  --ifm-color-primary-darker: #453758;
+  --ifm-color-primary-darkest: #392d48;
+  --ifm-color-primary-light: #594871;
+  --ifm-color-primary-lighter: #5d4b76;
+  --ifm-color-primary-lightest: #695486;
   --search-local-highlight-color: #2f1f49;
   --ifm-menu-color-background-active: #f6f8fa;
   --ifm-code-font-size: 95%;
-  --ifm-breadcrumb-color-active: white;
-  --ifm-breadcrumb-item-background-active: #2f1f49;
+  --ifm-breadcrumb-color-active: #F6FBFC;
+  --ifm-breadcrumb-item-background-active: #2f1f49;  
   --ifm-heading-color: #2f1f49;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --ifm-link-color: #B68BE4;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #f5bda9;
-  --ifm-color-primary-dark: #f5bda9;
-  --ifm-color-primary-darker: #f5bda9;
-  --ifm-color-primary-darkest: #f5bda9;
-  --ifm-color-primary-light: #f5bda9;
-  --ifm-color-primary-lighter: #f5bda9;
-  --ifm-color-primary-lightest: #f5bda9;
-
-  --ifm-heading-color: white;
+  --ifm-color-primary: #fbc0b4;
+  --ifm-color-primary-dark: #f99e8b;
+  --ifm-color-primary-darker: #f88c77;
+  --ifm-color-primary-darkest: #f45939;
+  --ifm-color-primary-light: #fde2dd;
+  --ifm-color-primary-lighter: #fef4f1;
+  --ifm-color-primary-lightest: #ffffff;
+
+  --ifm-heading-color: #F6FBFC;
   --ifm-menu-color-background-active: #282a36;
   --ifm-breadcrumb-color-active: #2f1f49;
   --ifm-breadcrumb-item-background-active: #f5bda9;
 
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --ifm-link-color: var(--ifm-color-primary);
 }
 
 html[data-theme='dark'] {
   --search-local-highlight-color: #f5bda9;
-  --search-local-muted-color: white;
+  --search-local-muted-color: #F6FBFC;
   --search-local-hit-active-color: #1b1b1d;
-  --search-local-hit-color: white;
+  --search-local-hit-color: #F6FBFC;
 }
 
 [data-theme='dark'] .footer {
@@ -65,6 +67,13 @@ html[data-theme='dark'] {
   --ifm-footer-title-color: #2f1f49;
 }
 
+[data-theme='light'] #__docusaurus {
+  background-color: #F6FBFC;
+}
+[data-theme='dark'] #__docusaurus {
+  background-color: #161717;
+}
+
 .katex-html {
   display: none;
 }
@@ -91,7 +100,6 @@ html[data-theme='dark'] {
   justify-content: center;
   margin: 0 auto;
   text-align: center;
-  background: white;
   border: none;
   width: 50%;
 }