From 97625a8398386fab13059ed272a3e060bd9b773c Mon Sep 17 00:00:00 2001
From: Desmond Grealy <grealydesmond@gmail.com>
Date: Sun, 1 Jan 2023 23:11:18 -0800
Subject: [PATCH] Theme implementation which does not rely on the Chakra
 Container component, which is for contianing width (and buggy). Last commit
 before pulling in latest to resolve merge confilicts, and continue to fix the
 survey pages.

---
 website/src/components/AuthLayout.tsx         |  6 +--
 website/src/components/CallToAction.tsx       | 47 ++++++++++++++++---
 website/src/components/CircleBackground.tsx   | 22 ---------
 website/src/components/Faq.tsx                | 17 +++++--
 website/src/components/Footer.tsx             | 13 +++--
 website/src/components/Header/Header.tsx      |  6 +--
 website/src/components/Header/NavLinks.tsx    | 17 ++++++-
 website/src/components/Hero.tsx               | 27 +++++++----
 website/src/pages/auth/signin.tsx             | 42 +++++++++++++----
 website/src/pages/index.tsx                   |  6 ++-
 website/src/styles/Theme/colors.ts            |  8 +++-
 .../src/styles/Theme/components/Container.ts  | 10 +---
 website/src/styles/Theme/index.ts             | 18 +++++--
 website/tailwind.config.js                    |  4 ++
 14 files changed, 161 insertions(+), 82 deletions(-)
 delete mode 100644 website/src/components/CircleBackground.tsx

diff --git a/website/src/components/AuthLayout.tsx b/website/src/components/AuthLayout.tsx
index 3d6ed134..e07c2c40 100644
--- a/website/src/components/AuthLayout.tsx
+++ b/website/src/components/AuthLayout.tsx
@@ -1,13 +1,13 @@
-import { Container } from "@chakra-ui/react";
+
 
 export function AuthLayout({ children }) {
   return (
-    <Container className="flex items-center justify-center sm:py-4 subpixel-antialiased">
+    <div className="flex items-center justify-center sm:py-4 subpixel-antialiased">
       <div className="flex items-center w-full max-w-2xl flex-col px-4 sm:px-6">
         <div className="flex-auto items-center justify-center w-full py-10 px-4 sm:mx-0 sm:flex-none sm:rounded-2xl sm:p-4">
           {children}
         </div>
       </div>
-    </Container>
+    </div>
   );
 }
diff --git a/website/src/components/CallToAction.tsx b/website/src/components/CallToAction.tsx
index 2fd91c79..fc88af82 100644
--- a/website/src/components/CallToAction.tsx
+++ b/website/src/components/CallToAction.tsx
@@ -1,16 +1,51 @@
-import { CircleBackground } from "./CircleBackground";
+import { useId } from "react";
+import { useColorMode } from "@chakra-ui/react";
 import { Container } from "./Container";
 
-export function CallToAction() {
+
+function CircleBackground({ width = 558, height = 558, ...props }) {
+  const id = useId();
+
+  const { colorMode } = useColorMode();
+  const baseRingColor = colorMode === "light" ? "#777" : "#000";
+  const gradStopColor = colorMode === "light" ? "#fff" : "#000";
+
   return (
-    <section id="join-us" className="relative overflow-hidden bg-gray-900 py-20 sm:py-28">
+    <svg viewBox="0 0 558 558" width={width} height={height} fill="none" aria-hidden="true" {...props}>
+      <defs>
+        <linearGradient id={id} x1="79" y1="16" x2="105" y2="237" gradientUnits="userSpaceOnUse">
+          <stop stopColor={gradStopColor} />
+          <stop offset="1" stopColor={baseRingColor} stopOpacity="0" />
+        </linearGradient>
+      </defs>
+      <path
+        opacity=".2"
+        d="M1 279C1 125.465 125.465 1 279 1s278 124.465 278 278-124.465 278-278 278S1 432.535 1 279Z"
+        stroke={baseRingColor}
+      />
+      <path d="M1 279C1 125.465 125.465 1 279 1" stroke={`url(#${id})`} strokeLinecap="round" />
+    </svg>
+  );
+}
+
+
+export function CallToAction() {
+
+  const { colorMode } = useColorMode();
+  const bgColorClass = colorMode === "light" ? "bg-gray-900" : "bg-gray-50";
+  const headingColorClass = colorMode === "light" ? "text-white" : "text-black";
+  const textColorClass = colorMode === "light" ? "text-gray-300" : "text-black";
+  const gradStopColor = colorMode === "light" ? "#06b6d4" : "#00f2ff";
+
+  return (
+    <section id="join-us" className={`relative overflow-hidden py-20 sm:py-28 ${bgColorClass} ${textColorClass}`}>
       <div className="absolute top-1/2 left-20 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2">
-        <CircleBackground color="#fff" className="animate-spin-slower" />
+        <CircleBackground className="animate-spin-slower" />
       </div>
       <Container className="relative">
         <div className="mx-auto max-w-md sm:text-center">
-          <h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl">Join Us</h2>
-          <p className="mt-4 text-lg text-gray-300">
+          <h2 className={`text-3xl font-medium tracking-tight sm:text-4xl ${headingColorClass}`}>Join Us</h2>
+          <p className="mt-4 text-lg">
             All open source projects begin with people like you. Open source is the belief that if we collaborate we can
             together gift our knowledge and technology to the world for the benefit of humanity. Are you in? Find us
             here:
diff --git a/website/src/components/CircleBackground.tsx b/website/src/components/CircleBackground.tsx
deleted file mode 100644
index 5851d4ab..00000000
--- a/website/src/components/CircleBackground.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useId } from "react";
-
-export function CircleBackground({ color, width = 558, height = 558, ...props }) {
-  const id = useId();
-
-  return (
-    <svg viewBox="0 0 558 558" width={width} height={height} fill="none" aria-hidden="true" {...props}>
-      <defs>
-        <linearGradient id={id} x1="79" y1="16" x2="105" y2="237" gradientUnits="userSpaceOnUse">
-          <stop stopColor={color} />
-          <stop offset="1" stopColor={color} stopOpacity="0" />
-        </linearGradient>
-      </defs>
-      <path
-        opacity=".2"
-        d="M1 279C1 125.465 125.465 1 279 1s278 124.465 278 278-124.465 278-278 278S1 432.535 1 279Z"
-        stroke={color}
-      />
-      <path d="M1 279C1 125.465 125.465 1 279 1" stroke={`url(#${id})`} strokeLinecap="round" />
-    </svg>
-  );
-}
diff --git a/website/src/components/Faq.tsx b/website/src/components/Faq.tsx
index d7c2eae9..e7b4c65a 100644
--- a/website/src/components/Faq.tsx
+++ b/website/src/components/Faq.tsx
@@ -1,4 +1,4 @@
-import Link from "next/link";
+import { useColorMode } from "@chakra-ui/react";
 
 import { Container } from "./Container";
 
@@ -27,11 +27,20 @@ const faqs = [
 ];
 
 export function Faq() {
+
+  const { colorMode } = useColorMode();
+  const bgColorClass = colorMode === "light" ? "bg-gray-900" : "bg-gray-50";
+  
+  const gradStopColor = colorMode === "light" ? "#06b6d4" : "#00f2ff";
+
+  const headingColorClass = colorMode === "light" ? "text-gray-900" : "text-white";
+  const textColorClass = colorMode === "light" ? "text-gray-700" : "text-gray-100";
+
   return (
     <section id="faq" aria-labelledby="faqs-title" className="border-t border-gray-200 py-20 sm:py-32">
       <Container className="">
         <div className="mx-auto max-w-2xl lg:mx-0">
-          <h2 id="faqs-title" className="text-3xl font-medium tracking-tight text-gray-900">
+          <h2 id="faqs-title" className={`text-3xl font-medium tracking-tight ${headingColorClass}`}>
             Frequently Asked Questions
           </h2>
           {/* <p className="mt-2 text-lg text-gray-600">
@@ -54,8 +63,8 @@ export function Faq() {
               <ul role="list" className="space-y-10">
                 {column.map((faq, faqIndex) => (
                   <li key={faqIndex}>
-                    <h3 className="text-lg font-semibold leading-6 text-gray-900">{faq.question}</h3>
-                    <p className="mt-4 text-sm text-gray-700">{faq.answer}</p>
+                    <h3 className={`text-lg font-semibold leading-6 ${headingColorClass}`}>{faq.question}</h3>
+                    <p className={`mt-4 text-sm ${textColorClass}`}>{faq.answer}</p>
                   </li>
                 ))}
               </ul>
diff --git a/website/src/components/Footer.tsx b/website/src/components/Footer.tsx
index 022e70c5..5e3ba0f9 100644
--- a/website/src/components/Footer.tsx
+++ b/website/src/components/Footer.tsx
@@ -1,12 +1,15 @@
 import Image from "next/image";
 import Link from "next/link";
-
-import { Container, Text, useColorModeValue } from "@chakra-ui/react";
+import { useColorMode } from "@chakra-ui/react";
 
 export function Footer() {
+  const { colorMode } = useColorMode();
+  const bgColorClass = colorMode === "light" ? "bg-transparent" : "bg-gray-800";
+  const borderClass = colorMode === "light" ? "border-slate-200" : "border-gray-900";
+
   return (
-    <footer>
-      <Container className="flex justify-evenly py-10 px-10 border-t">
+    <footer className={bgColorClass}>
+      <div className={`flex justify-evenly py-10 px-10 border-t ${borderClass}`}>
         <div className="flex items-center pr-8">
           <Link href="/" aria-label="Home" className="flex items-center">
             <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="52" height="52" alt="logo" />
@@ -66,7 +69,7 @@ export function Footer() {
             </div>
           </div>
         </nav>
-      </Container>
+      </div>
     </footer>
   );
 }
diff --git a/website/src/components/Header/Header.tsx b/website/src/components/Header/Header.tsx
index b1d5c219..bc70478c 100644
--- a/website/src/components/Header/Header.tsx
+++ b/website/src/components/Header/Header.tsx
@@ -1,4 +1,4 @@
-import { Button, Container, Box } from "@chakra-ui/react";
+import { Button, Box } from "@chakra-ui/react";
 import { Popover } from "@headlessui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import Image from "next/image";
@@ -56,8 +56,7 @@ function AccountButton() {
 export function Header(props) {
   const borderClass = props.transparent ? "" : props.borderClass ?? "border-b border-gray-100";
   return (
-    <nav>
-      <Container>
+    <nav className="oa-basic-theme">
       <Box className={`flex mx-auto max-w-7xl justify-between py-8 px-10 ${borderClass}`}>
         <div className="relative z-10 flex items-center gap-16">
           <Link href="/" aria-label="Home" className="flex items-center">
@@ -118,7 +117,6 @@ export function Header(props) {
           <ColorModeIconToggle className="ml-5"/>
         </div>
       </Box>
-      </Container>
     </nav>
   );
 }
diff --git a/website/src/components/Header/NavLinks.tsx b/website/src/components/Header/NavLinks.tsx
index 955d92f8..1813df15 100644
--- a/website/src/components/Header/NavLinks.tsx
+++ b/website/src/components/Header/NavLinks.tsx
@@ -2,8 +2,21 @@ import { useState } from "react";
 import Link from "next/link";
 import { AnimatePresence, motion } from "framer-motion";
 
+import { useColorMode } from "@chakra-ui/react";
+
+
 export function NavLinks(): JSX.Element {
   const [hoveredIndex, setHoveredIndex] = useState(null);
+  const { colorMode } = useColorMode();
+
+
+  const linkColor = (colorMode === "light") ? 
+    "text-gray-700 hover:text-gray-900" :
+    "text-gray-50 hover:text-white";
+
+  const hoverBgColor = (colorMode === "light") ? 
+  "bg-gray-100" :
+  "bg-gray-800";
 
   return (
     <>
@@ -14,14 +27,14 @@ export function NavLinks(): JSX.Element {
         <Link
           key={label}
           href={href}
-          className="relative -my-2 -mx-3 rounded-lg px-3 py-2 text-sm text-gray-700 transition-colors delay-150 hover:text-gray-900 hover:delay-[0ms]"
+          className={`${linkColor} relative -my-2 -mx-3 rounded-lg px-3 py-2 text-sm transition-colors delay-150 hover:delay-[0ms]`}
           onMouseEnter={() => setHoveredIndex(index)}
           onMouseLeave={() => setHoveredIndex(null)}
         >
           <AnimatePresence>
             {hoveredIndex === index && (
               <motion.span
-                className="absolute inset-0 rounded-lg bg-gray-100"
+                className={`${hoverBgColor} absolute inset-0 rounded-lg`}
                 layoutId="hoverBackground"
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1, transition: { duration: 0.15 } }}
diff --git a/website/src/components/Hero.tsx b/website/src/components/Hero.tsx
index c63f2769..980eeae8 100644
--- a/website/src/components/Hero.tsx
+++ b/website/src/components/Hero.tsx
@@ -1,11 +1,16 @@
 import { useId } from "react";
 import Image from "next/image";
+import { useColorMode } from "@chakra-ui/react";
 
 import { Container } from "./Container";
 
 function BackgroundIllustration(props) {
   const id = useId();
 
+  const { colorMode } = useColorMode();
+  const baseRingColor = colorMode === "light" ? "#d4d4d4" : "#005a69";
+  const gradStopColor = colorMode === "light" ? "#06b6d4" : "#00f2ff";
+
   return (
     <div {...props}>
       <svg
@@ -16,14 +21,14 @@ function BackgroundIllustration(props) {
       >
         <path
           d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
-          stroke="#D4D4D4"
+          stroke={baseRingColor}
           strokeOpacity="0.7"
         />
         <path d="M513 1025C230.23 1025 1 795.77 1 513" stroke={`url(#${id}-gradient-1)`} strokeLinecap="round" />
         <defs>
           <linearGradient id={`${id}-gradient-1`} x1="1" y1="513" x2="1" y2="1025" gradientUnits="userSpaceOnUse">
-            <stop stopColor="#06b6d4" />
-            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
+            <stop stopColor={gradStopColor} />
+            <stop offset="1" stopColor={gradStopColor} stopOpacity="0" />
           </linearGradient>
         </defs>
       </svg>
@@ -35,14 +40,14 @@ function BackgroundIllustration(props) {
       >
         <path
           d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
-          stroke="#D4D4D4"
+          stroke={baseRingColor}
           strokeOpacity="0.7"
         />
         <path d="M913 513c0 220.914-179.086 400-400 400" stroke={`url(#${id}-gradient-2)`} strokeLinecap="round" />
         <defs>
           <linearGradient id={`${id}-gradient-2`} x1="913" y1="513" x2="913" y2="913" gradientUnits="userSpaceOnUse">
-            <stop stopColor="#06b6d4" />
-            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
+            <stop stopColor={gradStopColor} />
+            <stop offset="1" stopColor={gradStopColor} stopOpacity="0" />
           </linearGradient>
         </defs>
       </svg>
@@ -51,17 +56,21 @@ function BackgroundIllustration(props) {
 }
 
 export function Hero() {
+  const { colorMode } = useColorMode();
+  const pTextColor = colorMode === "light" ? "text-gray-600" : "text-white";
+  const fancyTextGradientClasses = colorMode === "light" ? "from-blue-600 via-sky-400 to-blue-700" : "from-blue-500 via-sky-300 to-blue-400";
+  
   return (
     <div className="overflow-hidden py-20 sm:py-32 lg:pb-32 xl:pb-36">
       <Container className="">
         <div className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
           <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
             <h1 className="text-5xl mb-6 font-bold tracking-tight">Open Assistant</h1>
-            <p className="mt-8 text-3xl inline bg-gradient-to-r from-indigo-600 via-sky-400 to-indigo-700 bg-clip-text font-display tracking-tight text-transparent">
+            <p className={`bg-gradient-to-r ${fancyTextGradientClasses} mt-8 text-3xl inline bg-clip-text font-display tracking-tight text-transparent`}>
               <b>Conversational AI for everyone.</b>
             </p>
-            <p className="mt-6 text-lg text-gray-600">We believe we can create a revolution.</p>
-            <p className="mt-6 text-lg text-gray-600">
+            <p className={`mt-6 text-lg ${pTextColor}`}>We believe we can create a revolution.</p>
+            <p className={`mt-6 text-lg ${pTextColor}`}>
               In the same way that Stable Diffusion helped the world make art and images in new ways, we want to improve
               the world by providing amazing conversational AI.
             </p>
diff --git a/website/src/pages/auth/signin.tsx b/website/src/pages/auth/signin.tsx
index 0a3e9d09..aa9d23f5 100644
--- a/website/src/pages/auth/signin.tsx
+++ b/website/src/pages/auth/signin.tsx
@@ -4,10 +4,12 @@ import { FaBug, FaDiscord, FaEnvelope, FaGithub } from "react-icons/fa";
 import { getCsrfToken, getProviders, signIn } from "next-auth/react";
 import React, { useRef } from "react";
 import Link from "next/link";
-
+import { Header } from "src/components/Header";
+import { Footer } from "src/components/Footer";
 import { AuthLayout } from "src/components/AuthLayout";
+import { useColorMode } from "@chakra-ui/react";
 
-export default function Signin({ csrfToken, providers }) {
+function Signin({ csrfToken, providers }) {
   const { discord, email, github, credentials } = providers;
   const emailEl = useRef(null);
   const signinWithEmail = (ev: React.FormEvent) => {
@@ -21,8 +23,17 @@ export default function Signin({ csrfToken, providers }) {
     signIn(credentials.id, { callbackUrl: "/", username: debugUsernameEl.current.value });
   }
 
+  const { colorMode } = useColorMode();
+  const bgColorClass = colorMode === "light" ? "bg-gray-50" : "bg-chakra-gray-900";
+  const buttonBgColor = colorMode === "light" ? "#2563eb" : "#2563eb";
+  const borderClass = colorMode === "light" ? "border-slate-200" : "border-transparent";
+
+  const buttonColorScheme = colorMode === "light" ? "blue" : "dark-blue-btn";
+
+
+
   return (
-    <>
+    <div className={bgColorClass}>
       <Head>
         <title>Sign Up - Open Assistant</title>
         <meta name="Sign Up" content="Sign up to access Open Assistant" />
@@ -30,11 +41,11 @@ export default function Signin({ csrfToken, providers }) {
       <AuthLayout>
         <Stack spacing="2">
           {credentials && (
-            <form onSubmit={signinWithDebugCredentials} className="border-2 border-orange-200 rounded-md p-4 relative">
-              <span className="text-orange-600 absolute -top-3 left-5 bg-white px-1">For Debugging Only</span>
+            <form onSubmit={signinWithDebugCredentials} className="border-2 border-orange-600 rounded-md p-4 relative">
+              <span className={`text-orange-600 absolute -top-3 left-5 ${bgColorClass} px-1`}>For Debugging Only</span>
               <Stack>
-                <Input variant="outline" size="lg" placeholder="Username" ref={debugUsernameEl} />
-                <Button size={"lg"} leftIcon={<FaBug />} colorScheme="gray" type="submit">
+                <Input variant="outline" size="lg" placeholder="Username" ref={debugUsernameEl}/>
+                <Button size={"lg"} leftIcon={<FaBug />} colorScheme={buttonColorScheme} color="white" type="submit">
                   Continue with Debug User
                 </Button>
               </Stack>
@@ -44,7 +55,7 @@ export default function Signin({ csrfToken, providers }) {
             <form onSubmit={signinWithEmail}>
               <Stack>
                 <Input variant="outline" size="lg" placeholder="Email Address" ref={emailEl} />
-                <Button size={"lg"} leftIcon={<FaEnvelope />} colorScheme="gray" type="submit">
+                <Button size={"lg"} leftIcon={<FaEnvelope />} type="submit" colorScheme={buttonColorScheme} color="white">
                   Continue with Email
                 </Button>
               </Stack>
@@ -52,7 +63,7 @@ export default function Signin({ csrfToken, providers }) {
           )}
           {discord && (
             <Button
-              bg="#5865F2"
+              bg={buttonBgColor}
               _hover={{ bg: "#4A57E3" }}
               _active={{
                 bg: "#454FBF",
@@ -101,10 +112,21 @@ export default function Signin({ csrfToken, providers }) {
           </Link>
         </div>
       </AuthLayout>
-    </>
+    </div>
   );
 }
 
+
+Signin.getLayout = (page) => (
+  <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
+    <Header transparent={true} />
+    {page}
+    <Footer />
+  </div>
+);
+
+export default Signin;
+
 export async function getServerSideProps(context) {
   const csrfToken = await getCsrfToken();
   const providers = await getProviders();
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index b7527f3e..5071e719 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -26,11 +26,13 @@ const Home = () => {
           <TaskSelection />
         </Container>
       ) : (
-        <Container className="min-w-full" variant="no-padding">
+        <main className="oa-basic-theme">
+        {/* <Container className="min-w-full" variant="no-padding"> */}
           <Hero />
           <CallToAction />
           <Faq />
-        </Container>
+        {/* </Container> */}
+        </main>
       )}
     </>
   );
diff --git a/website/src/styles/Theme/colors.ts b/website/src/styles/Theme/colors.ts
index acbaa642..ac5eabdc 100644
--- a/website/src/styles/Theme/colors.ts
+++ b/website/src/styles/Theme/colors.ts
@@ -1,10 +1,14 @@
 export const colors = {
   light: {
-    bg: "gray.100",
+    bg: "rgb(250,250,250)",
     text: "black",
   },
   dark: {
     bg: "gray.900",
     text: "white",
   },
-};
+  'dark-blue-btn': {
+    200: 'rgb(29,78,216)',
+    300: 'blue',
+  }
+};
\ No newline at end of file
diff --git a/website/src/styles/Theme/components/Container.ts b/website/src/styles/Theme/components/Container.ts
index 40363015..159764b6 100644
--- a/website/src/styles/Theme/components/Container.ts
+++ b/website/src/styles/Theme/components/Container.ts
@@ -1,12 +1,6 @@
-import { color, defineStyle, defineStyleConfig, transition } from "@chakra-ui/styled-system";
-import { colors } from "../colors";
+import { defineStyleConfig } from "@chakra-ui/styled-system";
 
-const baseStyle = defineStyle(({ colorMode }) => ({
-  minWidth: "100%",
-  bg: colorMode === "light" ? colors.light.bg : colors.dark.bg,
-  transition: "background-color 200ms cubic-bezier(0.4, 0, 1, 1)",
-  color: colorMode === "light" ? colors.light.text : colors.dark.text,
-}));
+const baseStyle = {};
 
 const variants = {
   'no-padding': {
diff --git a/website/src/styles/Theme/index.ts b/website/src/styles/Theme/index.ts
index 998fa6b1..c8eaa706 100644
--- a/website/src/styles/Theme/index.ts
+++ b/website/src/styles/Theme/index.ts
@@ -1,11 +1,13 @@
 import { type ThemeConfig, extendTheme } from "@chakra-ui/react";
 import { containerTheme } from "./components/Container";
 import { Styles } from "@chakra-ui/theme-tools";
+import { colors } from "./colors";
 
 const config: ThemeConfig = {
   initialColorMode: "light",
   useSystemColorMode: true,
   disableTransitionOnChange: false,
+  
 };
 
 const components = {
@@ -13,9 +15,15 @@ const components = {
 };
 
 const styles: Styles = {
-  global: {
-    body: {
-      bg: "white",
+  global: (props) => ({
+    '*': {
+      transition: "background-color 200ms cubic-bezier(0.4, 0, 1, 1)",
+      // bg: props.colorMode === "light" ? colors.light.bg : colors.dark.bg,
+      // color: props.colorMode === "light" ? colors.light.text : colors.dark.text,
+    },
+    '.oa-basic-theme': {
+      bg: props.colorMode === "light" ? colors.light.bg : colors.dark.bg,
+      color: props.colorMode === "light" ? colors.light.text : colors.dark.text,
     },
     main: {
       fontFamily: "Inter",
@@ -23,7 +31,7 @@ const styles: Styles = {
     header: {
       fontFamily: "Inter",
     },
-  },
+  }),
 };
 
-export const theme = extendTheme({ config, styles, components });
+export const theme = extendTheme({ colors, config, styles, components });
diff --git a/website/tailwind.config.js b/website/tailwind.config.js
index e6622da1..393a0c04 100644
--- a/website/tailwind.config.js
+++ b/website/tailwind.config.js
@@ -71,6 +71,10 @@ module.exports = {
       maxWidth: {
         "2xl": "40rem",
       },
+
+      colors: {
+        'chakra-gray-900': '#171923',
+      }
     },
   },
   plugins: [require("@tailwindcss/forms")],