Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark/Light Mode Feature #61

Merged
merged 4 commits into from
Oct 10, 2024
Merged

Dark/Light Mode Feature #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6f039e5
updated the tailwind file to define custom colors for light and dark …
stacy-tech Oct 10, 2024
1badbfd
Modified the landing page to ensure that it uses the dark/light mode …
stacy-tech Oct 10, 2024
2957596
implement a theme toggle feature that changes the apps appearance bas…
stacy-tech Oct 10, 2024
45ef3fd
modified the component to use dynamic dark/light mode classes for bac…
stacy-tech Oct 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/views/LandingPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,21 @@ import logo from '../assets/logo.png';

export function LandingPage() {
return (
<div className="flex flex-col items-center justify-center min-h-screen bg-bgPrimary p-6">
<div className="flex flex-col items-center justify-center min-h-screen bg-bgPrimary dark:bg-bgPrimaryDark p-6">
<img
src={logo}
alt="CollabShop Logo, a collaboration platform for grocery shopping."
className="w-45 h-auto mb-6"
/>
<h1 className="text-txtPrimary text-2xl md:text-4xl font-bold text-center mb-4">
<h1 className="text-txtPrimary dark:text-txtPrimaryDark text-2xl md:text-4xl font-bold text-center mb-4">
<strong>CollabShop</strong> is more than just a grocery app—it&apos;s a
tool that embodies the spirit of teamwork and collaboration. Created by
early-career developers from{' '}
<a
href="https://the-collab-lab.codes/"
target="_blank"
rel="noopener noreferrer"
className="text-txtPrimary font-bold underline hover:text-[#1A759F] transition duration-300"
className="text-txtPrimary dark:text-txtPrimaryDark font-bold underline hover:text-[#1A759F] transition duration-300"
>
<strong>The Collab Lab</strong>
</a>
Expand All @@ -25,7 +25,7 @@ export function LandingPage() {
effortlessly share and collaborate on lists. With CollabShop, planning
your grocery trips becomes a seamless and enjoyable experience!
</h1>
<p className="text-txtPrimary font-bold text-lg md:text-xl text-center mb-6">
<p className="text-txtPrimary dark:text-txtPrimaryDark font-bold text-lg md:text-xl text-center mb-6">
Ready to start your journey? Click the sign-in button below to begin
planning your grocery runs with CollabShop today.
</p>
Expand Down
43 changes: 38 additions & 5 deletions src/views/Layout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,14 @@ import {
FaSignOutAlt,
FaInfoCircle,
FaCartPlus,
FaMoon,
FaSun,
} from 'react-icons/fa';
import { IconButton } from '../components/IconButton';
import { useAuth, SignOutButton, SignInButton } from '../api/useAuth.jsx';
import { auth } from '../api/config.js';
import logo from '../assets/logo.png';
import { useEffect } from 'react';
//import './Layout.css';

/**
Expand All @@ -22,21 +25,52 @@ import logo from '../assets/logo.png';

export function Layout() {
const { user } = useAuth();

//Toggle dark/light mode
const toggleTheme = () => {
const currentTheme = localStorage.getItem('theme') || 'light';
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';

//Toggle the dark class on the html element
document.documentElement.classList.toggle('dark', newTheme === 'dark');
localStorage.setItem('theme', newTheme);
};

// Set the theme on initial load
useEffect(() => {
const savedTheme = localStorage.getItem('theme') || 'light';
document.documentElement.classList.toggle('dark', savedTheme === 'dark');
}, []);
return (
<>
<div className="flex flex-col min-h-screen">
<header className="bg-[var(--color-bg)] pb-2 pt-[max(env(safe-area-inset-top),1rem)] text-center">
<header className="bg-bgPrimary dark:bg-bgPrimaryDark pb-2 pt-[max(env(safe-area-inset-top),1rem)] text-center">
{!!user && (
<div>
<img src={logo} alt="Logo" className="mx-auto" />
<span>Signed in as {auth.currentUser.displayName}</span>
<span className="text-txtPrimary dark:text-txtPrimaryDark">
Signed in as {auth.currentUser.displayName}
</span>
</div>
)}

{/* Theme toggle button */}
<button
onClick={toggleTheme}
className="mt-2 p-2 bg-gray-200 dark:bg-gray-800 rounded"
aria-label="Toggle Dark Mode"
>
{document.documentElement.classList.contains('dark') ? (
<FaSun className="text-yellow-500" />
) : (
<FaMoon className="text-blue-500" />
)}
</button>
</header>
<main className="p-0 pb-[6.26rem] w-[min(72ch,100%)] mx-auto">
<main className="bg-bgPrimary dark:bg-bgPrimaryDark text-txtPrimary dark:text-txtPrimaryDark p-0 pb-[6.26rem] w-[min(72ch,100%)] mx-auto">
<Outlet />
</main>
<nav className="bg-[var(--color-bg)] border-t border-[var(--color-border)] bottom-0 flex flex-row pb-[max(env(safe-area-inset-bottom),1rem)] pt-4 justify-center fixed w-full">
<nav className="bg-bgSecondary dark:bg-bgSecondayDark border-t border-[var(--color-border)] bottom-0 flex flex-row pb-[max(env(safe-area-inset-bottom),1rem)] pt-4 justify-center fixed w-full">
<div className="flex flex-row justify-evenly w-[min(72ch,100%)]">
{user ? (
<>
Expand All @@ -51,7 +85,6 @@ export function Layout() {
aria-label="Add Item"
as={NavLink}
IconComponent={FaCartPlus}
//className
label="Add Item"
to="/manage-list"
/>
Expand Down
6 changes: 3 additions & 3 deletions src/views/Team.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export function Team() {
}

return (
<div className="bg-bgPrimary p-10 text-center">
<div className="bg-bgPrimary dark:bg-bgPrimaryDark p-10 text-center text-txtPrimary dark:text-txtPrimaryDark">
<h1 className="mb-5 text-txtPrimary text-4xl font-bold">
Meet the Team Behind CollabShop
</h1>
Expand All @@ -94,7 +94,7 @@ export function Team() {
{developers.map((dev, index) => (
<div
key={index}
className="bg-[#168AAD] rounded-lg p-6 shadow-lg w-72 transition-transform transform hover:scale-105 hover:shadow-2xl"
className="bg-[#168AAD] dark:bg-[#1D1D1D] rounded-lg p-6 shadow-lg w-72 transition-transform transform hover:scale-105 hover:shadow-2xl"
>
<img
src={dev.photo}
Expand Down Expand Up @@ -140,7 +140,7 @@ export function Team() {
{mentors.map((mentor, index) => (
<div
key={index}
className="bg-[#168AAD] rounded-lg p-6 shadow-lg w-72 transition-transform transform hover:scale-105 hover:shadow-2xl"
className="bg-[#168AAD] dark:bg-[#1D1D1D] rounded-lg p-6 shadow-lg w-72 transition-transform transform hover:scale-105 hover:shadow-2xl"
>
<img
src={mentor.photo}
Expand Down
6 changes: 6 additions & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{html,js,jsx}'],
darkMode: 'class', // Enable dark mode using the class strategy
theme: {
extend: {
colors: {
Expand All @@ -9,6 +10,11 @@ export default {
bgSecondary: '#34A0A4', // Accent color for NavBar
txtPrimary: '#184E77', // Primary color Text
txtSecondary: '#34A0A4', // Secondary color Text
//Dark mode colors
bgPrimaryDark: '#1D1D1D', // Dark background color
bgSecondaryDark: '#2C2C2C', // Dark secondary color
txtPrimaryDark: '#FFFFFF', // Light text color
txtSecondaryDark: '#A0A0A0', // Secondary light text color
},
},
},
Expand Down