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

Author: signorecello

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

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