At70 dark mode

src/App.tsx

@@ -16,47 +16,50 @@ import VacancyDetail from './pages/VacancyDetail';
 import { MarkdownEditor } from './pages/MarkdownEditor';
 import { AuthContextProvider } from './Context/AuthContext';
 import { UserContextProvider } from './Context/UserContext';
+import { ThemeContextProvider } from './Context/ThemeContext';
 import { QueryClient, QueryClientProvider } from 'react-query';
 
 export const App = () => {
   const queryClient = new QueryClient();
   return (
     <Router>
-      <QueryClientProvider client={queryClient}>
-        <AuthContextProvider>
-          <UserContextProvider>
-            <ScrollToTop />
-            <Switch>
-              <Route path={['/editor']} exact>
-                <Switch>
-                  <Route path="/editor" exact component={MarkdownEditor} />
-                </Switch>
-              </Route>
-
-              <Route>
-                <Layout>
+      <ThemeContextProvider>
+        <QueryClientProvider client={queryClient}>
+          <AuthContextProvider>
+            <UserContextProvider>
+              <ScrollToTop />
+              <Switch>
+                <Route path={['/editor']} exact>
                   <Switch>
-                    <Route path="/worlds" exact component={Worlds} />
-                    <Route path="/worlds/:worldContent" exact component={WorldOverview} />
-                    <Route path="/worlds/:worldContent/:worldDetail/:videoSlug?" exact component={WorldDetail} />
-                    <Route path="/coming-soon" exact component={ComingSoon} />
-                    <Route path="/profile" exact component={Profile} />
-                    <Route path="/leaderboard" exact component={Leaderboard} />
-                    <Route path="/contribute" exact component={Contribute} />
-                    <Route path="/explanation" exact component={ExplanationVideos} />
-                    <Route path="/earn" exact component={Earn} />
-                    <Route path="/earn/:vacancyDetail" exact component={VacancyDetail} />
-                    <Route path="/" exact>
-                      <Redirect to="/worlds" />
-                    </Route>
-                    <Route component={Error404} />
+                    <Route path="/editor" exact component={MarkdownEditor} />
                   </Switch>
-                </Layout>
-              </Route>
-            </Switch>
-          </UserContextProvider>
-        </AuthContextProvider>
-      </QueryClientProvider>
+                </Route>
+
+                <Route>
+                  <Layout>
+                    <Switch>
+                      <Route path="/worlds" exact component={Worlds} />
+                      <Route path="/worlds/:worldContent" exact component={WorldOverview} />
+                      <Route path="/worlds/:worldContent/:worldDetail/:videoSlug?" exact component={WorldDetail} />
+                      <Route path="/coming-soon" exact component={ComingSoon} />
+                      <Route path="/profile" exact component={Profile} />
+                      <Route path="/leaderboard" exact component={Leaderboard} />
+                      <Route path="/contribute" exact component={Contribute} />
+                      <Route path="/explanation" exact component={ExplanationVideos} />
+                      <Route path="/earn" exact component={Earn} />
+                      <Route path="/earn/:vacancyDetail" exact component={VacancyDetail} />
+                      <Route path="/" exact>
+                        <Redirect to="/worlds" />
+                      </Route>
+                      <Route component={Error404} />
+                    </Switch>
+                  </Layout>
+                </Route>
+              </Switch>
+            </UserContextProvider>
+          </AuthContextProvider>
+        </QueryClientProvider>
+      </ThemeContextProvider>
     </Router>
   );
 };

src/Context/ThemeContext.tsx

@@ -0,0 +1,47 @@
+import { createContext, useEffect, useState } from "react";
+
+export type ThemeContextProps = {
+  theme: string;
+  setTheme: (userAccount: string) => void;
+};
+
+export const ThemeContext = createContext<ThemeContextProps>({} as ThemeContextProps);
+
+export const ThemeContextProvider: React.FC = (props) => {
+  const handleInitialState = () => {
+    const themeState = localStorage.getItem("theme");
+    if (themeState) {
+      return themeState;
+    } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'theme--dark';
+    } else {
+      return 'theme--light';
+    }
+  };
+
+  const [theme, setTheme] = useState(handleInitialState());
+
+  const handleSystemState = () => {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+      const newTheme = e.matches ? 'dark' : 'light';
+      setTheme(`theme--${newTheme}`);
+    });
+  };
+
+  useEffect(() => {
+    handleSystemState();
+  }, []);
+
+  const providerValue = {
+    theme,
+    setTheme
+  };
+
+  return (
+    <ThemeContext.Provider value={providerValue}>
+      <div className={theme}>
+        {props.children}
+      </div>
+    </ThemeContext.Provider>
+  );
+};

src/assets/css/base/_main.scss

@@ -1,7 +1,3 @@
-body {
-  background-color: $color-07;
-}
-
 .main {
   width: 100%;
   height: calc(100% - 58px);
@@ -15,12 +11,26 @@ body {
   background-repeat: no-repeat;
   margin-top: 60px;
 
+  @include themify($themes) {
+    background-color: themed(elevation0);
+  }
+
   @include for-size(1200px) {
     margin-left: 300px;
     margin-top: 0;
   }
 }
 
+.main-nav {
+  @include themify($themes) {
+    background-color: themed(elevation2);
+  }
+
+  @include themify($themes) {
+    border-right: 2px solid themed(border);
+  }
+}
+
 .link {
   color: inherit;
   text-decoration: none;

src/assets/css/components/_LearnToNavigate.scss

@@ -18,10 +18,18 @@
       font-family: $font-family-headings;
       color: $color-koios-dark-grey;
       margin-bottom: $spacing-2x;
+
+      @include themify($themes) {
+        color: themed(textColor);
+      }
     }
     &__description {
       margin-bottom: $spacing-2x;
       color: $color-koios-dark-grey;
+
+      @include themify($themes) {
+        color: themed(textColor);
+      }
     }
 
     .links {

src/assets/css/components/_LevelCards.scss

@@ -21,10 +21,18 @@
       font-size: 24px;
       padding-bottom: $spacing-2x;
       color: $color-koios-dark-grey;
+
+      @include themify($themes) {
+        color: themed(textColor);
+      }
     }
 
     &__description {
       color: $color-koios-dark-grey;
+
+      @include themify($themes) {
+        color: themed(textColor);
+      }
     }
   }
 

src/assets/css/components/_SmallCard.scss

@@ -25,6 +25,10 @@
     margin: $spacing-2x auto;
     max-width: 270px;
 
+    @include themify($themes) {
+      background-color: themed(elevation3);
+    }
+
     @include for-size($tablet) {
       max-width: 230px;
     }
@@ -43,16 +47,28 @@
         width: 50px;
         height: 50px;
         fill: #6D59E6;
+
+        @include themify($themes) {
+          fill: themed(cardiconfill);
+        }
       }
     }
     &__title {
       font-family: $font-family-headings;
       color: $color-koios-dark-grey;
       font-size: 2rem;
+
+      @include themify($themes) {
+        color: themed(textColor);
+      }
     }
 
     &__description {
       margin-bottom: $spacing-2x;
+
+      @include themify($themes) {
+        color: themed(textColor);
+      }
     }
 
     &__link {
@@ -70,6 +86,10 @@
       font-size: 16px;
       cursor: pointer;
 
+      @include themify($themes) {
+        background-color: themed(pinkButton);
+      }
+
       &:hover {
         background-color: rgba(204, 8, 137, 80%);
       }

src/assets/css/components/_Team.scss

@@ -14,15 +14,27 @@
       color: $color-koios-dark-grey;
       font-size: 32px;
       padding-bottom: $spacing-2x;
+
+      @include themify($themes) {
+        color: themed(textColor);
+      }
     }
 
     &__subtitle {
       font-weight: 600;
       padding-bottom: $spacing-2x;
+
+      @include themify($themes) {
+        color: themed(textColor);
+      }
     }
 
     &__paragraph {
       padding-bottom: $spacing-2x;
+
+      @include themify($themes) {
+        color: themed(textColor);
+      }
     }
   }
 
@@ -55,13 +67,21 @@
         color: $color-koios-dark-grey;
         text-align: center;
         margin-bottom: $spacing-1x;
+
+        @include themify($themes) {
+          color: themed(textColor);
+        }
       }
 
       &__description {
         color: $color-koios-dark-grey;
         font-size: 14px;
         margin-bottom: $spacing-1x;
         flex-grow: 1;
+
+        @include themify($themes) {
+          color: themed(textColor);
+        }
       }
 
       .socials {

src/assets/css/components/_VacancyCard.scss

@@ -5,9 +5,18 @@
   transition: all .25s ease;
   position: relative;
 
+  @include themify($themes) {
+    background-color: themed(elevation2);
+    box-shadow: 0px 0px 21px -10px themed(cardShadow);
+  }
+
   &:hover {
     transform: translateY(-$spacing-2x);
     box-shadow: 0px 0px 21px -10px rgb(110 110 110 / 100%);
+
+    @include themify($themes) {
+      box-shadow: 0px 0px 21px -10px themed(cardShadowActive);
+    }
   }
 
   &__banner {
@@ -28,12 +37,20 @@
       color: $color-koios-dark-grey;
       padding-bottom: $spacing-1x;
       font-weight: 700;
+
+      @include themify($themes) {
+        color: themed(textColor);
+      }
     }
 
     &__subtitle {
       color: #bbbbbb;
       font-size: 12px;
       padding-bottom: $spacing-1x;
+
+      @include themify($themes) {
+        color: themed(textColor-1);
+      }
     }
 
     &__description {
@@ -42,6 +59,10 @@
       -webkit-line-clamp: 5;
       -webkit-box-orient: vertical;
       overflow: hidden;
+
+      @include themify($themes) {
+        color: themed(textColor-1);
+      }
     }
   }
 
@@ -59,6 +80,7 @@
       max-height: $spacing-5x;
       object-fit: cover;
       background-color: white;
+      border-radius: 50%;
 
       &:first-child {
         margin-right: $spacing-2x;