Skip to content

Commit

Permalink
Fix Switching between Dark and Light Mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@pratyush1712
pratyush1712 authored Oct 22, 2023
2 parents 4c89d16 + 50e5291 commit 1e64e56
Show file tree
Hide file tree
Showing 11 changed files with 193 additions and 83 deletions.
1 change: 1 addition & 0 deletions .prettierignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@ public/**.html
public/**.json
node_modules
venv
*.yaml
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
"format-check": "prettier --check ."
},
"dependencies": {
"@emotion/cache": "^11.11.0",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.14",
Expand Down
3 changes: 3 additions & 0 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/app/[slug]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import rehypeRaw from "rehype-raw";
import { readFileSync } from "fs";

// Markdown Format Imports
import { Container, TableBody, TableFooter, TableHead, TableRow } from "@mui/material";
import { Container, TableBody, TableFooter, TableHead, TableRow, Typography } from "@mui/material";
import { MarkdownH1, MarkdownH2, MarkdownCode, MarkdownImage, MarkdownLink, MarkdownList, MarkdownListItem } from "@/lib/markdown";
import { MarkdownParagraph, MarkdownStrong, MarkdownTable, MarkdownTableCell } from "@/lib/markdown";

Expand Down
2 changes: 1 addition & 1 deletion src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
<html lang="en">
<body className={inter.className}>
<GoogleAnalytics />
<VSCodeLayout>{children}</VSCodeLayout>
<VSCodeLayout options={{ key: "mui" }}>{children}</VSCodeLayout>
</body>
</html>
);
Expand Down
2 changes: 1 addition & 1 deletion src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export default function Home() {
direction="column"
alignItems="center"
justifyContent="center"
sx={{ minHeight: `calc(100vh)`, background: "#1E1F1F" }}
sx={{ minHeight: `calc(100vh)` }}
>
<Grid item xs={3}>
<Stack direction={{ xs: "column", sm: "row-reverse" }} spacing={2}>
Expand Down
2 changes: 1 addition & 1 deletion src/components/AppButtons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ export default function AppButtons({
overflowY: "hidden",
whiteSpace: "nowrap",
minHeight: "32px",
backgroundColor: pages.length !== 0 ? (theme.palette.mode === "dark" ? "#252527" : "#f3f3f3") : "#1E1F1F",
backgroundColor: pages.length !== 0 ? (theme.palette.mode === "dark" ? "#252527" : "#f3f3f3") : "transparent",
"&::-webkit-scrollbar": {
height: "3px"
// backgroundColor: 'red',
Expand Down
5 changes: 4 additions & 1 deletion src/components/AppTree.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,10 @@ export default function AppTree({
<span style={{ textDecoration: "none", color: "inherit" }}>Home</span>
</Link>
}
color="#bdc3cf"
sx={{
color: renderTreeItemColor(-2),
backgroundColor: renderTreeItemBgColor(-2)
}}
onClick={() => {
setSelectedIndex(-1);
}}
Expand Down
22 changes: 18 additions & 4 deletions src/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export default function Footer() {
}}
>
<IoIosGitBranch fontSize="0.9rem" />
<Typography sx={{ ml: 0.5, mt: 0.1, fontSize: "0.6rem" }}>master</Typography>
<Typography sx={{ ml: 0.5, mt: 0.1, fontSize: "0.6rem", color: "white" }}>master</Typography>
</Box>

<Stack
Expand Down Expand Up @@ -69,7 +69,14 @@ export default function Footer() {
pt: 0.3
}}
>
<Typography sx={{ fontSize: "0.6rem" }}>0</Typography>
<Typography
sx={{
fontSize: "0.6rem",
color: "white"
}}
>
0
</Typography>
</Box>

<Box
Expand All @@ -90,7 +97,14 @@ export default function Footer() {
pt: 0.3
}}
>
<Typography sx={{ fontSize: "0.6rem" }}>0</Typography>
<Typography
sx={{
fontSize: "0.6rem",
color: "white"
}}
>
0
</Typography>
</Box>
</Stack>
</Stack>
Expand All @@ -115,7 +129,7 @@ export default function Footer() {
}}
>
<VscCheck fontSize="0.9rem" />
<Typography sx={{ ml: 0.5, mt: 0.1, fontSize: "0.6rem" }}>Prettier</Typography>
<Typography sx={{ ml: 0.5, mt: 0.1, fontSize: "0.6rem", color: "white" }}>Prettier</Typography>
</Box>

<Box
Expand Down
224 changes: 159 additions & 65 deletions src/components/Layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@ import AppTree from "./AppTree";
import Footer from "./Footer";
import Sidebar from "./Sidebar";
import pages, { routeToPage } from "@/lib/pages";
import { useParams, usePathname, useRouter } from "next/navigation";
import { useParams, useRouter } from "next/navigation";
import createCache from "@emotion/cache";
import { useServerInsertedHTML } from "next/navigation";
import { CacheProvider } from "@emotion/react";

interface Page {
index: number;
Expand All @@ -24,30 +27,78 @@ function initVisiblePageIndexs(pages: Page[]) {
return tabs;
}

export default function VSCodeLayout({ children }: { children: React.ReactNode }) {
interface VSCodeLayoutProps {
options: any;
children: React.ReactNode;
}

export default function VSCodeLayout({ options, children }: VSCodeLayoutProps) {
const [expanded, setExpanded] = useState(isBrowser);
const [selectedIndex, setSelectedIndex] = useState(-1);
const [currentComponent, setCurrentComponent] = useState("");
const [visiblePageIndexs, setVisiblePageIndexs] = useState(initVisiblePageIndexs(pages));
const [darkMode, setDarkMode] = useState(true);
const [visiblePages, setVisiblePages] = useState(pages);
const paletteType = darkMode ? "dark" : "light";
const router = useRouter();
const params = useParams();
const theme = createTheme({
palette: {
mode: paletteType,
background: { default: paletteType === "light" ? "#FFFFFF" : "#1e1e1e" }
mode: darkMode ? "dark" : "light",
background: { default: !darkMode ? "#FFFFFF" : "#1e1e1e" },
primary: { main: !darkMode ? "#007acc" : "#0e639c" },
secondary: { main: !darkMode ? "#007acc" : "#0e639c" }
},
components: {
MuiCssBaseline: { styleOverrides: { body: paletteType === "dark" ? darkScrollbar() : null } },
MuiDivider: { styleOverrides: { root: { borderColor: "rgba(255, 255, 255, 0.12)" } } }
MuiCssBaseline: { styleOverrides: { body: darkMode ? darkScrollbar() : null } },
MuiDivider: {
styleOverrides: { root: { borderColor: darkMode ? "rgba(255, 255, 255, 0.12)" : "rgba(0,0,0,0.12)" } }
},
MuiPaper: { styleOverrides: { root: { backgroundColor: !darkMode ? "#FFFFFF" : "#1e1e1e" } } },
MuiContainer: { styleOverrides: { root: { backgroundColor: !darkMode ? "#FFFFFF" : "#1e1e1e" } } },
MuiButton: {
styleOverrides: {
root: {
color: !darkMode ? "#000000" : "#FFFFFF",
backgroundColor: !darkMode ? "#FFFFFF" : "#1e1e1e",
"&:hover": { backgroundColor: !darkMode ? "#FFFFFF" : "#1e1e1e" }
}
}
},
MuiIconButton: {
styleOverrides: {
root: {
color: !darkMode ? "#000000" : "#FFFFFF",
backgroundColor: !darkMode ? "#FFFFFF" : "#1e1e1e",
"&:hover": { backgroundColor: !darkMode ? "#FFFFFF" : "#1e1e1e" }
}
}
},
MuiTabs: {
styleOverrides: {
root: {
backgroundColor: !darkMode ? "#FFFFFF" : "#1e1e1e",
color: !darkMode ? "#000000" : "#FFFFFF"
}
}
},
MuiTab: {
styleOverrides: {
root: {
color: !darkMode ? "#000000" : "#FFFFFF",
"&:hover": { color: !darkMode ? "#000000" : "#FFFFFF" }
}
}
},
MuiTypography: {
styleOverrides: { root: { color: !darkMode ? "#000000" : "#FFFFFF" } }
}
}
});

function handleThemeChange() {
setDarkMode(!darkMode);
localStorage.setItem("theme", darkMode ? "light" : "dark");
theme.palette.mode = darkMode ? "dark" : "light";
localStorage.setItem("darkMode", JSON.stringify(!darkMode));
}

const deletedIndex: number | undefined = visiblePages.find(x => !visiblePageIndexs.includes(x.index))?.index;
Expand Down Expand Up @@ -78,79 +129,122 @@ export default function VSCodeLayout({ children }: { children: React.ReactNode }
useEffect(() => {
const index = routeToPage[params.slug as string]?.index;
index && setSelectedIndex(index);
setDarkMode(JSON.parse(localStorage.getItem("darkMode") || "true"));
}, []);

const [{ cache, flush }] = 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 (
<style
key={cache.key}
data-emotion={`${cache.key} ${names.join(" ")}`}
dangerouslySetInnerHTML={{
__html: styles
}}
/>
);
});

return (
<ThemeProvider theme={theme}>
<CssBaseline enableColorScheme />
<Container sx={{ m: 0, p: 0, overflowY: "hidden" }} maxWidth={false} disableGutters>
<Grid container sx={{ overflow: "auto", overflowY: "hidden" }}>
<Grid container sx={{ overflow: "auto" }}>
<Grid item sx={{ width: 50 }}>
<Sidebar
setExpanded={setExpanded}
expanded={expanded}
darkMode={darkMode}
handleThemeChange={handleThemeChange}
/>
</Grid>
{expanded && (
<Grid item sx={{ backgroundColor: darkMode ? "#252527" : "#f3f3f3", width: 220 }}>
<Stack sx={{ mt: 1 }}>
<Typography variant="caption" color="text.secondary" sx={{ ml: 4 }}>
EXPLORER
</Typography>
<AppTree
pages={pages}
<CacheProvider value={cache}>
<ThemeProvider theme={theme}>
<CssBaseline enableColorScheme />
<Container sx={{ m: 0, p: 0, overflowY: "hidden" }} maxWidth={false} disableGutters>
<Grid container sx={{ overflow: "auto", overflowY: "hidden" }}>
<Grid container sx={{ overflow: "auto" }}>
<Grid item sx={{ width: 50 }}>
<Sidebar
setExpanded={setExpanded}
expanded={expanded}
darkMode={darkMode}
handleThemeChange={handleThemeChange}
/>
</Grid>
{expanded && (
<Grid item sx={{ backgroundColor: darkMode ? "#252527" : "#f3f3f3", width: 220 }}>
<Stack sx={{ mt: 1 }}>
<Typography variant="caption" color="text.secondary" sx={{ ml: 4 }}>
EXPLORER
</Typography>
<AppTree
pages={pages}
selectedIndex={selectedIndex}
setSelectedIndex={setSelectedIndex}
currentComponent={currentComponent}
setCurrentComponent={setCurrentComponent}
visiblePageIndexs={visiblePageIndexs}
setVisiblePageIndexs={setVisiblePageIndexs}
/>
</Stack>
</Grid>
)}

<Grid item xs zeroMinWidth sx={{ width: "100%" }}>
<Grid item sx={{ height: "33px", mb: -0.2 }}>
<AppButtons
pages={visiblePages}
selectedIndex={selectedIndex}
setSelectedIndex={setSelectedIndex}
currentComponent={currentComponent}
setCurrentComponent={setCurrentComponent}
visiblePageIndexs={visiblePageIndexs}
setVisiblePageIndexs={setVisiblePageIndexs}
/>
</Stack>
</Grid>
)}

<Grid item xs zeroMinWidth sx={{ width: "100%" }}>
<Grid item sx={{ height: "33px", mb: -0.2 }}>
<AppButtons
pages={visiblePages}
selectedIndex={selectedIndex}
setSelectedIndex={setSelectedIndex}
currentComponent={currentComponent}
setCurrentComponent={setCurrentComponent}
visiblePageIndexs={visiblePageIndexs}
setVisiblePageIndexs={setVisiblePageIndexs}
/>
</Grid>
<Grid
sx={{
scrollBehavior: "smooth",
overflowY: "auto",
maxHeight: "calc(100vh - 53px)",
background: "#1E1F1F"
}}
>
<Container
</Grid>
<Grid
sx={{
minHeight: "calc(100vh - 53px)",
maxHeight: "calc(100vh - 53px)",
scrollBehavior: "smooth",
overflowY: "auto",
overflowX: "hidden"
maxHeight: "calc(100vh - 53px)",
background: !darkMode ? "#FFFFFF" : "#1e1e1e"
}}
>
{children}
</Container>
<Container
sx={{
minHeight: "calc(100vh - 53px)",
maxHeight: "calc(100vh - 53px)",
overflowY: "auto",
overflowX: "hidden"
}}
>
{children}
</Container>
</Grid>
</Grid>
</Grid>
<Grid item lg={12} md={12} sm={12} xs={12}>
<Footer />
</Grid>
</Grid>
<Grid item lg={12} md={12} sm={12} xs={12}>
<Footer />
</Grid>
</Grid>
</Container>
</ThemeProvider>
</Container>
</ThemeProvider>
</CacheProvider>
);
}
Loading

1 comment on commit 1e64e56

@vercel
Copy link

@vercel vercel bot commented on 1e64e56 Oct 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

personal-website – ./

personal-website-pratyush1712.vercel.app
pratyush-personal-website.vercel.app
personal-website-git-master-pratyush1712.vercel.app
pratyushsudhakar.com
www.pratyushsudhakar.com

Please sign in to comment.