Skip to content

Commit 087e256

Browse files
staticostatico
committed
Add dark mode toggle
1 parent 271d90a commit 087e256

File tree

3 files changed

+99
-74
lines changed

3 files changed

+99
-74
lines changed

‎lib/theme.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import { extendTheme } from "@chakra-ui/react";
22
import { mode } from "@chakra-ui/theme-tools";
33

44
const theme = extendTheme({
5+
initialColorMode: "system",
6+
useSystemColorMode: true,
7+
58
styles: {
69
global: (props: any) => ({
710
body: {

‎pages/_document.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ class MyDocument extends Document {
4646
<meta name="twitter:image" content={image.url} />
4747
</Head>
4848
<body>
49-
<ColorModeScript />
49+
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
5050
<Main />
5151
<NextScript />
5252
</body>

‎pages/index.tsx‎

Lines changed: 95 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import {
22
Box,
3+
Button,
34
Heading,
45
Icon,
56
Link,
67
SimpleGrid,
78
Stack,
89
Text,
10+
useColorMode,
911
} from "@chakra-ui/react";
1012
import Card from "components/Card";
1113
import FilterBar from "components/FilterBar";
@@ -15,7 +17,7 @@ import Head from "next/head";
1517
import Script from "next/script";
1618
import GithubCorner from "react-github-corner";
1719
import { DateTime } from "luxon";
18-
import { FaExternalLinkAlt } from "react-icons/fa";
20+
import { FaExternalLinkAlt, FaMoon, FaSun } from "react-icons/fa";
1921

2022
type PageProps = {
2123
items: LibraryInfo[];
@@ -31,80 +33,100 @@ export const getStaticProps: GetStaticProps = async () => {
3133
};
3234
};
3335

34-
const Page: NextPage<PageProps> = ({ items, ts }) => (
35-
<>
36-
<Head>
37-
<title>
38-
jsgrids - Spreadsheet and data grid libraries for JavaScript
39-
</title>
40-
<Script
41-
src="https://s.langworth.com/script.js"
42-
data-token="575bca33"
43-
defer
44-
></Script>
45-
</Head>
36+
const Page: NextPage<PageProps> = ({ items, ts }) => {
37+
const { colorMode, toggleColorMode } = useColorMode();
38+
return (
39+
<>
40+
<Head>
41+
<title>
42+
jsgrids - Spreadsheet and data grid libraries for JavaScript
43+
</title>
44+
<Script
45+
src="https://s.langworth.com/script.js"
46+
data-token="575bca33"
47+
defer
48+
></Script>
49+
</Head>
4650

47-
<Box
48-
as="header"
49-
color="white"
50-
p={8}
51-
textAlign="center"
52-
// Generated with https://www.heropatterns.com/
53-
style={{
54-
backgroundColor: "#3182ce",
55-
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%2363B3ED' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
56-
}}
57-
>
58-
<GithubCorner
59-
href="https://github.com/statico/jsgrids"
60-
bannerColor="#fff"
61-
octoColor="#3182ce"
62-
/>
63-
<Stack>
64-
<Heading as="h1" size="2xl">
65-
jsgrids.statico.io
66-
</Heading>
67-
<Heading as="h2" size="lg" fontWeight="normal">
68-
A List of JavaScript Spreadsheet and Data Grid Libraries
69-
</Heading>
70-
<Text size="md" fontWeight="normal" suppressHydrationWarning>
71-
Last Update: {DateTime.fromISO(ts).toLocaleString(DateTime.DATE_MED)}{" "}
72-
-{" "}
73-
<Link href="https://github.com/statico/jsgrids#contributing">
74-
Contributions welcome! <Icon as={FaExternalLinkAlt} boxSize={3} />
75-
</Link>
76-
</Text>
77-
</Stack>
78-
</Box>
51+
<Box
52+
as="header"
53+
color="white"
54+
p={8}
55+
textAlign="center"
56+
// Generated with https://www.heropatterns.com/
57+
style={{
58+
backgroundColor: "#3182ce",
59+
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%2363B3ED' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
60+
}}
61+
>
62+
<Button
63+
p={1}
64+
onClick={toggleColorMode}
65+
background="transparent"
66+
position="absolute"
67+
top={2}
68+
left={2}
69+
color="white"
70+
title={`Set color mode to ${
71+
colorMode === "light" ? "dark" : "light"
72+
}`}
73+
aria-label={`Set color mode to ${
74+
colorMode === "light" ? "dark" : "light"
75+
}`}
76+
>
77+
{colorMode === "light" ? <FaMoon /> : <FaSun />}
78+
</Button>
79+
<GithubCorner
80+
href="https://github.com/statico/jsgrids"
81+
bannerColor="#fff"
82+
octoColor="#3182ce"
83+
/>
84+
<Stack>
85+
<Heading as="h1" size="2xl">
86+
jsgrids.statico.io
87+
</Heading>
88+
<Heading as="h2" size="lg" fontWeight="normal">
89+
A List of JavaScript Spreadsheet and Data Grid Libraries
90+
</Heading>
91+
<Text size="md" fontWeight="normal" suppressHydrationWarning>
92+
Last Update:{" "}
93+
{DateTime.fromISO(ts).toLocaleString(DateTime.DATE_MED)} -{" "}
94+
<Link href="https://github.com/statico/jsgrids#contributing">
95+
Contributions welcome! <Icon as={FaExternalLinkAlt} boxSize={3} />
96+
</Link>
97+
</Text>
98+
</Stack>
99+
</Box>
79100

80-
<FilterBar items={items}>
81-
{(filteredItems, filterBar) => (
82-
<Box px={6}>
83-
<Box>{filterBar}</Box>
84-
<SimpleGrid columns={[1, null, null, 2, 3]} as="main" spacing={8}>
85-
{filteredItems.map((item) => (
86-
<Card key={item.id} info={item} />
87-
))}
88-
</SimpleGrid>
89-
</Box>
90-
)}
91-
</FilterBar>
101+
<FilterBar items={items}>
102+
{(filteredItems, filterBar) => (
103+
<Box px={6}>
104+
<Box>{filterBar}</Box>
105+
<SimpleGrid columns={[1, null, null, 2, 3]} as="main" spacing={8}>
106+
{filteredItems.map((item) => (
107+
<Card key={item.id} info={item} />
108+
))}
109+
</SimpleGrid>
110+
</Box>
111+
)}
112+
</FilterBar>
92113

93-
<Stack as="footer" p={10} color="gray.600" textAlign="center">
94-
<Link href="https://github.com/statico/jsgrids">
95-
Help improve this list on GitHub
96-
</Link>
97-
<Link href="https://nextjs.org/">Built with Next.js</Link>
98-
<Link href="https://vercel.com">Hosted on Vercel</Link>
99-
<Link href="http://www.heropatterns.com">
100-
Background from Hero Patterns
101-
</Link>
102-
<Link href="https://bundlephobia.com/">
103-
Package sizes from Bundlephobia
104-
</Link>
105-
<Link href="/list">View data as table</Link>
106-
</Stack>
107-
</>
108-
);
114+
<Stack as="footer" p={10} color="gray.600" textAlign="center">
115+
<Link href="https://github.com/statico/jsgrids">
116+
Help improve this list on GitHub
117+
</Link>
118+
<Link href="https://nextjs.org/">Built with Next.js</Link>
119+
<Link href="https://vercel.com">Hosted on Vercel</Link>
120+
<Link href="http://www.heropatterns.com">
121+
Background from Hero Patterns
122+
</Link>
123+
<Link href="https://bundlephobia.com/">
124+
Package sizes from Bundlephobia
125+
</Link>
126+
<Link href="/list">View data as table</Link>
127+
</Stack>
128+
</>
129+
);
130+
};
109131

110132
export default Page;

0 commit comments

Comments
 (0)