mise en place du darkmode

137ce988 · Chloé JACOB · cdb7c5a2 · 137ce988 · 137ce988 · 137ce988
Commit 137ce988 authored 2 years ago by Chloé JACOB
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
    <!--FONT TITLE INSTALIKE : billabong -->
    <link href="https://fonts.cdnfonts.com/css/billabong" rel="stylesheet">
  </head>
-  <body>
+  <body class="dark:bg-darkblue dark:text-white">
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>

--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+
 // ICONS
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faHouse } from '@fortawesome/free-solid-svg-icons';
-import { faCompass, faSquarePlus, faCircleUser, faMoon } from '@fortawesome/free-regular-svg-icons';
+import { faCompass, faSquarePlus, faCircleUser, faMoon, faSun } from '@fortawesome/free-regular-svg-icons';


-import { Link } from 'react-router-dom';
+const Navbar = () => {
+    const [isDarkMode, setIsDarkMode] = useState(false);
+
+    const handleDarkModeToggle = () => {
+        setIsDarkMode(!isDarkMode);
+        document.documentElement.classList.toggle('dark');
+    };


-const Navbar = () => {
 return <>
    {/* HEADER */}
-    <div className="border-b-[0.8px]">
+    <div className="border-b-[0.8px] dark:bg-darkblue">
        <div className="max-w-[1280px] mx-auto flex items-center justify-between px-4 py-2 h-16">
            <h1 className="instalike_title text-[44px]">Instalike</h1>
            <nav className="flex gap-5">
@@ -30,10 +38,10 @@ return <>
                <Link to="/profile">
                    <FontAwesomeIcon className="text-[24px]" icon={faCircleUser} />
                </Link>
-                {/* LIGHT/DARK MODE */}
-                <a href="#">
-                    <FontAwesomeIcon className="text-[24px]" icon={faMoon} />
-                </a>
+                {/* LIGHT/DARK MODE TOGGLE */}
+                <button onClick={handleDarkModeToggle}>
+                    <FontAwesomeIcon className="text-[24px]" icon={isDarkMode ? faSun : faMoon} />
+                </button>
            </nav>
        </div>
    </div>

--- a/src/components/Post.tsx
+++ b/src/components/Post.tsx
@@ -35,13 +35,13 @@ const dispatch = useAppDispatch();

 return <>
 {/* A POST */}
-<div className="border rounded-xl bg-white">
+<div className="border rounded-xl bg-white dark:bg-darkblue">
    {/* HEADER POST */}
    <div className="flex justify-between p-4">
        <div className="flex items-center gap-4">
            <div className="bg-gray-400 flex items-center justify-center rounded-full overflow-hidden w-12 h-12">
                {/* <img src="/src/assets/images/pp_user.png" alt="" /> */}
-                <p className="uppercase text-white text-xl">{username.charAt(0)}</p>
+                <p className="uppercase text-white dark:text-darkblue text-xl">{username.charAt(0)}</p>
            </div>
            <div>
                <p className="font-bold">{username}</p>
@@ -64,7 +64,7 @@ return <>
    </div>
    {/* BIO POST */}
    <div className="p-4">
-        {caption && <p className="text-red-500 mb-3">{caption}</p>}
+        {caption && <p className="mb-3">{caption}</p>}
        <div className="flex gap-2">
            {isLiked ? (
                <button className={`px-4 py-1 bg-${isLiked ? 'red-500' : 'gray-400'} rounded-full flex items-center gap-2`}

--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
 /** @type {import('tailwindcss').Config} */
 module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}",],
+  darkMode: 'class', //pour la mise en place du darkmode
  theme: {
    extend: {
-      colords: {
+      colors: {
        'light-gray': '#718096',
+        'darkblue': '#1A202C',
      },
-      boxShadow: {
-        'post': '0 0 20px 1px rgba(0, 0, 0, 0.2)',
-      }
    },
  },
  plugins: [],