add theming

Author: cherylli

components/ContactUs/ContactUsCards.module.scss

@@ -1,6 +1,3 @@
-@use '../../styles/mixins' as *;
-@use '../../styles/variables' as *;
-
 .contactCards {
-  background-color: $white;
+  background-color: var(--white);
 }

components/layout/Layout/index.js

@@ -1,25 +1,25 @@
-import { useRouter } from 'next/router';
-import { heroOptions } from '@/utils/hero-options';
-import Hero from '@/components/layout/Hero';
-import Meta from '@/components/layout/Meta';
-import Footer from '@/components/layout/Footer';
-import S from './styles';
-
-export default function Layout({ children }) {
-  const router = useRouter();
-  const heroPathKeys = Object.keys(heroOptions)
-    .sort((a, b) => a - b)
-    .filter(k => router.pathname.startsWith(k));
-
-  const heroKey = heroPathKeys[heroPathKeys.length - 1];
-  return (
-    <>
-      <Meta />
-      <S.Main>
-        <Hero {...heroOptions[heroKey]} />
-        {children}
-        <Footer />
-      </S.Main>
-    </>
-  );
-}
+import { useRouter } from 'next/router';
+import { heroOptions } from '@/utils/hero-options';
+import Hero from '@/components/layout/Hero';
+import Meta from '@/components/layout/Meta';
+import Footer from '@/components/layout/Footer';
+import S from './styles';
+
+export default function Layout({ children }) {
+  const router = useRouter();
+  const heroPathKeys = Object.keys(heroOptions)
+    .sort((a, b) => a - b)
+    .filter(k => router.pathname.startsWith(k));
+
+  const heroKey = heroPathKeys[heroPathKeys.length - 1];
+  return (
+    <>
+      <Meta />
+      <S.Main>
+        <Hero {...heroOptions[heroKey]} />
+        {children}
+        <Footer />
+      </S.Main>
+    </>
+  );
+}

pages/_app.js

@@ -2,9 +2,9 @@ import Layout from '@/components/layout/Layout';
 import { useState } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { lightTheme, darkTheme, GlobalStyles } from '@/styles/themeConfig';
+import '@/styles/index.scss';
 
 function MyApp({ Component, pageProps }) {
-  
   // Only uncomment when the darkTheme is set
   // const [theme, setTheme] = useState('light');
   // const toggleTheme = () => {

styles/index.scss

@@ -0,0 +1,3 @@
+@use './themes';
+@use './mixins';
+@use './variables';

styles/themes.scss

@@ -0,0 +1,14 @@
+:root {
+  --white: #ffffff;
+  --bg-color: #eaeaea;
+}
+
+[data-theme='dark'] {
+  --bg-color: #333;
+}
+
+// Theming notes:
+/*
+Set document data-theme to dark to activate dark theme, for example
+  document.documentElement.setAttribute('data-theme', 'dark');
+ */