-
Option 1
+
-
:
-
-
Visualization & Illustration
+
+
Visualization & Illustration
}
diff --git a/site/src/components/Theme/index.js b/site/src/components/Theme/index.js
index 51800fe0..15e2d505 100644
--- a/site/src/components/Theme/index.js
+++ b/site/src/components/Theme/index.js
@@ -1,33 +1,45 @@
-import React from "react"
-import { ThemeToggler } from "gatsby-plugin-dark-mode"
-import Weather from '../../assets/images/Weather.svg';
-import Search from '../../assets/images/Search.svg';
-// import SearchDark from "../../assets/images/Search-dark.svg";
-
-export default function ThemeToggle() {
- return (
-
- {({ theme, toggleTheme }) => (
- 
toggleTheme(theme === 'dark' ? 'light' : 'dark')}
- />
-
- )}
-
- )
+import React, { useState, useEffect } from "react";
+
+const defaultState = {
+ dark: false,
+ toggleDark: () => {},
+};
+
+const ThemeContext = React.createContext(defaultState);
+
+const supportsDarkMode = () =>
+ window.matchMedia("(prefers-color-scheme: dark)").matches === true;
+
+function ThemeProvider({ children }) {
+ const [dark, setDark] = useState(false);
+
+ const toggleDark = () => {
+ const newDark = !dark;
+ localStorage.setItem("dark", JSON.stringify(newDark));
+ setDark(newDark);
+ };
+
+ useEffect(() => {
+ // Getting dark mode value from localStorage!
+ const isDark = JSON.parse(localStorage.getItem("dark"));
+ if (isDark) {
+ setDark(isDark);
+ } else if (supportsDarkMode()) {
+ setDark(true);
+ }
+ }, []);
+
+ return (
+
+ {children}
+
+ );
}
-// export function SearchToggle(){
-// return (
-//
-// {({ theme}) => (
-//
-// )}
-//
-// )
-// }
\ No newline at end of file
+export default ThemeContext;
+export { ThemeProvider };
diff --git a/site/src/pages/index.js b/site/src/pages/index.js
index 62940715..3e096f34 100644
--- a/site/src/pages/index.js
+++ b/site/src/pages/index.js
@@ -1,50 +1,52 @@
-import * as React from "react"
+import React, {useContext} from "react";
import {
BrowserRouter as Router,
Route,
Routes,
Navigate,
} from "react-router-dom";
-import Navbar from "../components/Navigation"
-import Sidebar from "../components/Sidebar"
-import Footer from "../components/Footer"
+import Navbar from "../components/Navigation";
+import Sidebar from "../components/Sidebar";
+import Footer from "../components/Footer";
import Home from "./home";
import Color from "./identity/colors";
import Typography from "./identity/typography";
import Elevation from "./identity/elevation";
import Spacing from "./identity/spacing";
import PageLayout from "./identity/page-layouts";
-import ThemeToggle from "../components/Theme";
import '../styles/global.css';
+import ThemeContext from "../components/Theme";
const IndexPage = () => {
-const routes = (
-
- } exact/>
- } exact/>
- } exact/>
- } exact/>
- } exact/>
- } exact/>
- } exact/>
- } exact/>
- } />
-
-)
+ const theme = useContext(ThemeContext);
+ const routes = (
+
+ } exact />
+ } exact />
+ } exact />
+ } exact />
+ } exact />
+ } exact />
+ } exact />
+ } exact />
+ } />
+
+ );
+
return (
-
-
-
-
-
- {routes}
-
-
-
-
- )
+
+
+
+
+
+ {routes}
+
+
+
+
+ );
}
-export default IndexPage
+export default IndexPage;
-export const Head = () =>
Layer5 Design System
+export const Head = () =>
Layer5 Design System;
diff --git a/site/src/styles/global.css b/site/src/styles/global.css
index 771f6a79..e447e09e 100644
--- a/site/src/styles/global.css
+++ b/site/src/styles/global.css
@@ -6,14 +6,17 @@
@tailwind utilities;
/* Global.css */
-:root {
+.light {
--border-strong: #647176;
--border-default: #EAEDEE;
--background-default: #FDFDFD;
- --text-brand: #007763;
- --background-brand-default: #007763;
+ --text-brand: #51636B;
+ --background-brand-default: #51636B;
--text-default: #000D12;
--search-default: #15272F;
+ --text-secondary: #3C494E;
+ --border-brand: #007763;
+ --background-brand-tertiary: #DAF2EB;
}
/* Define dark mode styles */
@@ -25,11 +28,11 @@
--background-brand-default: #00B39F;
--text-default: #FDFDFD;
--search-default: #E7EFF3;
+ --text-secondary: #EAEDEE;
+ --border-brand: #8D9FA7;
+ --background-brand-tertiary: #00403F;
}
-body {
- background-color: var(--background-default);
-}
@font-face {
font-family: "Qanelas Soft Black";
src: url('../assets/fonts/qanelas-soft/QanelasSoftBlack.otf') format('opentype');
diff --git a/site/tailwind.config.js b/site/tailwind.config.js
index 5c345881..56bd19b5 100644
--- a/site/tailwind.config.js
+++ b/site/tailwind.config.js
@@ -14,7 +14,10 @@ module.exports = {
'text-brand': 'var(--text-brand)',
'background-brand-default': 'var(--background-brand-default)',
'text-default': 'var(--text-default)',
- 'search-default': 'var(--search-default)'
+ 'search-default': 'var(--search-default)',
+ 'text-secondary': 'var(--text-secondary)',
+ 'border-brand': 'var(--border-brand)',
+ 'background-brand-tertiary': 'var(--background-brand-tertiary)',
},
},
fontFamily: {