Skip to content

Commit 877c357

Browse files
arghyaxcodesarghyaxcodes
authored
Merge pull request #67 from javaistic/next
Add Dark Mode
2 parents de71c0c + 9b9aaf2 commit 877c357

28 files changed

+272
-165
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
"intersection-observer": "^0.12.0",
4747
"minimatch": "^3.0.4",
4848
"next": "^12.0.7",
49+
"next-themes": "^0.0.15",
4950
"postcss": "^8.4.4",
5051
"postcss-focus-visible": "^5.0.0",
5152
"postcss-import": "^14.0.2",

‎remark/withSyntaxHighlighting.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ module.exports.withSyntaxHighlighting = () => {
1717
if (node.lang !== null) {
1818
node.type = 'html'
1919
node.value = [
20-
`<div class="my-6 rounded-lg overflow-hidden ${colors[node.meta] || 'bg-gray-800'}">`,
20+
`<div class="my-6 rounded-lg overflow-hidden ${colors[node.meta] || 'bg-gray-800 dark:bg-gray-700'}">`,
2121
`<pre class="language-${node.lang} ${
2222
colors[node.meta] ? 'bg-black bg-opacity-75' : ''
2323
}">`,

‎src/components/Community.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export function Community() {
22
return (
33
<ul className="grid sm:grid-cols-2 gap-4 xl:gap-4">
4-
<li className="bg-gray-100 hover:bg-gray-200 px-4 py-4 rounded-xl transition ease-in-out duration-200" >
4+
<li className="bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 px-4 py-4 rounded-xl transition ease-in-out duration-200" >
55
<a
66
href="https://github.com/javaistic/javaistic/discussions"
77
className="flex items-start space-x-4"
@@ -15,12 +15,12 @@ export function Community() {
1515
/>
1616
</svg>
1717
<div className="flex-auto">
18-
<h3 className="font-bold text-gray-900">GitHub Discussions</h3>
18+
<h3 className="font-bold text-gray-900 dark:text-white">GitHub Discussions</h3>
1919
<p>Connect with members of the Javaistic community.</p>
2020
</div>
2121
</a>
2222
</li>
23-
<li className="bg-gray-100 hover:bg-indigo-100 px-4 py-4 rounded-xl transition ease-in-out duration-200">
23+
<li className="bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 px-4 py-4 rounded-xl transition ease-in-out duration-200">
2424
<a href="/discord" className="flex items-start space-x-4">
2525
<svg fill="currentColor" className="flex-none text-indigo-400 w-12 h-12">
2626
<rect width="48" height="48" rx="12" />
@@ -36,12 +36,12 @@ export function Community() {
3636
/>
3737
</svg>
3838
<div className="flex-auto">
39-
<h3 className="font-bold text-gray-900">Discord</h3>
39+
<h3 className="font-bold text-gray-900 dark:text-white">Discord</h3>
4040
<p>Join our Discord group to chat with other Javaistic users.</p>
4141
</div>
4242
</a>
4343
</li>
44-
<li className="bg-gray-100 hover:bg-sky-100 px-4 py-4 rounded-xl transition ease-in-out duration-200">
44+
<li className="bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 px-4 py-4 rounded-xl transition ease-in-out duration-200">
4545
<a href="https://twitter.com/javaistic" className="flex items-start space-x-4">
4646
<svg fill="currentColor" className="flex-none text-sky-400 w-12 h-12">
4747
<rect width="48" height="48" rx="12" />
@@ -52,7 +52,7 @@ export function Community() {
5252
/>
5353
</svg>
5454
<div className="flex-auto">
55-
<h3 className="font-bold text-gray-900">Twitter</h3>
55+
<h3 className="font-bold text-gray-900 dark:text-white">Twitter</h3>
5656
<p>Follow the Javaistic Twitter account for news and updates.</p>
5757
</div>
5858
</a>

‎src/components/Header.js‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@ import { Search } from '@/components/Search'
33
import clsx from 'clsx'
44
import Link from 'next/link'
55
import Router from 'next/router'
6+
import ThemeChanger from './ThemeChanger'
7+
68

79
export function Header({ navIsOpen, onNavToggle }) {
810
return (
911
<>
10-
<div className="sticky top-0 z-40 lg:z-50 w-full max-w-8xl mx-auto bg-white flex-none flex border-b border-gray-200">
11-
<div className="flex-none pl-4 sm:pl-6 xl:pl-8 flex items-center border-b border-gray-200 lg:border-b-0 lg:w-60 xl:w-72">
12+
<div className="sticky top-0 z-40 lg:z-50 w-full max-w-8xl mx-auto bg-white dark:bg-gray-900 flex-none flex border-b border-gray-200 dark:border-gray-700">
13+
<div className="flex-none pl-4 sm:pl-6 xl:pl-8 flex items-center border-b border-gray-200 dark:border-gray-700 lg:border-b-0 lg:w-60 xl:w-72">
1214
<Link href="/">
1315
<a
1416
className="overflow-hidden w-10 md:w-auto"
@@ -18,16 +20,17 @@ export function Header({ navIsOpen, onNavToggle }) {
1820
}}
1921
>
2022
<span className="sr-only">Javaistic home page</span>
21-
<Logo className="w-auto h-10" />
23+
<Logo className="w-auto h-10 text-black dark:text-white" />
2224
</a>
2325
</Link>
2426
</div>
2527
<div className="flex-auto h-18 flex items-center justify-between px-4 sm:px-6 lg:mx-6 lg:px-0 xl:mx-8">
2628
<Search />
2729
<div className="lg:w-64 pl-8 flex-shrink-0 flex items-center justify-end space-x-6">
30+
<ThemeChanger />
2831
<a
2932
href="https://github.com/javaistic/javaistic"
30-
className="text-gray-400 hover:text-gray-500 transition-colors duration-200"
33+
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors duration-200"
3134
>
3235
<span className="sr-only">Javaistic on GitHub</span>
3336
<svg className="w-6 h-6" viewBox="0 0 16 16" fill="currentColor">
@@ -42,7 +45,7 @@ export function Header({ navIsOpen, onNavToggle }) {
4245
</div>
4346
<button
4447
type="button"
45-
className="fixed z-50 bottom-4 right-4 w-16 h-16 rounded-full bg-gray-900 text-white block lg:hidden"
48+
className="fixed z-50 bottom-4 right-4 w-16 h-16 rounded-full bg-gray-900 dark:bg-gray-700 text-white block lg:hidden"
4649
onClick={() => onNavToggle(!navIsOpen)}
4750
>
4851
<span className="sr-only">Open site navigation</span>

‎src/components/Logo.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/PageHeader.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export function PageHeader({ title, description, badge = {}, border = true }) {
44
if (!title && !description) return null
55

66
return (
7-
<div className={clsx('pb-10', { 'border-b border-gray-200 mb-10': border })}>
7+
<div className={clsx('pb-10', { 'border-b border-gray-200 dark:border-gray-700 mb-10': border })}>
88
<div>
99
<h1 className="inline-block text-3xl font-extrabold text-gray-900 tracking-tight">
1010
{title}

‎src/components/Search.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export function Search() {
6868
type="button"
6969
ref={searchButtonRef}
7070
onClick={onOpen}
71-
className="group leading-6 font-medium flex items-center space-x-3 sm:space-x-4 bg-gray-100 hover:text-gray-600 transition-colors duration-200 w-full py-1.5 px-1.5 sm:px-4 lg:px-4 rounded-lg border-2 border-gray-200"
71+
className="group leading-6 font-medium flex items-center space-x-3 sm:space-x-4 text-gray-500 bg-gray-100 hover:text-gray-600 dark:bg-gray-800 dark:text-gray-400 transition ease-in-out duration-200 w-full py-1.5 px-1.5 sm:px-4 lg:px-4 rounded-lg border-2 border-gray-200 dark:border-gray-600"
7272
>
7373
<svg
7474
width="24"
@@ -85,7 +85,7 @@ export function Search() {
8585
/>
8686
</svg>
8787
<span>
88-
<span className="lg:hidden md:hidden">Search</span><span className="hidden sm:inline">Quick search for anything</span>
88+
<span className="lg:hidden md:hidden">Search</span><span className="hidden sm:inline">Quick search for anything</span>
8989
</span>
9090
<span
9191
style={{ opacity: browserDetected ? '1' : '0' }}

‎src/components/Testimonials.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ function Testimonial({ testimonial, base, index, total }) {
113113
<path d="M13.415.001C6.07 5.185.887 13.681.887 23.041c0 7.632 4.608 12.096 9.936 12.096 5.04 0 8.784-4.032 8.784-8.784 0-4.752-3.312-8.208-7.632-8.208-.864 0-2.016.144-2.304.288.72-4.896 5.328-10.656 9.936-13.536L13.415.001zm24.768 0c-7.2 5.184-12.384 13.68-12.384 23.04 0 7.632 4.608 12.096 9.936 12.096 4.896 0 8.784-4.032 8.784-8.784 0-4.752-3.456-8.208-7.776-8.208-.864 0-1.872.144-2.16.288.72-4.896 5.184-10.656 9.792-13.536L38.183.001z" />
114114
</svg>
115115
{typeof testimonial.content === 'string' ? (
116-
<p>{testimonial.content}</p>
116+
<p className="text-gray-900 dark:text-gray-900" >{testimonial.content}</p>
117117
) : (
118118
testimonial.content
119119
)}
@@ -183,7 +183,7 @@ export function Testimonials() {
183183
onMouseLeave={() => setDuration(150)}
184184
>
185185
<div
186-
className="absolute right-0 bottom-1/2 left-0 bg-gradient-to-t from-gray-100 pointer-events-none"
186+
className="absolute right-0 bottom-1/2 left-0 bg-gradient-to-t from-gray-100 dark:from-gray-800 pointer-events-none"
187187
style={{ height: 607, maxHeight: '50vh' }}
188188
/>
189189
<div className="flex overflow-hidden -my-8">

‎src/components/ThemeChanger.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
// ./components/ThemeChanger.js
2+
import { useEffect, useState } from 'react';
3+
import { useTheme } from 'next-themes';
4+
import { MoonIcon, SunIcon } from '@heroicons/react/outline';
5+
6+
7+
export default function ThemeChanger() {
8+
const { systemTheme, theme, setTheme } = useTheme();
9+
const [mounted, setMounted] = useState(false);
10+
11+
useEffect(() => {
12+
setMounted(true);
13+
}, []);
14+
15+
const renderThemeChanger = () => {
16+
17+
if (!mounted) return null;
18+
19+
const currentTheme = theme === 'system' ? systemTheme : theme;
20+
if (currentTheme === 'light') {
21+
return (<MoonIcon
22+
className="h-6 w-6"
23+
color="#111827"
24+
role="button"
25+
onClick={() => setTheme('dark')}
26+
/>
27+
);
28+
}
29+
else {
30+
return (<SunIcon
31+
className="h-6 w-6"
32+
color="white"
33+
role="button"
34+
onClick={() => setTheme('light')}
35+
/>
36+
);
37+
}
38+
}
39+
40+
return (
41+
<div className="flex items-center justify-center p-1.5 bg-gray-50 dark:bg-gray-700 border-2 border-gray-300 dark:border-gray-500 rounded-md transition-all ease-in-out duration-300 ">
42+
{renderThemeChanger()}
43+
</div>
44+
);
45+
}

‎src/components/Tip.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export function TipCompat({ children }) {
4141

4242
export function TipInfo({ children }) {
4343
return (
44-
<div className="text-sm leading-6 bg-blue-50 text-blue-800 px-6 py-4 mb-8 rounded-lg">
44+
<div className="text-sm leading-6 bg-blue-50 dark:bg-blue-600 text-blue-800 px-6 py-4 mb-8 rounded-lg">
4545
<div className="flex items-start space-x-3">
4646
<svg width="40" height="40" className="text-sky-500" fill="none">
4747
<path

0 commit comments

Comments
 (0)