Merge branch 'adi-theme' into 'main'
Add ThemeContext Closes #20 See merge request csc/website!1
This commit is contained in:
commit
3e53c597c9
|
@ -7,6 +7,6 @@
|
||||||
width: 250px;
|
width: 250px;
|
||||||
height: 250px;
|
height: 250px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 2px solid #333;
|
border: 4px solid var(--blue-2);
|
||||||
background-color: #ddd;
|
background-color: var(--off-white);
|
||||||
}
|
}
|
|
@ -0,0 +1,36 @@
|
||||||
|
import React, { createContext, ReactElement, useEffect, useState } from "react";
|
||||||
|
|
||||||
|
type Theme = "light" | "dark";
|
||||||
|
|
||||||
|
const ThemeContext = createContext<{
|
||||||
|
theme: Theme;
|
||||||
|
setTheme(newTheme: Theme): void;
|
||||||
|
}>({
|
||||||
|
theme: "light",
|
||||||
|
setTheme: () => {
|
||||||
|
throw new Error("Use ThemeProvider instead.");
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
theme: Theme;
|
||||||
|
children?: ReactElement;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ThemeProvider({ children, theme }: Props) {
|
||||||
|
const [currentTheme, setTheme] = useState(theme);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (currentTheme === "light") {
|
||||||
|
document.body.classList.remove("dark");
|
||||||
|
} else if (currentTheme === "dark") {
|
||||||
|
document.body.classList.add("dark");
|
||||||
|
}
|
||||||
|
}, [currentTheme]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ThemeContext.Provider value={{ theme: currentTheme, setTheme }}>
|
||||||
|
{children}
|
||||||
|
</ThemeContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
|
@ -0,0 +1,30 @@
|
||||||
|
/* Default is light theme */
|
||||||
|
body {
|
||||||
|
--off-white: #fdf8f5;
|
||||||
|
--teal-1: #76ffdc;
|
||||||
|
--teal-2: #4ed4b2;
|
||||||
|
--blue-1: #5caff9;
|
||||||
|
--blue-2: #5caff9;
|
||||||
|
--purple-1: #525284;
|
||||||
|
--purple-2: #2a2a62;
|
||||||
|
--gradient-blue-green: linear-gradient(
|
||||||
|
99.94deg,
|
||||||
|
#1481e3 -17.95%,
|
||||||
|
#4ed4b2 172.82%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--off-white: #fdf8f5;
|
||||||
|
--teal-1: #76ffdc;
|
||||||
|
--teal-2: #4ed4b2;
|
||||||
|
--blue-1: #5caff9;
|
||||||
|
--blue-2: #5caff9;
|
||||||
|
--purple-1: #525284;
|
||||||
|
--purple-2: #2a2a62;
|
||||||
|
--gradient-blue-green: linear-gradient(
|
||||||
|
99.94deg,
|
||||||
|
#1481e3 -17.95%,
|
||||||
|
#4ed4b2 172.82%
|
||||||
|
);
|
||||||
|
}
|
|
@ -1,11 +1,15 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { AppProps } from "next/app";
|
import { AppProps } from "next/app";
|
||||||
import { MDXProvider } from "@mdx-js/react";
|
import { MDXProvider } from "@mdx-js/react";
|
||||||
|
import { ThemeProvider } from "../components/theme";
|
||||||
|
import "./_app.css";
|
||||||
|
|
||||||
export default function App({ Component, pageProps }: AppProps): JSX.Element {
|
export default function App({ Component, pageProps }: AppProps): JSX.Element {
|
||||||
return (
|
return (
|
||||||
<MDXProvider components={{}}>
|
<ThemeProvider theme="light">
|
||||||
<Component {...pageProps} />
|
<MDXProvider components={{}}>
|
||||||
</MDXProvider>
|
<Component {...pageProps} />
|
||||||
|
</MDXProvider>
|
||||||
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue