From 137ce9887938e94d3e654ab7c3246e18f85cddc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chlo=C3=A9=20JACOB?= <chloe.jacob4@etu.unistra.fr>
Date: Sun, 26 Feb 2023 22:17:02 +0100
Subject: [PATCH] mise en place du darkmode
---
index.html | 2 +-
src/components/Navbar.tsx | 24 ++++++++++++++++--------
src/components/Post.tsx | 6 +++---
tailwind.config.cjs | 7 +++----
4 files changed, 23 insertions(+), 16 deletions(-)
diff --git a/index.html b/index.html
index 0b07221..762e014 100644
--- 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>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 0d4f0e5..db5d9f8 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,16 +1,24 @@
+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>
diff --git a/src/components/Post.tsx b/src/components/Post.tsx
index 422f0ac..4a225e7 100644
--- 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`}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 8319f6e..1956a3f 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,14 +1,13 @@
/** @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: [],
--
GitLab