add theme toggle button and dark mode backgrounds

Author: Roshan Jossy

src/components/Card.tsx

@@ -1,9 +1,17 @@
-import { ReactNode } from "react";
+import { ReactNode } from 'react'
 
-export default function Card ({children, classes}: {children: ReactNode, classes?: string}) {
-    return(
-        <div className={`py-4 px-8 bg-white rounded-lg ${classes}`}>
-            {children}
-        </div>
-    )
-}
+export default function Card({
+  children,
+  classes,
+}: {
+  children: ReactNode
+  classes?: string
+}) {
+  return (
+    <div
+      className={`py-4 px-8 bg-white dark:bg-slate-800 rounded-lg ${classes}`}
+    >
+      {children}
+    </div>
+  )
+}

src/components/Layout.tsx

@@ -1,30 +1,30 @@
-import React, { ReactNode } from "react";
-import Navbar from "./navbar/Navbar";
+import React, { ReactNode } from 'react'
+import Navbar from './navbar/Navbar'
 
 type LayoutProps = {
-sidebarContentLeft?: ReactNode
- children: ReactNode
+  sidebarContentLeft?: ReactNode
+  children: ReactNode
   sidebarContentRight: ReactNode
 }
 
-export default function Layout ({sidebarContentLeft, children, sidebarContentRight}: LayoutProps) {
-    return (
-        <div className="mx-auto bg-gray-100 min-h-screen">
-            <Navbar />
-        <div className="grid grid-cols-9 gap-10 mt-10 px-20 pt-10">
-            {sidebarContentLeft && (
-            <aside className="col-span-2">
-                {sidebarContentLeft}
-            </aside>)}
-            <main className={ sidebarContentLeft ? "col-span-5": "col-span-7"}>
-                {children}
-            </main>
-            <aside className="col-span-2">
-                {sidebarContentRight}
-            </aside>
-        </div>
-        <div>
-        </div>
-        </div>
-    )
-}
+export default function Layout({
+  sidebarContentLeft,
+  children,
+  sidebarContentRight,
+}: LayoutProps) {
+  return (
+    <div className="mx-auto bg-gray-100 dark:bg-slate-700 min-h-screen">
+      <Navbar />
+      <div className="grid grid-cols-9 gap-10 mt-10 px-20 pt-10">
+        {sidebarContentLeft && (
+          <aside className="col-span-2">{sidebarContentLeft}</aside>
+        )}
+        <main className={sidebarContentLeft ? 'col-span-5' : 'col-span-7'}>
+          {children}
+        </main>
+        <aside className="col-span-2">{sidebarContentRight}</aside>
+      </div>
+      <div></div>
+    </div>
+  )
+}

src/components/UserDetails/Bio.tsx

@@ -31,7 +31,6 @@ const Bio = ({ user }: BioProps) => {
   )
   const onChange = (evt: any) => setBio(evt.target.textContent)
   const onSubmit = () => {
-    console.log(bio)
     commitMutation({
       variables: {
         input: { id: data.id, bio: bio },

src/components/issue/Issue.tsx

@@ -20,7 +20,7 @@ const Issue = ({ issue }: IssueProps) => {
     issue
   )
   return (
-    <div className="flex flex-col p-6 rounded-lg shadow-lg hover:shadow-md bg-white">
+    <div className="flex flex-col p-6 rounded-lg shadow-lg hover:shadow-md bg-white dark:bg-slate-800">
       <a href={data.url} target="_blank" rel="noopener noreferrer">
         <div className="flex flex-row">
           <img

src/components/navbar/Navbar.tsx

@@ -1,29 +1,34 @@
 import { useRouter } from 'next/router'
 import React from 'react'
 import Button from '../Button'
+import ThemeButton from './ThemeButton'
 
 export default function Navbar() {
   const router = useRouter()
   const { pathname } = router
   return (
-    <nav className="fixed top-0 left-0 right-0 z-10 w-full h-16 bg-white p-3 shadow-sm">
+    <nav className="fixed top-0 left-0 right-0 z-10 w-full h-16 bg-white dark:bg-slate-800 p-3 shadow-sm">
       <div className="container m-auto flex justify-between">
         <a href="/">
           <div className="logo w-10 h-10"></div>
         </a>
-        {pathname !== '/story' && (
-          <Button>
-            <a href="/story">
-              <a>Create Post </a>
-            </a>
-          </Button>
-        )}
+        <div className="space-x-4">
+          <ThemeButton />
+          {pathname !== '/story' && (
+            <Button>
+              <a href="/story">
+                <a>Create Post </a>
+              </a>
+            </Button>
+          )}
+        </div>
       </div>
       <style jsx>{`
         .logo {
           background: url('https://avatars1.githubusercontent.com/u/65761570?s=460&u=640f39b808c75c6b86460aa907dd030bcca2f3c7&v=4');
           background-repeat: no-repeat;
           background-size: contain;
+          @apply: border;
         }
       `}</style>
     </nav>

src/components/navbar/ThemeButton.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react'
+import Button from '../Button'
+
+export default function ThemeButton() {
+  const [darkMode, setDarkMode] = useState<boolean | undefined>(undefined)
+  useEffect(() => {
+    setDarkMode(document.documentElement.classList.contains('dark'))
+  }, [])
+  useEffect(() => {
+    if (darkMode) {
+      window.document.documentElement.classList.add('dark')
+      localStorage.setItem('vidyaDarkMode', 'true')
+    } else {
+      window.document.documentElement.classList.remove('dark')
+      localStorage.setItem('vidyaDarkMode', 'false')
+    }
+  }, [darkMode])
+  const onClick = () => {
+    setDarkMode(!darkMode)
+  }
+
+  return <Button onClick={onClick}>toggle dark mode</Button>
+}

src/lib/relay.ts

@@ -48,7 +48,6 @@ export const makeFetchGraphql = (ctx: NextPageContext) => {
     )
 
     const text = await results.text()
-    console.log('response', text)
     const data = JSON.parse(text, withHydrateDatetime) as GraphQLResponse
 
     return data

src/styles/Home.module.css

@@ -1,12 +1,11 @@
 module.exports = {
   content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx}",
-    "./src/components/**/*.{js,ts,jsx,tsx}",
+    './src/pages/**/*.{js,ts,jsx,tsx}',
+    './src/components/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
     extend: {},
   },
-  plugins: [
-    require('@tailwindcss/typography'),
-  ],
+  darkMode: 'class',
+  plugins: [require('@tailwindcss/typography')],
 }