add dark theme

public/css/ashby-dark.css

@@ -0,0 +1,54 @@
+body {
+  background: transparent;
+  --color: #ededf0;
+  --color-100: #888890;
+  --selectBg: transparent;
+  --selectBorder: 1px solid #404146;
+  --selectColor: #cacad2;
+}
+
+._section_1qwfy_341 {
+  max-width: none;
+}
+[class^='_titles_'] {
+  display: none;
+}
+
+[class*='_section_'] {
+  background: transparent;
+}
+
+[class*='_content_'] {
+  padding: 0;
+}
+[class*='_filtersContainer_'] {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+[class^='_filter_'] {
+  padding: 12px 30px 12px 20px;
+  background: var(--selectBg);
+  border: var(--selectBorder);
+  color: var(--selectColor);
+}
+
+[class^='_departmentHeadingLevel_'] {
+  color: var(--color);
+}
+[class^='_jobPosting_'] {
+  background: transparent;
+  padding-left: 0;
+  padding-right: 0;
+}
+[class^='_jobPosting_'] [class*='_title_'] {
+  color: var(--color);
+}
+
+[class^='_jobPosting_'] [class*='_details_'] {
+  color: var(--color-100);
+}
+
+footer {
+  display: none;
+}

public/css/ashby.css

@@ -1,36 +1,53 @@
 body {
   background: transparent;
-  --color: ;
+  --color: #2b2b2f;
+  --color-100: #888890;
   --selectBg: transparent;
   --selectBorder: 1px solid #b0b0b8;
   --selectColor: #515259;
 }
-@media (prefers-color-scheme: dark) {
-  body {
-    --color: #ededf0;
-    --selectBg: transparent;
-    --selectBorder: 1px solid #404146;
-    --selectColor: #cacad2;
-  }
-}
-
 ._section_1qwfy_341 {
   max-width: none;
 }
 [class^='_titles_'] {
   display: none;
 }
 
-[class^='_container_'] {
+[class*='_section_'] {
   background: transparent;
 }
 
+[class*='_content_'] {
+  padding: 0;
+}
+[class*='_filtersContainer_'] {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 [class^='_filter_'] {
   padding: 12px 30px 12px 20px;
   background: var(--selectBg);
   border: var(--selectBorder);
   color: var(--selectColor);
 }
+
 [class^='_departmentHeadingLevel_'] {
   color: var(--color);
 }
+[class^='_jobPosting_'] {
+  background: transparent;
+  padding-left: 0;
+  padding-right: 0;
+}
+[class^='_jobPosting_'] [class*='_title_'] {
+  color: var(--color);
+}
+
+[class^='_jobPosting_'] [class*='_details_'] {
+  color: var(--color-100);
+}
+
+footer {
+  display: none;
+}

src/components/jobsBlocks/AshbyBlock.tsx

@@ -1,41 +1,60 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { AshbySection } from './styled/AshbyBlock.styled';
 import { AshbyBlockPictureWrapperLeft, AshbyBlockPictureWrapperRight } from './styled/AshbyBlock.styled';
 import ContainerSection from '../Container';
 import AshbyLeft from '../../assets/graphics/light/ashby-left';
 import AshbyLeftDark from '../../assets/graphics/dark/ashby-left-dark';
 import AshbyRight from '../../assets/graphics/light/ashby-right';
 import AshbyRightDark from '../../assets/graphics/dark/ashby-right-dark';
+import { ThemeContext } from '../../themes';
 
 type Props = {
   boardName?: string; // nomic.foundation, test: ashby-embed-demo-org
 };
 
 const AshbyBlock = ({ boardName = 'nomic.foundation' }: Props) => {
+  const { theme } = useContext(ThemeContext);
+
+  const cssFile = theme === 'LIGHT' ? 'ashby' : 'ashby-dark';
+
   React.useEffect(() => {
     const scriptTag = document.createElement('script');
     scriptTag.id = 'ashby-script';
     scriptTag.src = `https://jobs.ashbyhq.com/${boardName}/embed?version=2`;
     document.body.appendChild(scriptTag);
-  }, [boardName]);
+
+    //@ts-ignore
+    window.__Ashby = {
+      settings: {
+        ashbyBaseJobBoardUrl: `https://jobs.ashbyhq.com/${boardName}`,
+        customCssUrl: `https://focusreactive.github.io/nomic-foundation-website/public/css/${cssFile}.css`,
+      },
+    };
+
+    return () => {
+      scriptTag.remove();
+    };
+  }, [boardName, cssFile]);
 
   return (
     <>
       <AshbySection>
-        <ContainerSection>
+        <ContainerSection title='Join us'>
           <div id='ashby_embed'></div>
 
-          <script
+          {/* <script
+            key={theme}
             dangerouslySetInnerHTML={{
               __html: `
               window.__Ashby = {
                 settings: {
                   ashbyBaseJobBoardUrl: "https://jobs.ashbyhq.com/${boardName}",
-                  customCssUrl: "https://focusreactive.github.io/nomic-foundation-website/public/css/ashby.css",
+                  customCssUrl: "https://focusreactive.github.io/nomic-foundation-website/public/css/${cssFile}.css",
                 }
-              }`,
+              } `,
             }}
-          />
+          /> */}
+
           <AshbyBlockPictureWrapperLeft>
             <AshbyLeft className='light' />
             <AshbyLeftDark className='dark' />
@@ -50,4 +69,9 @@ const AshbyBlock = ({ boardName = 'nomic.foundation' }: Props) => {
   );
 };
 
-export default AshbyBlock;
+const Container = () => {
+  const { theme } = useContext(ThemeContext);
+  return <AshbyBlock key={theme} />;
+};
+
+export default Container;

src/pages/jobs.tsx

@@ -18,8 +18,9 @@ import CultureBlock from '../components/jobsBlocks/CultureBlock';
 import BenefitsBlock from '../components/jobsBlocks/BenefitsBlock';
 import AshbyBlock from '../components/jobsBlocks/AshbyBlock';
 import FaqBlock from '../components/jobsBlocks/FaqBlock';
-import { appTheme } from '../themes';
+import { ThemeContext, appTheme } from '../themes';
 import HiringProcessBlock from '../components/jobsBlocks/HiringProcessBlock';
+import { useContext } from 'react';
 
 const Jobs: NextPage = () => {
   return (