Merge pull request #147 from codefortulsa/feature/dark-mode

dark/light mode added to default layout and nav
codefortulsa · Jan 19, 2023 · a5ebf07 · a5ebf07
2 parents 04c8b5c + e1a6489
commit a5ebf07
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 5 deletions.
diff --git a/src/features/DefaultLayout.tsx b/src/features/DefaultLayout.tsx
@@ -7,8 +7,8 @@ type DefaultLayoutProps = {
 
 const DefaultLayout = ({ children }: DefaultLayoutProps) => {
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-[256px_repeat(3,_minmax(0,_1fr))] gap-10 h-screen">
-      <header className="col-span-1">
+    <div className="bg-cft-light-gray  dark:bg-cft-black grid grid-cols-1 lg:grid-cols-[256px_repeat(3,_minmax(0,_1fr))] gap-10 h-screen">
+      <header className="bg-cft-light-gray  dark:bg-cft-black col-span-1 ">
         <Nav />
       </header>
       <main className="col-span-1 lg:col-span-3 pt-10 container px-20">

diff --git a/src/features/Nav.tsx b/src/features/Nav.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 const Nav = () => {
   return (
     <>
-      <nav className="w-screen lg:w-64 bg-cft-black shadow flex-col justify-between">
+      <nav className="w-screen lg:w-64 bg-cft-nav-gray dark:bg-cft-black shadow flex-col justify-between">
         <div>
           <div className="flex items-center justify-center my-6 cursor-pointer">
             <Link href={'/'} passHref={true}>

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -3,6 +3,6 @@
 @tailwind utilities;
 
 body, html {
-  @apply bg-cft-black;
-  @apply text-white;
+  @apply bg-cft-light-gray dark:bg-cft-black;
+  @apply text-cft-black dark:text-cft-white;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -38,6 +38,7 @@ module.exports = {
         'cft-black': '#121212',
         'cft-light-gray': '#BEBCBC',
         'cft-white': '#F9F9F9',
+        'cft-nav-gray': '#E6E6E6',
       },
     },
   },