Skip to content

light/darkMode #154

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

light/darkMode #154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
17,516 changes: 10,271 additions & 7,245 deletions client/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

43 changes: 38 additions & 5 deletions client/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,49 @@
import React from 'react';
import React, { useState, useEffect } from 'react';

import Chat from './components/Chat/Chat';
import Join from './components/Join/Join';

import { BrowserRouter as Router, Route } from "react-router-dom";

import './theme.css';


const App = () => {
const [theme, setTheme] = useState('dark');

useEffect(() => {
document.documentElement.setAttribute('data-theme', theme);
}, [theme]);
Comment on lines +12 to +16
Copy link

@coderabbitai coderabbitai bot Aug 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Persist theme to localStorage and initialize from saved or system preference.

PR summary claims persistence, but it’s not implemented. Also set the attribute and save in one effect to avoid drift.

Apply this diff:

-  const [theme, setTheme] = useState('dark');
+  const [theme, setTheme] = useState(getInitialTheme);
 
-  useEffect(() => {
-    document.documentElement.setAttribute('data-theme', theme);
-  }, [theme]);
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+    try {
+      localStorage.setItem('theme', theme);
+    } catch {}
+  }, [theme]);

Add this helper above const App = () => {:

// Initializes from localStorage, then falls back to OS preference, else light.
const getInitialTheme = () => {
  try {
    const saved = localStorage.getItem('theme');
    if (saved === 'light' || saved === 'dark') return saved;
  } catch {}
  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    return 'dark';
  }
  return 'light';
};
🤖 Prompt for AI Agents 
In client/src/App.js around lines 12 to 16, the theme is not persisted nor
initialized from saved or system preference as claimed; add the provided
getInitialTheme helper function above "const App = () => {" and change the theme
state to use that helper as the initial value, then replace the separate effect
with a single useEffect that both sets
document.documentElement.setAttribute('data-theme', theme) and writes the theme
to localStorage (wrapped in try/catch to avoid errors in restricted
environments). Ensure saved values are validated to 'light' or 'dark' and fall
back to OS preference or 'light' when absent.


const toggleTheme = () => {
setTheme(theme === 'dark' ? 'light' : 'dark');
};

return (
<Router>
<Route path="/" exact component={Join} />
<Route path="/chat" component={Chat} />
</Router>
<>
<button
onClick={toggleTheme}
style={{
position: 'fixed',
top: 10,
right: 10,
zIndex: 1000,
padding: '8px 16px',
borderRadius: '5px',
border: 'none',
background: 'var(--primary-color)',
color: 'var(--text-color)',
cursor: 'pointer',
}}
aria-label="Toggle theme"
>
Switch to {theme === 'dark' ? 'Light' : 'Dark'} Mode
</button>
Comment on lines +24 to +41
Copy link

@coderabbitai coderabbitai bot Aug 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Fix toggle button contrast and improve accessibility.

Use the new --on-primary-color for button text, and expose pressed state to ATs.

Apply this diff:

       <button
         onClick={toggleTheme}
+        type="button"
         style={{
           position: 'fixed',
           top: 10,
           right: 10,
           zIndex: 1000,
           padding: '8px 16px',
           borderRadius: '5px',
           border: 'none',
           background: 'var(--primary-color)',
-          color: 'var(--text-color)',
+          color: 'var(--on-primary-color)',
           cursor: 'pointer',
         }}
         aria-label="Toggle theme"
+        aria-pressed={theme === 'dark'}
       >

Optional: move these inline styles into a CSS class to keep styling centralized with the rest of the theming.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<button
onClick={toggleTheme}
style={{
position: 'fixed',
top: 10,
right: 10,
zIndex: 1000,
padding: '8px 16px',
borderRadius: '5px',
border: 'none',
background: 'var(--primary-color)',
color: 'var(--text-color)',
cursor: 'pointer',
}}
aria-label="Toggle theme"
>
Switch to {theme === 'dark' ? 'Light' : 'Dark'} Mode
</button>
<button
type="button"
onClick={toggleTheme}
style={{
position: 'fixed',
top: 10,
right: 10,
zIndex: 1000,
padding: '8px 16px',
borderRadius: '5px',
border: 'none',
background: 'var(--primary-color)',
color: 'var(--on-primary-color)',
cursor: 'pointer',
}}
aria-label="Toggle theme"
aria-pressed={theme === 'dark'}
>
Switch to {theme === 'dark' ? 'Light' : 'Dark'} Mode
</button>
🤖 Prompt for AI Agents 
In client/src/App.js around lines 24 to 41, the theme toggle button uses the
wrong text color variable and lacks an accessible pressed state; change the
button text color to use CSS variable --on-primary-color instead of
--text-color, add an aria-pressed attribute that reflects the current state
(e.g., true when theme is 'dark', false otherwise) so assistive technologies can
detect the toggle state, and optionally move the inline style block into a CSS
class (using the same CSS variables) to centralize theming.

<Router>
<Route path="/" exact component={Join} />
<Route path="/chat" component={Chat} />
</Router>
</>
);
}

Expand Down
8 changes: 4 additions & 4 deletions client/src/components/Chat/Chat.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,17 @@
justify-content: center;
align-items: center;
height: 100vh;
background-color: #1A1A1D;
background: var(--background-color);
}

.container {
display: flex;
flex-direction: column;
justify-content: space-between;
background: #FFFFFF;
background: var(--secondary-color);
border-radius: 8px;
height: 60%;
width: 35%;
height: 60vh;
width: 40vw;
}

@media (min-width: 320px) and (max-width: 480px) {
Expand Down
4 changes: 2 additions & 2 deletions client/src/components/InfoBar/InfoBar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
display: flex;
align-items: center;
justify-content: space-between;
background: #2979FF;
background: var(--primary-color);
border-radius: 4px 4px 0 0;
height: 60px;
width: 100%;
Expand All @@ -13,7 +13,7 @@
display: flex;
align-items: center;
margin-left: 5%;
color: white;
color: var(--text-color);
}

.rightInnerContainer {
Expand Down
8 changes: 5 additions & 3 deletions client/src/components/Input/Input.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.form {
display: flex;
border-top: 2px solid #D3D3D3;
border-top: 2px solid var(--primary-color);
}

.input {
Expand All @@ -9,17 +9,19 @@
padding: 5%;
width: 80%;
font-size: 1.2em;
background: var(--secondary-color);
color: var(--text-color);
}

input:focus, textarea:focus, select:focus{
outline: none;
}

.sendButton {
color: #fff !important;
color: var(--text-color) !important;
text-transform: uppercase;
text-decoration: none;
background: #2979FF;
background: var(--primary-color);
padding: 20px;
Comment on lines +21 to 25
Copy link

@coderabbitai coderabbitai bot Aug 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix contrast for primary buttons (text on primary).

color: var(--text-color) on background: var(--primary-color) will likely fail WCAG contrast in light mode (dark text on blue). Introduce an “on-primary” token and use it here to guarantee readable text across themes.

Apply this diff here (paired with adding --on-primary-color in theme.css):

-  color: var(--text-color) !important;
+  color: var(--on-primary-color) !important;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
color: var(--text-color) !important;
text-transform: uppercase;
text-decoration: none;
background: #2979FF;
background: var(--primary-color);
padding: 20px;
color: var(--on-primary-color) !important;
text-transform: uppercase;
text-decoration: none;
background: var(--primary-color);
padding: 20px;
🤖 Prompt for AI Agents 
In client/src/components/Input/Input.css around lines 21 to 25, the button text
uses color: var(--text-color) on background: var(--primary-color) which can fail
WCAG contrast in light mode; update the rule to use a dedicated on-primary token
instead: replace color: var(--text-color) with color: var(--on-primary-color)
(keep any necessary !important), and ensure you add and populate
--on-primary-color in theme.css for both light and dark themes with values that
meet contrast requirements against --primary-color.

display: inline-block;
border: none;
Expand Down
26 changes: 14 additions & 12 deletions client/src/components/Join/Join.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ html, body {
text-align: center;
height: 100vh;
align-items: center;
background-color: #1A1A1D;
background: var(--background-color);
}

.joinInnerContainer {
Expand All @@ -29,25 +29,27 @@ html, body {
border-radius: 0;
padding: 15px 20px;
width: 100%;
background: var(--secondary-color);
color: var(--text-color);
}

.heading {
color: white;
color: var(--text-color);
font-size: 2.5em;
padding-bottom: 10px;
border-bottom: 2px solid white;
border-bottom: 2px solid var(--text-color);
}

.button {
color: #fff !important;
text-transform: uppercase;
text-decoration: none;
background: #2979FF;
padding: 20px;
border-radius: 5px;
display: inline-block;
border: none;
width: 100%;
color: var(--text-color) !important;
text-transform: uppercase;
text-decoration: none;
background: var(--primary-color);
padding: 20px;
border-radius: 5px;
display: inline-block;
border: none;
width: 100%;
Comment on lines +44 to +52
Copy link

@coderabbitai coderabbitai bot Aug 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix button text contrast on primary background.

Like the Input send button, this is likely to fail contrast in light mode.

Apply this diff (paired with --on-primary-color in theme.css):

-  color: var(--text-color) !important;
+  color: var(--on-primary-color) !important;

Optional: add a visible focus style to retain keyboard accessibility (outline is removed later in the file). You can add the following rule elsewhere:

.button:focus-visible {
  outline: 3px solid var(--on-primary-color);
  outline-offset: 2px;
}
🤖 Prompt for AI Agents 
In client/src/components/Join/Join.css around lines 44 to 52, the button text
color on the primary background currently uses the page text color and may fail
contrast in light mode; change the text color to use the theme's on-primary
token (var(--on-primary-color)) instead of var(--text-color) so the label meets
contrast on the primary background, keep or remove !important as needed to
override other rules, and ensure you pair this with the existing
--on-primary-color in theme.css; also add a visible keyboard focus style
elsewhere (e.g., a :focus-visible outline using var(--on-primary-color) with an
offset) to preserve accessibility.

}

.mt-20 {
Expand Down
6 changes: 3 additions & 3 deletions client/src/components/Messages/Message/Message.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
.messageBox {
background: #F3F3F3;
background: var(--secondary-color);
border-radius: 20px;
padding: 5px 20px;
color: white;
color: var(--text-color);
display: inline-block;
max-width: 80%;
}
Expand Down Expand Up @@ -30,7 +30,7 @@
display: flex;
align-items: center;
font-family: Helvetica;
color: #828282;
color: var(--text-color);
letter-spacing: 0.3px;
}

Expand Down
8 changes: 4 additions & 4 deletions client/src/components/Messages/Message/Message.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,15 @@ const Message = ({ message: { text, user }, name }) => {
? (
<div className="messageContainer justifyEnd">
<p className="sentText pr-10">{trimmedName}</p>
<div className="messageBox backgroundBlue">
<p className="messageText colorWhite">{ReactEmoji.emojify(text)}</p>
<div className="messageBox">
<p className="messageText">{ReactEmoji.emojify(text)}</p>
</div>
</div>
)
: (
<div className="messageContainer justifyStart">
<div className="messageBox backgroundLight">
<p className="messageText colorDark">{ReactEmoji.emojify(text)}</p>
<div className="messageBox">
<p className="messageText">{ReactEmoji.emojify(text)}</p>
</div>
<p className="sentText pl-10 ">{user}</p>
</div>
Expand Down
1 change: 1 addition & 0 deletions client/src/components/Messages/Messages.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,5 @@
padding: 5% 0;
overflow: auto;
flex: auto;
background: var(--secondary-color);
}
2 changes: 1 addition & 1 deletion client/src/components/TextContainer/TextContainer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
display: flex;
flex-direction: column;
margin-left: 100px;
color: white;
color: var(--text-color);
height: 60%;
justify-content: space-between;
}
Expand Down
20 changes: 20 additions & 0 deletions client/src/theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
/* Theme variables */
:root {
--background-color: #fff;
--text-color: #222;
--primary-color: #2979FF;
--secondary-color: #f3f3f3;
}
Comment on lines +2 to +7
Copy link

@coderabbitai coderabbitai bot Aug 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add an “on-primary” token to guarantee readable text on primary backgrounds.

Buttons and CTAs use --primary-color as background. Provide a dedicated --on-primary-color so text reliably meets contrast in both themes (typically white on #2979FF).

Apply these diffs:

 :root {
   --background-color: #fff;
   --text-color: #222;
   --primary-color: #2979FF;
   --secondary-color: #f3f3f3;
+  --on-primary-color: #fff;
 }
 [data-theme="dark"] {
   --background-color: #1a1a1a;
   --text-color: #fff;
   --primary-color: #2979FF;
   --secondary-color: #23272a;
+  --on-primary-color: #fff;
 }

Also applies to: 9-14

🤖 Prompt for AI Agents 
In client/src/theme.css around lines 2-7 (and similarly lines 9-14 for the other
theme block), add a new CSS custom property --on-primary-color to guarantee
readable text on primary backgrounds; set it to a high-contrast value (e.g.
#ffffff when primary is #2979FF) and update any components or button styles that
render text on --primary-color to use --on-primary-color instead of relying on
--text-color so contrast is consistent across themes.


[data-theme="dark"] {
--background-color: #1a1a1a;
--text-color: #fff;
--primary-color: #2979FF;
--secondary-color: #23272a;
}

body {
background: var(--background-color);
color: var(--text-color);
transition: background 0.3s, color 0.3s;
}
6 changes: 6 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.