use dark colorscheme for dark mode

Author: Roshan Jossy

src/components/Card.tsx

@@ -9,7 +9,7 @@ export default function Card({
 }) {
   return (
     <div
-      className={`py-4 px-8 bg-white dark:bg-slate-800 rounded-lg ${classes}`}
+      className={`py-4 px-8 bg-white dark:bg-dark-700 rounded-lg ${classes}`}
     >
       {children}
     </div>

src/components/Layout.tsx

@@ -13,7 +13,7 @@ export default function Layout({
   sidebarContentRight,
 }: LayoutProps) {
   return (
-    <div className="mx-auto bg-gray-100 dark:bg-slate-700 min-h-screen">
+    <div className="mx-auto bg-gray-100 dark:bg-dark-800 min-h-screen">
       <Navbar />
       <div className="grid grid-cols-9 gap-10 mt-10 px-20 pt-10">
         {sidebarContentLeft && (

src/components/UserDetails/Badges/BadgeList.tsx

@@ -36,6 +36,7 @@ const BadgeList = ({ user }: any) => {
       ))}
       {hasNext ? (
         <button
+          className="text-gray-600 dark:text-gray-300"
           onClick={() => {
             loadNext(2)
           }}

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 dark:bg-slate-800">
+    <div className="flex flex-col p-6 rounded-lg shadow-lg hover:shadow-md bg-white dark:bg-dark-700">
       <a href={data.url} target="_blank" rel="noopener noreferrer">
         <div className="flex flex-row">
           <img

src/components/navbar/Navbar.tsx

@@ -10,7 +10,7 @@ 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 dark:bg-slate-800 p-3 shadow-sm">
+    <nav className="fixed top-0 left-0 right-0 z-10 w-full h-16 bg-white dark:bg-dark-700 p-3 shadow-sm">
       <div className="container m-auto flex justify-between">
         <a href="/">
           <div className="logo w-10 h-10"></div>

tailwind.config.js

@@ -4,7 +4,22 @@ module.exports = {
     './src/components/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        dark: {
+          50: '#fdf8f6',
+          100: '#f2e8e5',
+          200: '#eaddd7',
+          300: '#e0cec7',
+          400: '#d2bab0',
+          500: '#bfa094',
+          600: '#40444b',
+          700: '#36393f',
+          800: '#2f3136',
+          900: '#202225',
+        },
+      },
+    },
   },
   darkMode: 'class',
   plugins: [require('@tailwindcss/typography')],