javaistic · arghyaxcodes · Dec 10, 2021 · Dec 9, 2021 · Dec 9, 2021 · Dec 9, 2021
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
     "intersection-observer": "^0.12.0",
     "minimatch": "^3.0.4",
     "next": "^12.0.7",
+    "next-themes": "^0.0.15",
     "postcss": "^8.4.4",
     "postcss-focus-visible": "^5.0.0",
     "postcss-import": "^14.0.2",

diff --git a/remark/withSyntaxHighlighting.js b/remark/withSyntaxHighlighting.js
@@ -17,7 +17,7 @@ module.exports.withSyntaxHighlighting = () => {
       if (node.lang !== null) {
         node.type = 'html'
         node.value = [
-          `<div class="my-6 rounded-lg overflow-hidden ${colors[node.meta] || 'bg-gray-800'}">`,
+          `<div class="my-6 rounded-lg overflow-hidden ${colors[node.meta] || 'bg-gray-800 dark:bg-gray-700'}">`,
           `<pre class="language-${node.lang} ${
             colors[node.meta] ? 'bg-black bg-opacity-75' : ''
           }">`,

diff --git a/src/components/Community.js b/src/components/Community.js
@@ -1,7 +1,7 @@
 export function Community() {
   return (
     <ul className="grid sm:grid-cols-2 gap-4 xl:gap-4">
-      <li className="bg-gray-100 hover:bg-gray-200 px-4 py-4 rounded-xl transition ease-in-out duration-200" >
+      <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" >
         <a
           href="https://github.com/javaistic/javaistic/discussions"
           className="flex items-start space-x-4"
@@ -15,12 +15,12 @@ export function Community() {
             />
           </svg>
           <div className="flex-auto">
-            <h3 className="font-bold text-gray-900">GitHub Discussions</h3>
+            <h3 className="font-bold text-gray-900 dark:text-white">GitHub Discussions</h3>
             <p>Connect with members of the Javaistic community.</p>
           </div>
         </a>
       </li>
-      <li className="bg-gray-100 hover:bg-indigo-100 px-4 py-4 rounded-xl transition ease-in-out duration-200">
+      <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">
         <a href="/discord" className="flex items-start space-x-4">
           <svg fill="currentColor" className="flex-none text-indigo-400 w-12 h-12">
             <rect width="48" height="48" rx="12" />
@@ -36,12 +36,12 @@ export function Community() {
             />
           </svg>
           <div className="flex-auto">
-            <h3 className="font-bold text-gray-900">Discord</h3>
+            <h3 className="font-bold text-gray-900 dark:text-white">Discord</h3>
             <p>Join our Discord group to chat with other Javaistic users.</p>
           </div>
         </a>
       </li>
-      <li className="bg-gray-100 hover:bg-sky-100 px-4 py-4 rounded-xl transition ease-in-out duration-200">
+      <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">
         <a href="https://twitter.com/javaistic" className="flex items-start space-x-4">
           <svg fill="currentColor" className="flex-none text-sky-400 w-12 h-12">
             <rect width="48" height="48" rx="12" />
@@ -52,7 +52,7 @@ export function Community() {
             />
           </svg>
           <div className="flex-auto">
-            <h3 className="font-bold text-gray-900">Twitter</h3>
+            <h3 className="font-bold text-gray-900 dark:text-white">Twitter</h3>
             <p>Follow the Javaistic Twitter account for news and updates.</p>
           </div>
         </a>

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -3,12 +3,14 @@ import { Search } from '@/components/Search'
 import clsx from 'clsx'
 import Link from 'next/link'
 import Router from 'next/router'
+import ThemeChanger from './ThemeChanger'
+
 
 export function Header({ navIsOpen, onNavToggle }) {
   return (
     <>
-      <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">
-        <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">
+      <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">
+        <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">
           <Link href="/">
             <a
               className="overflow-hidden w-10 md:w-auto"
@@ -18,16 +20,17 @@ export function Header({ navIsOpen, onNavToggle }) {
               }}
             >
               <span className="sr-only">Javaistic home page</span>
-              <Logo className="w-auto h-10" />
+              <Logo className="w-auto h-10 text-black dark:text-white" />
             </a>
           </Link>
         </div>
         <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">
           <Search />
           <div className="lg:w-64 pl-8 flex-shrink-0 flex items-center justify-end space-x-6">
+            <ThemeChanger />
             <a
               href="https://github.com/javaistic/javaistic"
-              className="text-gray-400 hover:text-gray-500 transition-colors duration-200"
+              className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors duration-200"
             >
               <span className="sr-only">Javaistic on GitHub</span>
               <svg className="w-6 h-6" viewBox="0 0 16 16" fill="currentColor">
@@ -42,7 +45,7 @@ export function Header({ navIsOpen, onNavToggle }) {
       </div>
       <button
         type="button"
-        className="fixed z-50 bottom-4 right-4 w-16 h-16 rounded-full bg-gray-900 text-white block lg:hidden"
+        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"
         onClick={() => onNavToggle(!navIsOpen)}
       >
         <span className="sr-only">Open site navigation</span>

diff --git a/src/components/Logo.js b/src/components/Logo.js
diff --git a/src/components/PageHeader.js b/src/components/PageHeader.js
@@ -4,7 +4,7 @@ export function PageHeader({ title, description, badge = {}, border = true }) {
   if (!title && !description) return null
 
   return (
-    <div className={clsx('pb-10', { 'border-b border-gray-200 mb-10': border })}>
+    <div className={clsx('pb-10', { 'border-b border-gray-200 dark:border-gray-700 mb-10': border })}>
       <div>
         <h1 className="inline-block text-3xl font-extrabold text-gray-900 tracking-tight">
           {title}

diff --git a/src/components/Search.js b/src/components/Search.js
@@ -68,7 +68,7 @@ export function Search() {
         type="button"
         ref={searchButtonRef}
         onClick={onOpen}
-        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"
+        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"
       >
         <svg
           width="24"
@@ -85,7 +85,7 @@ export function Search() {
           />
         </svg>
         <span>
-        <span className="lg:hidden md:hidden">Search</span><span className="hidden sm:inline">Quick search for anything</span>
+          <span className="lg:hidden md:hidden">Search</span><span className="hidden sm:inline">Quick search for anything</span>
         </span>
         <span
           style={{ opacity: browserDetected ? '1' : '0' }}

diff --git a/src/components/Testimonials.js b/src/components/Testimonials.js
@@ -113,7 +113,7 @@ function Testimonial({ testimonial, base, index, total }) {
             <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" />
           </svg>
           {typeof testimonial.content === 'string' ? (
-            <p>{testimonial.content}</p>
+            <p className="text-gray-900 dark:text-gray-900" >{testimonial.content}</p>
           ) : (
             testimonial.content
           )}
@@ -183,7 +183,7 @@ export function Testimonials() {
       onMouseLeave={() => setDuration(150)}
     >
       <div
-        className="absolute right-0 bottom-1/2 left-0 bg-gradient-to-t from-gray-100 pointer-events-none"
+        className="absolute right-0 bottom-1/2 left-0 bg-gradient-to-t from-gray-100 dark:from-gray-800 pointer-events-none"
         style={{ height: 607, maxHeight: '50vh' }}
       />
       <div className="flex overflow-hidden -my-8">

diff --git a/src/components/ThemeChanger.js b/src/components/ThemeChanger.js
@@ -0,0 +1,45 @@
+// ./components/ThemeChanger.js
+import { useEffect, useState } from 'react';
+import { useTheme } from 'next-themes';
+import { MoonIcon, SunIcon } from '@heroicons/react/outline';
+
+
+export default function ThemeChanger() {
+    const { systemTheme, theme, setTheme } = useTheme();
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    const renderThemeChanger = () => {
+
+        if (!mounted) return null;
+
+        const currentTheme = theme === 'system' ? systemTheme : theme;
+        if (currentTheme === 'light') {
+            return (<MoonIcon
+                className="h-6 w-6"
+                color="#111827"
+                role="button"
+                onClick={() => setTheme('dark')}
+            />
+            );
+        }
+        else {
+            return (<SunIcon
+                className="h-6 w-6"
+                color="white"
+                role="button"
+                onClick={() => setTheme('light')}
+            />
+            );
+        }
+    }
+
+    return (
+        <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 ">
+            {renderThemeChanger()}
+        </div>
+    );
+}
diff --git a/src/components/Tip.js b/src/components/Tip.js
@@ -41,7 +41,7 @@ export function TipCompat({ children }) {
 
 export function TipInfo({ children }) {
   return (
-    <div className="text-sm leading-6 bg-blue-50 text-blue-800 px-6 py-4 mb-8 rounded-lg">
+    <div className="text-sm leading-6 bg-blue-50 dark:bg-blue-600 text-blue-800 px-6 py-4 mb-8 rounded-lg">
       <div className="flex items-start space-x-3">
         <svg width="40" height="40" className="text-sky-500" fill="none">
           <path

diff --git a/src/components/Vercel.js b/src/components/Vercel.js
@@ -2,7 +2,7 @@ export function Vercel(props) {
   return (
     <svg viewBox="0 0 283 64" {...props}>
       <path
-        fill="black"
+        fill="currentColor"
         d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z"
       />
     </svg>

diff --git a/src/components/home/Footer.js b/src/components/home/Footer.js
@@ -41,7 +41,7 @@ const footerNav = {
     className: 'row-span-2',
     items: programsNav['Getting started'],
   },
-  Javaistic: {
+  Product: {
     className: 'row-span-2',
     items: [
       { title: 'Home', href: '/' },
@@ -72,21 +72,21 @@ const footerNav = {
 
 export function Footer() {
   return (
-    <footer className="bg-gray-100 pt-16 pb-10 sm:pt-20 md:pt-24 xl:pt-28 sm:pb-10">
-      <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto divide-y divide-gray-200 px-4 sm:px-6 md:px-8">
+    <footer className="bg-gray-100 dark:bg-gray-800 pt-16 pb-10 sm:pt-20 md:pt-24 xl:pt-28 sm:pb-10">
+      <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto divide-y divide-gray-200 dark:divide-gray-600 px-4 sm:px-6 md:px-8">
         <ul
-          className={`${styles.nav} text-sm font-medium pb-14 sm:pb-20 grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-y-10`}
+          className={`${styles.nav} text-sm font-medium pb-14 sm:pb-20 grid grid-cols-2 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-y-10`}
         >
           {Object.keys(footerNav).map((section, i) => (
             <li key={section} className={clsx('space-y-5', footerNav[section].className)}>
-              <h2 className="text-base font-bold tracking-wide text-gray-900 uppercase">
+              <h2 className="text-base font-bold tracking-wide text-gray-900 dark:text-white uppercase">
                 {section}
               </h2>
               <ul className="space-y-4">
                 {footerNav[section].items.map((item) => (
                   <li key={item.href}>
                     <Link href={item.href}>
-                      <a className="hover:text-gray-900 transition-colors duration-200">
+                      <a className="text-gray-400 hover:text-gray-900 dark:hover:text-white transition ease-in-out duration-200">
                         {item.title}
                       </a>
                     </Link>
@@ -98,27 +98,27 @@ export function Footer() {
         </ul>
         <div className="container px-5 py-8 pb-8 mx-auto flex items-center sm:flex-row flex-col">
           <a href="#" className="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
-            <Logo className="w-auto h-10" />
+            <Logo className="w-auto h-10 text-black dark:text-white" />
           </a>
-          <div className="text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:pr-4 sm:border-l-2 sm:border-r-2 sm:border-gray-200 sm:py-2 sm:mt-0 mt-4">
+          <div className="text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:pr-4 sm:border-l-2 sm:border-r-2 sm:border-gray-200 sm:dark:border-gray-600 sm:py-2 sm:mt-0 mt-4">
             <div className="flex">
               <a href="https://github.com/uiuxarghya" target="_blank" rel="noopener noreferrer">
-                <p className="text text-base text-gray-500 flex">
-                  by&nbsp;<span className="text-base text-gray-800 font-bold">@uiuxarghya</span>
+                <p className="text text-base text-gray-500 dark:text-gray-200 flex">
+                  by&nbsp;<span className="text-base text-gray-800 dark:text-white font-bold">@uiuxarghya</span>
                 </p>
               </a>
             </div>
           </div>
-          <div className="text-sm text-gray-500 sm:pl-4 sm:border-gray-200 sm:py-2 sm:mt-0 mt-4">
+          <div className="text-sm text-gray-500 sm:pl-4 sm:border-gray-200 sm:dark:border-gray-600 sm:py-2 sm:mt-0 mt-4">
             <div className="flex">
               <a
                 href="https://vercel.com/?utm_source=javaistic&utm_campaign=oss"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <p className="text text-sm text-gray-500 flex">
+                <p className="text text-sm text-gray-500 dark:text-gray-200 flex">
                   Powered by
-                  <Vercel className="w-auto h-5 ml-1 flex" />
+                  <Vercel className="w-auto h-5 ml-1 flex text-black dark:text-white" />
                 </p>
               </a>
             </div>
@@ -127,7 +127,7 @@ export function Footer() {
           <span className="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
             <a
               href="https://github.com/javaistic/javaistic"
-              className="ml-3 text-gray-500 hover:text-black"
+              className="ml-3 text-gray-500 hover:text-black dark:hover:text-white transition ease-in-out duration-200"
             >
               <GitHub />
             </a>
@@ -155,7 +155,7 @@ export function Footer() {
             href="https://javaistic.betteruptime.com"
             className="flex pl-6 title-font font-medium items-center md:justify-start justify-center text-gray-900"
           >
-            <p className="mt-2 text-sm text-gray-500 hover:text-black">Status</p>
+            <p className="mt-2 text-sm text-gray-500 hover:text-black dark:hover:text-white">Status</p>
           </a>
           <span className="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start"></span>
         </div>

diff --git a/src/components/home/Hero.js b/src/components/home/Hero.js
@@ -152,7 +152,7 @@ export function Hero() {
               <div className="flex-auto flex flex-col min-w-0">
                 <CompletionDemo />
                 <div className="border-t border-white border-opacity-10 font-mono text-xs text-white p-4 space-y-2">
-                  <h3>Output</h3>
+                  <h3 className='text-white'>Output</h3>
                   <ul className="leading-5">
                     {outputs.map((output, i) => (
                       <li key={i} className="flex min-w-0">