From 6f039e540eefa5053b49a9f82038dc5403796e73 Mon Sep 17 00:00:00 2001 From: Stacy Daniel <70743760+stacy-tech@users.noreply.github.com> Date: Wed, 9 Oct 2024 23:04:57 -0400 Subject: [PATCH 1/4] updated the tailwind file to define custom colors for light and dark mode --- tailwind.config.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/tailwind.config.js b/tailwind.config.js index 384b66a..a80eccc 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -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: { @@ -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 }, }, }, From 1badbfd315863a780661ac6a7a0ac619ea91ea4d Mon Sep 17 00:00:00 2001 From: Stacy Daniel <70743760+stacy-tech@users.noreply.github.com> Date: Wed, 9 Oct 2024 23:15:58 -0400 Subject: [PATCH 2/4] Modified the landing page to ensure that it uses the dark/light mode theme using the appropriate background and text color classes --- src/views/LandingPage.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/views/LandingPage.jsx b/src/views/LandingPage.jsx index 2d633f2..407c1fe 100644 --- a/src/views/LandingPage.jsx +++ b/src/views/LandingPage.jsx @@ -2,13 +2,13 @@ import logo from '../assets/logo.png'; export function LandingPage() { return ( -
+
Ready to start your journey? Click the sign-in button below to begin planning your grocery runs with CollabShop today.
From 2957596559c01865ce146d8a83d0b336e9ff0f45 Mon Sep 17 00:00:00 2001 From: Stacy Daniel <70743760+stacy-tech@users.noreply.github.com> Date: Wed, 9 Oct 2024 23:20:48 -0400 Subject: [PATCH 3/4] implement a theme toggle feature that changes the apps appearance based on users selection ensuring the header/main content adapts to the the dark/light mode --- src/views/Layout.jsx | 43 ++++++++++++++++++++++++++++++++++++++----- 1 file changed, 38 insertions(+), 5 deletions(-) diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx index 0b52e4a..a47d64a 100644 --- a/src/views/Layout.jsx +++ b/src/views/Layout.jsx @@ -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'; /** @@ -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 ( <>