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/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>
   );
 }

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