diff --git a/website/src/app/layout.tsx b/website/src/app/layout.tsx
index aa322c4..27b13e3 100644
--- a/website/src/app/layout.tsx
+++ b/website/src/app/layout.tsx
@@ -1,4 +1,3 @@
-import { CssBaseline } from "@mui/material";
import "../styles/globals.css";
import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter";
import localFont from "next/font/local";
@@ -26,7 +25,7 @@ export default function RootLayout({
children: React.ReactNode;
}) {
return (
-
+
{/* */}
-
+ {/* */}
{children}
diff --git a/website/src/app/page.tsx b/website/src/app/page.tsx
index 9760cf8..8f0fe2a 100644
--- a/website/src/app/page.tsx
+++ b/website/src/app/page.tsx
@@ -4,7 +4,7 @@ import { LandingPageLayout } from "@/components/layout";
import { FilterProvider } from "@/components/layout/filterContext";
import { SearchInput } from "@/components/searchInput";
import { Box, Typography, Link } from "@mui/material";
-
+import type {} from "@mui/material/themeCssVarsAugmentation";
import localFont from "next/font/local";
import { Suspense } from "react";
@@ -35,7 +35,7 @@ export default function Home() {
fontVariantLigatures: "normal",
}}
>
- Noogλe :: 2024
+ Noogλe
diff --git a/website/src/components/ClientSideLayoutContext.tsx b/website/src/components/ClientSideLayoutContext.tsx
index 2f2d850..4d3d937 100644
--- a/website/src/components/ClientSideLayoutContext.tsx
+++ b/website/src/components/ClientSideLayoutContext.tsx
@@ -1,28 +1,56 @@
"use client";
-import {
- CssBaseline,
- ThemeProvider,
- createTheme,
- useMediaQuery,
-} from "@mui/material";
-import { darkThemeOptions, lightThemeOptions } from "@/styles/theme";
-import { ReactNode } from "react";
+import { CssBaseline, useMediaQuery } from "@mui/material";
+import { cssThemeOptions } from "@/styles/theme";
+import { ReactNode, useEffect, useState } from "react";
import { Toaster } from "react-hot-toast";
+import {
+ Experimental_CssVarsProvider as CssVarsProvider,
+ experimental_extendTheme as extendTheme,
+ getInitColorSchemeScript,
+ useColorScheme,
+} from "@mui/material/styles";
+
+const theme = extendTheme(cssThemeOptions);
+
+const ModeTracker = () => {
+ const userPrefersDarkmode = useMediaQuery("(prefers-color-scheme: dark)");
+ const { setMode } = useColorScheme();
+
+ const [mounted, setMounted] = useState(false);
-const darkTheme = createTheme(darkThemeOptions);
-const lightTheme = createTheme(lightThemeOptions);
+ useEffect(
+ () => {
+ setMounted(true);
+
+ setMode(userPrefersDarkmode ? "dark" : "light");
+ },
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [userPrefersDarkmode]
+ );
+
+ if (!mounted) {
+ // for server-side rendering
+ // learn more at https://github.com/pacocoursey/next-themes#avoid-hydration-mismatch
+ return null;
+ }
+
+ return <>>;
+};
export const ClientSideLayoutContext = ({
children,
}: {
children: ReactNode;
}) => {
- const userPrefersDarkmode = useMediaQuery("(prefers-color-scheme: dark)");
return (
-
-
-
- {children}
-
+ <>
+ {getInitColorSchemeScript()}
+
+
+
+
+ {children}
+
+ >
);
};
diff --git a/website/src/components/HighlightBaseline.tsx b/website/src/components/HighlightBaseline.tsx
index c79eeb9..8f2121d 100644
--- a/website/src/components/HighlightBaseline.tsx
+++ b/website/src/components/HighlightBaseline.tsx
@@ -1,17 +1,18 @@
"use client";
-import { useTheme } from "@mui/material";
+import { useColorScheme } from "@mui/material";
import { useEffect } from "react";
export const HighlightBaseline = () => {
- const theme = useTheme();
+ const { mode } = useColorScheme();
useEffect(() => {
- if (theme.palette.mode === "dark") {
- // @ts-ignore - don't check type of css module
- import("highlight.js/styles/github-dark.css");
+ console.log({ mode });
+ // @ts-ignore - don't check type of css module
+ import("highlight.js/styles/github-dark.css");
+ if (mode === "dark") {
} else {
// @ts-ignore - don't check type of css module
- import("highlight.js/styles/github.css");
+ // import("highlight.js/styles/github.css");
}
- }, [theme]);
+ }, [mode]);
return <>>;
};
diff --git a/website/src/components/functionOfTheDay/functionOfTheDay.tsx b/website/src/components/functionOfTheDay/functionOfTheDay.tsx
index a542cf1..6691a30 100644
--- a/website/src/components/functionOfTheDay/functionOfTheDay.tsx
+++ b/website/src/components/functionOfTheDay/functionOfTheDay.tsx
@@ -6,7 +6,7 @@ import {
CardContent,
CardHeader,
Divider,
- useTheme,
+ styled,
} from "@mui/material";
import { useMemo, useState } from "react";
import seedrandom from "seedrandom";
@@ -37,10 +37,20 @@ function getRandomIntInclusive(min: number, max: number, config?: Config) {
return Math.floor(randomNumber * (max - min + 1) + min); // The maximum is inclusive and the minimum is inclusive
}
+const FunctionCard = styled(
+ Card,
+ {}
+)(({ theme }) => ({
+ width: "100%",
+ borderImageSlice: 1,
+ borderImageSource: `linear-gradient(to left, ${theme.vars.palette.info.light},${theme.vars.palette.error.main})`,
+ // : `linear-gradient(to left, ${info.light},${info.dark})`,
+ borderWidth: 4,
+ borderStyle: "solid",
+}));
+
export const FunctionOfTheDay = () => {
- const {
- palette: { info, error },
- } = useTheme();
+ // const { mode } = useColorScheme();
const todaysIdx = useMemo(
() => getRandomIntInclusive(0, data.length - 1),
@@ -74,20 +84,7 @@ export const FunctionOfTheDay = () => {
};
return (
-
+
{
Next
-
+
);
};
diff --git a/website/src/components/layout/Background.tsx b/website/src/components/layout/Background.tsx
index b5ad893..81f812b 100644
--- a/website/src/components/layout/Background.tsx
+++ b/website/src/components/layout/Background.tsx
@@ -1,9 +1,8 @@
"use client";
-import { Box, useTheme } from "@mui/material";
+import { Box } from "@mui/material";
import { ReactNode } from "react";
export const Background = ({ children }: { children: ReactNode }) => {
- const theme = useTheme();
return (
{
flexDirection: "column",
overflowX: "hidden",
overflowY: "scroll",
- bgcolor:
- theme.palette.mode === "light" ? "rgb(242, 248, 253)" : "#070c16",
+ bgcolor: "background.paper",
}}
>
{children}
diff --git a/website/src/components/layout/header.tsx b/website/src/components/layout/header.tsx
index 660751d..ac61e7b 100644
--- a/website/src/components/layout/header.tsx
+++ b/website/src/components/layout/header.tsx
@@ -1,5 +1,5 @@
"use client";
-import { Box, LinearProgress, Link, useTheme } from "@mui/material";
+import { Box, LinearProgress, Link } from "@mui/material";
import { SearchInput } from "../searchInput";
import { Filter } from "../filter";
import { Suspense } from "react";
@@ -13,8 +13,6 @@ const fira = localFont({
});
export const Header = () => {
- const theme = useTheme();
-
return (
<>
{
width: "100%",
py: 1.2,
zIndex: 1000,
- backgroundColor:
- theme.palette.mode === "light" ? "primary.main" : "#101010",
+ backgroundColor: "header.default",
display: "grid",
gridTemplateColumns: {
xs: "1fr",
diff --git a/website/src/components/layout/layout.tsx b/website/src/components/layout/layout.tsx
index a4b9bca..2a9b912 100644
--- a/website/src/components/layout/layout.tsx
+++ b/website/src/components/layout/layout.tsx
@@ -8,6 +8,7 @@ import {
} from "@mui/material";
import GitHubIcon from "@mui/icons-material/GitHub";
import { Background } from "./Background";
+import { ThemeSwitch } from "./themeSwitch";
export interface LayoutProps {
children: React.ReactNode;
@@ -38,6 +39,7 @@ export function LandingPageLayout(props: LayoutProps) {
+
{
+ const { mode, setMode } = useColorScheme();
+
+ return (
+ <>
+ {mode === "dark" ? (
+
+ setMode("light")}>
+
+
+
+ ) : (
+
+ setMode("dark")}>
+
+
+
+ )}
+ >
+ );
+};
diff --git a/website/src/components/markdownPreview/MarkdownPreview.tsx b/website/src/components/markdownPreview/MarkdownPreview.tsx
index 305d6fd..e547710 100644
--- a/website/src/components/markdownPreview/MarkdownPreview.tsx
+++ b/website/src/components/markdownPreview/MarkdownPreview.tsx
@@ -1,5 +1,5 @@
"use client";
-import { useTheme } from "@mui/material";
+import { useColorScheme } from "@mui/material";
import nix from "highlight.js/lib/languages/nix";
import haskell from "highlight.js/lib/languages/haskell";
import bash from "highlight.js/lib/languages/bash";
@@ -23,16 +23,17 @@ interface MarkdownPreviewProps {
}
export const MarkdownPreview = (props: MarkdownPreviewProps) => {
const { description } = props;
- const theme = useTheme();
+ const { mode } = useColorScheme();
useEffect(() => {
- if (theme.palette.mode === "dark") {
- // @ts-ignore - don't check type of css module
- import("highlight.js/styles/github-dark.css");
+ console.log({ mode });
+ // @ts-ignore - don't check type of css module
+ import("highlight.js/styles/github-dark.css");
+ if (mode === "dark") {
} else {
// @ts-ignore - don't check type of css module
- import("highlight.js/styles/github.css");
+ // import("highlight.js/styles/github.css");
}
- }, [theme]);
+ }, [mode]);
return (
<>
diff --git a/website/src/components/themeRegistry.tsx b/website/src/components/themeRegistry.tsx
deleted file mode 100644
index 4b4baf5..0000000
--- a/website/src/components/themeRegistry.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-"use client";
-import { darkThemeOptions, lightThemeOptions } from "@/styles/theme";
-import createCache from "@emotion/cache";
-import { CacheProvider } from "@emotion/react";
-import { useMediaQuery } from "@mui/material";
-import CssBaseline from "@mui/material/CssBaseline";
-import { ThemeProvider, createTheme } from "@mui/material/styles";
-import { useServerInsertedHTML } from "next/navigation";
-import React, { ReactNode } from "react";
-
-const lightTheme = createTheme(lightThemeOptions);
-const darkTheme = createTheme(darkThemeOptions);
-
-// This implementation is from emotion-js
-// https://github.com/emotion-js/emotion/issues/2928#issuecomment-1319747902
-export default function ThemeRegistry(props: {
- children: ReactNode;
- options: any;
-}) {
- const userPrefersDarkmode = useMediaQuery("(prefers-color-scheme: dark)");
-
- const { options, children } = props;
-
- const [{ cache, flush }] = React.useState(() => {
- const cache = createCache(options);
- cache.compat = true;
- const prevInsert = cache.insert;
- let inserted: string[] = [];
- cache.insert = (...args) => {
- const serialized = args[1];
- if (cache.inserted[serialized.name] === undefined) {
- inserted.push(serialized.name);
- }
- return prevInsert(...args);
- };
- const flush = () => {
- const prevInserted = inserted;
- inserted = [];
- return prevInserted;
- };
- return { cache, flush };
- });
-
- useServerInsertedHTML(() => {
- const names = flush();
- if (names.length === 0) {
- return null;
- }
- let styles = "";
- for (const name of names) {
- styles += cache.inserted[name];
- }
- return (
-
- );
- });
-
- return (
-
-
-
- {children}
-
-
- );
-}
diff --git a/website/src/styles/globals.css b/website/src/styles/globals.css
index 7f21d28..167012d 100644
--- a/website/src/styles/globals.css
+++ b/website/src/styles/globals.css
@@ -9,52 +9,32 @@ body {
table{
width: 100%;
border-collapse:collapse;
- border:1px solid #d8e2ff;
+ border:1px solid var(--mui-palette-misc-tableBorder);
}
table td{
padding: 8px;
- border:1px solid #d8e2ff;
+ border:1px solid var(--mui-palette-misc-tableBorder);
}
table th{
padding: 8px;
- border:1px solid #d8e2ff;
-}
-@media (prefers-color-scheme: dark) {
- a {
- color:#adc6ff;
- }
- table{
- border-color:#0f448e;
- }
-
- table td{
- border-color:#0f448e;
- }
- table th{
- border-color:#0f448e;
- }
+ border:1px solid var(--mui-palette-misc-tableBorder);
}
+a {
+ color: var(--mui-palette-misc-a);
+}
.caution, .important, .note, .tip, .warning, .example {
- background-color: #f9f9f9;
+ background-color: var(--mui-palette-fenced-bg);
padding: 10px 15px; /* Top and bottom padding of 10px, left and right padding of 15px */
margin: 15px 0; /* Vertical margins to separate the note from surrounding content */
font-style: italic; /* Italic font style to indicate note text */
/* color: #333; Dark grey color for the text for readability */
font-family: Arial, sans-serif; /* A clean, readable font */
border-radius: 4px; /* Slightly rounded corners for a modern look */
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
border-left: 5px solid; /* Solid left border for distinction */
}
-@media (prefers-color-scheme: dark) {
- .caution, .important, .note, .tip, .warning, .example {
- background-color: #2c2c2c; /* Darker background for dark mode */
- /* color: #ccc; Lighter text color for readability */
- box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1); /* Lighter shadow for depth */
- }
-}
.caution::before, .important::before, .note::before, .tip::before, .warning::before, .example::before {
font-weight: bold; /* Make the "Note: " prefix bold */
@@ -64,98 +44,52 @@ table th{
.note::before {
content: "Note";
- color: #007bff;
+ color: var(--mui-palette-note-main);;
}
.note {
- border-left-color: #007bff;
-}
-@media (prefers-color-scheme: dark) {
- .note::before {
- color: #4a9eff;
- }
- .note {
- border-left-color: #4a9eff;
- }
+ border-left-color: var(--mui-palette-note-main);
}
+
.example::before{
/* content: "Example"; */
- color: #17a2b8;
+ color: #000405;
}
.example {
- border-left-color: #17a2b8;
-}
-@media (prefers-color-scheme: dark) {
- .example::before {
- color: #9de1fe;
- }
- .example {
- border-left-color: #9de1fe;
- }
+ border-left-color: var(--mui-palette-example-main);
}
.warning::before{
content: "Warning";
- color: #ffc107;
+ color: var(--mui-palette-warning-main);
}
.warning {
- border-left-color: #ffc107;
-}
-@media (prefers-color-scheme: dark) {
- .warning::before {
- color: #ffeeba;
- }
- .warning {
- border-left-color: #ffeeba;
- }
+ border-left-color: var(--mui-palette-warning-main);
}
.caution::before{
content: "Caution";
- color: #d39e00;
+ color: var(--mui-palette-caution-main);
}
.caution {
- border-left-color: #d39e00;
-}
-@media (prefers-color-scheme: dark) {
- .caution::before {
- color: #ffd966;
- }
- .caution {
- border-left-color: #ffd966;
- }
+ border-left-color: var(--mui-palette-caution-main);
}
.important::before{
content: "Important";
- color: #dc3545;
+ color: var(--mui-palette-important-main);
}
.important {
- border-left-color: #dc3545;
-}
-@media (prefers-color-scheme: dark) {
- .important::before {
- color: #f5c6cb;
- }
- .important {
- border-left-color: #f5c6cb;
- }
+ border-left-color: var(--mui-palette-important-main);
}
+
.tip::before{
content: "Tip";
- color: #28a745;
+ color: var(--mui-palette-tip-main);
}
.tip {
- border-left-color: #28a745;
-}
-@media (prefers-color-scheme: dark) {
- .tip::before {
- color: #73c476;
- }
- .tip {
- border-left-color: #73c476;
- }
+ border-left-color: var(--mui-palette-tip-main);
}
@@ -189,25 +123,11 @@ mark.noogle-marker {
code {
- /* padding: 0.3rem; */
- background-color: #f0f1f2;
+ background-color: var(--mui-palette-code-bg);
}
pre {
- /* padding: 0.3rem; */
- background-color: #f0f1f2;
+ background-color: var(--mui-palette-code-bg);
}
code.hljs {
- background-color: #f0f1f2;
-}
-
-@media (prefers-color-scheme: dark) {
- code {
- background-color: #0d1117;
- }
- pre {
- background-color: #0d1117;
- }
- code.hljs {
- background-color: #0d1117;
- }
-}
\ No newline at end of file
+ background-color: var(--mui-palette-code-dark);
+}
\ No newline at end of file
diff --git a/website/src/styles/theme/common.ts b/website/src/styles/theme/common.ts
index 06a8dc6..65d5728 100644
--- a/website/src/styles/theme/common.ts
+++ b/website/src/styles/theme/common.ts
@@ -1,6 +1,6 @@
-import { ThemeOptions } from "@mui/material/styles";
+import { CssVarsThemeOptions } from "@mui/material";
-const commonOptions: Partial = {
+const commonOptions: Partial = {
typography: {
fontFamily: "inherit",
h1: {
diff --git a/website/src/styles/theme/darkThemeOptions.ts b/website/src/styles/theme/darkThemeOptions.ts
deleted file mode 100644
index 4dfd789..0000000
--- a/website/src/styles/theme/darkThemeOptions.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ThemeOptions } from "@mui/material/styles";
-import { commonOptions } from "./common";
-
-const darkThemeOptions: ThemeOptions = {
- ...commonOptions,
- palette: {
- mode: "dark",
- background: {
- // default: "#0f192c",
- default: "#1b1d22",
- paper: "#17181c",
- },
- primary: {
- main: "#6586c8",
- },
- secondary: {
- main: "#40224e",
- },
- },
-};
-
-export { darkThemeOptions };
diff --git a/website/src/styles/theme/index.tsx b/website/src/styles/theme/index.tsx
index 3bab30d..f85456c 100644
--- a/website/src/styles/theme/index.tsx
+++ b/website/src/styles/theme/index.tsx
@@ -1,2 +1 @@
-export { lightThemeOptions } from "./lightThemeOptions";
-export { darkThemeOptions } from "./darkThemeOptions";
+export { cssThemeOptions } from "./themeOptions";
diff --git a/website/src/styles/theme/lightThemeOptions.ts b/website/src/styles/theme/lightThemeOptions.ts
deleted file mode 100644
index 7d119b3..0000000
--- a/website/src/styles/theme/lightThemeOptions.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { ThemeOptions } from "@mui/material/styles";
-import { commonOptions } from "./common";
-const lightThemeOptions: ThemeOptions = {
- ...commonOptions,
- palette: {
- mode: "light",
- primary: {
- main: "#6586c8",
- },
- secondary: {
- main: "#6ad541",
- },
- background: {
- paper: "#fafafa",
- default: "#f0f1f2",
- },
- },
-};
-
-export { lightThemeOptions };
diff --git a/website/src/styles/theme/themeOptions.ts b/website/src/styles/theme/themeOptions.ts
new file mode 100644
index 0000000..26ef887
--- /dev/null
+++ b/website/src/styles/theme/themeOptions.ts
@@ -0,0 +1,125 @@
+import { CssVarsThemeOptions } from "@mui/material/styles";
+import { commonOptions } from "./common";
+import type {} from "@mui/material/themeCssVarsAugmentation";
+
+const cssThemeOptions: CssVarsThemeOptions = {
+ ...commonOptions,
+ colorSchemes: {
+ light: {
+ palette: {
+ mode: "light",
+ primary: {
+ main: "#6586c8",
+ },
+ secondary: {
+ main: "#6ad541",
+ },
+ background: {
+ paper: "#fafafa",
+ default: "#f0f1f2",
+ },
+ // @ts-expect-error
+ header: {
+ default: "var(--mui-palette-primary-main)",
+ },
+
+ code: {
+ bg: "#f0f1f2",
+ dark: "#0d1117",
+ },
+
+ fenced: {
+ bg: "#f9f9f9",
+ },
+
+ example: {
+ main: "#17a2b8",
+ },
+
+ warning: {
+ main: "#ffc107",
+ },
+
+ caution: {
+ main: "#d39e00",
+ },
+
+ important: {
+ main: "#dc3545",
+ },
+
+ tip: {
+ main: "#28a745",
+ },
+
+ note: {
+ main: "#007bff",
+ },
+
+ misc: {
+ a: "var(--mui-palette-primary-main)",
+ tableBorder: "#d8e2ff",
+ },
+ },
+ },
+ dark: {
+ palette: {
+ mode: "dark",
+ background: {
+ // default: "#0f192c",
+ default: "#1b1d22",
+ paper: "#17181c",
+ },
+ primary: {
+ main: "#6586c8",
+ },
+ secondary: {
+ main: "#40224e",
+ },
+ // @ts-expect-error
+ header: {
+ default: "#101010",
+ },
+
+ code: {
+ bg: "#0d1117",
+ dark: "#0d1117",
+ },
+
+ fenced: {
+ bg: "#2c2c2c",
+ },
+
+ example: {
+ main: "#9de1fe",
+ },
+
+ warning: {
+ main: "#ffeeba",
+ },
+
+ caution: {
+ main: "#ffd966",
+ },
+ important: {
+ main: "#f5c6cb",
+ },
+
+ tip: {
+ main: "#73c476",
+ },
+
+ note: {
+ main: "#4a9eff",
+ },
+
+ misc: {
+ a: "#adc6ff",
+ tableBorder: "#0f448e",
+ },
+ },
+ },
+ },
+};
+
+export { cssThemeOptions };