Adjusted the icon for the sun and changed the color #9
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
… is visible during hover
|
@NicholasCloud4 is attempting to deploy a commit to the Eshita's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughRefactors markup in index.html and invoice.html for modular structure and consistent sections; retains existing navigation and logic. Adds a class toggle in script.js to reflect theme state on the toggle button. Introduces a CSS hover style for the sun-visible state. Other changes are formatting/whitespace. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Button as Theme Toggle Button
participant Script as script.js
participant DOM as Document
participant CSS as CSS Rules
User->>Button: Click
Button->>Script: toggleTheme()
Script->>DOM: Toggle data-theme (dark/light)
Script->>DOM: toggleThemeIcons(isDark)
Note over Script,DOM: New: add/remove <sun-visible> on toggle button
DOM-->>CSS: Updated classes and attributes
CSS-->>User: Apply hover style when .sun-visible:hover
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
script.js (1)
20-23: Consider CSS-only icon toggling to reduce JS DOM writesYou can let CSS handle visibility based on body.dark-theme and avoid inline style mutations. Keeps state in one place.
Add to CSS (in the stylesheet used by both pages):
.theme-toggle-btn .sun-icon { display: none; } .theme-toggle-btn .moon-icon { display: inline; } .dark-theme .theme-toggle-btn .sun-icon { display: inline; } .dark-theme .theme-toggle-btn .moon-icon { display: none; }Then you can remove the moonIcon/sunIcon display writes here.
index.html (1)
8-8: Ensure hover color rule exists in home.css tooThe new .theme-toggle-btn.sun-visible:hover rule was added to style.css, but this page loads home.css. If home.css lacks that selector, the hover color change won’t apply here.
Options:
- Duplicate the rule in home.css, or
- Load a shared stylesheet used by both pages for the theme-toggle rules.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (4)
index.html(1 hunks)invoice.html(1 hunks)script.js(3 hunks)style.css(4 hunks)
🔇 Additional comments (1)
script.js (1)
43-45: LGTM: theme state applied and icon class sync’dInitial apply + click handler keep icons and hover styling in sync.
Also applies to: 61-62
Comment on lines
+26
to
+44
| <button id="theme-toggle" class="theme-toggle-btn"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" | ||
| class="moon-icon"> | ||
| <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path> | ||
| </svg> | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" | ||
| stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sun-icon" | ||
| style="display: none;"> | ||
| <circle cx="12" cy="12" r="5" fill="currentColor" /> | ||
| <line x1="12" y1="1" x2="12" y2="4" /> | ||
| <line x1="12" y1="20" x2="12" y2="23" /> | ||
| <line x1="1" y1="12" x2="4" y2="12" /> | ||
| <line x1="20" y1="12" x2="23" y2="12" /> | ||
| <line x1="4.22" y1="4.22" x2="6.36" y2="6.36" /> | ||
| <line x1="17.64" y1="17.64" x2="19.78" y2="19.78" /> | ||
| <line x1="4.22" y1="19.78" x2="6.36" y2="17.64" /> | ||
| <line x1="17.64" y1="6.36" x2="19.78" y2="4.22" /> | ||
| </svg> | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add accessible label/state to the theme toggle and hide SVGs from AT
This makes the control understandable to screen readers while keeping the SVGs decorative.
- <button id="theme-toggle" class="theme-toggle-btn">
+ <button
+ id="theme-toggle"
+ class="theme-toggle-btn"
+ aria-label="Switch to dark mode"
+ aria-pressed="false"
+ title="Switch to dark mode">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"
- class="moon-icon">
+ class="moon-icon" aria-hidden="true" focusable="false">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
- stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sun-icon"
- style="display: none;">
+ stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sun-icon"
+ style="display: none;" aria-hidden="true" focusable="false">
<circle cx="12" cy="12" r="5" fill="currentColor" />📝 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 id="theme-toggle" class="theme-toggle-btn"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" | |
| class="moon-icon"> | |
| <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" | |
| stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sun-icon" | |
| style="display: none;"> | |
| <circle cx="12" cy="12" r="5" fill="currentColor" /> | |
| <line x1="12" y1="1" x2="12" y2="4" /> | |
| <line x1="12" y1="20" x2="12" y2="23" /> | |
| <line x1="1" y1="12" x2="4" y2="12" /> | |
| <line x1="20" y1="12" x2="23" y2="12" /> | |
| <line x1="4.22" y1="4.22" x2="6.36" y2="6.36" /> | |
| <line x1="17.64" y1="17.64" x2="19.78" y2="19.78" /> | |
| <line x1="4.22" y1="19.78" x2="6.36" y2="17.64" /> | |
| <line x1="17.64" y1="6.36" x2="19.78" y2="4.22" /> | |
| </svg> | |
| <button | |
| id="theme-toggle" | |
| class="theme-toggle-btn" | |
| aria-label="Switch to dark mode" | |
| aria-pressed="false" | |
| title="Switch to dark mode"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" | |
| class="moon-icon" aria-hidden="true" focusable="false"> | |
| <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" | |
| stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sun-icon" | |
| style="display: none;" aria-hidden="true" focusable="false"> | |
| <circle cx="12" cy="12" r="5" fill="currentColor" /> | |
| <line x1="12" y1="1" x2="12" y2="4" /> | |
| <line x1="12" y1="20" x2="12" y2="23" /> | |
| <line x1="1" y1="12" x2="4" y2="12" /> | |
| <line x1="20" y1="12" x2="23" y2="12" /> | |
| <line x1="4.22" y1="4.22" x2="6.36" y2="6.36" /> | |
| <line x1="17.64" y1="17.64" x2="19.78" y2="19.78" /> | |
| <line x1="4.22" y1="19.78" x2="6.36" y2="17.64" /> | |
| <line x1="17.64" y1="6.36" x2="19.78" y2="4.22" /> | |
| </svg> |
🤖 Prompt for AI Agents
index.html lines 26-44: the theme toggle button lacks an accessible label and
state and the decorative SVGs are exposed to assistive tech; add an aria-label
(e.g., "Toggle theme") or include visually hidden text inside the button, add an
explicit state attribute such as aria-pressed (updated dynamically to reflect
current theme), and mark both SVG icons as decorative (aria-hidden="true" and
focusable="false") so screen readers ignore them; ensure any JS that switches
icons also updates aria-pressed (true/false) to keep AT in sync.
Comment on lines
+27
to
+45
| <button id="theme-toggle" class="theme-toggle-btn"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" | ||
| class="moon-icon"> | ||
| <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path> | ||
| </svg> | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" | ||
| stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sun-icon" | ||
| style="display: none;"> | ||
| <circle cx="12" cy="12" r="5" fill="currentColor" /> | ||
| <line x1="12" y1="1" x2="12" y2="4" /> | ||
| <line x1="12" y1="20" x2="12" y2="23" /> | ||
| <line x1="1" y1="12" x2="4" y2="12" /> | ||
| <line x1="20" y1="12" x2="23" y2="12" /> | ||
| <line x1="4.22" y1="4.22" x2="6.36" y2="6.36" /> | ||
| <line x1="17.64" y1="17.64" x2="19.78" y2="19.78" /> | ||
| <line x1="4.22" y1="19.78" x2="6.36" y2="17.64" /> | ||
| <line x1="17.64" y1="6.36" x2="19.78" y2="4.22" /> | ||
| </svg> | ||
| </button> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Apply the same a11y improvements to the theme toggle
Mirror the ARIA fixes here and hide SVGs from AT.
- <button id="theme-toggle" class="theme-toggle-btn">
+ <button
+ id="theme-toggle"
+ class="theme-toggle-btn"
+ aria-label="Switch to dark mode"
+ aria-pressed="false"
+ title="Switch to dark mode">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"
- class="moon-icon">
+ class="moon-icon" aria-hidden="true" focusable="false">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
- stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sun-icon"
- style="display: none;">
+ stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sun-icon"
+ style="display: none;" aria-hidden="true" focusable="false">
<circle cx="12" cy="12" r="5" fill="currentColor" />📝 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 id="theme-toggle" class="theme-toggle-btn"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" | |
| class="moon-icon"> | |
| <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" | |
| stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sun-icon" | |
| style="display: none;"> | |
| <circle cx="12" cy="12" r="5" fill="currentColor" /> | |
| <line x1="12" y1="1" x2="12" y2="4" /> | |
| <line x1="12" y1="20" x2="12" y2="23" /> | |
| <line x1="1" y1="12" x2="4" y2="12" /> | |
| <line x1="20" y1="12" x2="23" y2="12" /> | |
| <line x1="4.22" y1="4.22" x2="6.36" y2="6.36" /> | |
| <line x1="17.64" y1="17.64" x2="19.78" y2="19.78" /> | |
| <line x1="4.22" y1="19.78" x2="6.36" y2="17.64" /> | |
| <line x1="17.64" y1="6.36" x2="19.78" y2="4.22" /> | |
| </svg> | |
| </button> | |
| <button | |
| id="theme-toggle" | |
| class="theme-toggle-btn" | |
| aria-label="Switch to dark mode" | |
| aria-pressed="false" | |
| title="Switch to dark mode"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" | |
| class="moon-icon" aria-hidden="true" focusable="false"> | |
| <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" | |
| stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sun-icon" | |
| style="display: none;" aria-hidden="true" focusable="false"> | |
| <circle cx="12" cy="12" r="5" fill="currentColor" /> | |
| <line x1="12" y1="1" x2="12" y2="4" /> | |
| <line x1="12" y1="20" x2="12" y2="23" /> | |
| <line x1="1" y1="12" x2="4" y2="12" /> | |
| <line x1="20" y1="12" x2="23" y2="12" /> | |
| <line x1="4.22" y1="4.22" x2="6.36" y2="6.36" /> | |
| <line x1="17.64" y1="17.64" x2="19.78" y2="19.78" /> | |
| <line x1="4.22" y1="19.78" x2="6.36" y2="17.64" /> | |
| <line x1="17.64" y1="6.36" x2="19.78" y2="4.22" /> | |
| </svg> | |
| </button> |
🤖 Prompt for AI Agents
In invoice.html around lines 27 to 45, the theme toggle button lacks ARIA
attributes and its decorative SVGs are exposed to assistive tech; add an
accessible label to the button (e.g., aria-label="Toggle theme" or aria-pressed
toggle state as appropriate) and mark both SVG icons as presentation by adding
aria-hidden="true" and focusable="false" (and remove any text content inside
them for AT), optionally include a visually-hidden live text node if you need to
announce state changes; ensure the button remains keyboard-focusable and that
only the button element conveys accessible state to screen readers.
Comment on lines
+24
to
33
| const themeToggleBtn = document.getElementById("theme-toggle"); | ||
| if (!themeToggleBtn) return; | ||
|
|
||
| // Add a class to the button for styling hover | ||
| if (isDark) { | ||
| themeToggleBtn.classList.add("sun-visible"); | ||
| } else { | ||
| themeToggleBtn.classList.remove("sun-visible"); | ||
| } | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add ARIA state/label to the theme toggle for accessibility
Expose the toggle state and the resulting action to screen readers.
const themeToggleBtn = document.getElementById("theme-toggle");
if (!themeToggleBtn) return;
// Add a class to the button for styling hover
if (isDark) {
themeToggleBtn.classList.add("sun-visible");
} else {
themeToggleBtn.classList.remove("sun-visible");
}
+ // A11y: reflect state and action
+ themeToggleBtn.setAttribute("aria-pressed", String(isDark));
+ const nextLabel = isDark ? "Switch to light mode" : "Switch to dark mode";
+ themeToggleBtn.setAttribute("aria-label", nextLabel);
+ themeToggleBtn.setAttribute("title", nextLabel);📝 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
| const themeToggleBtn = document.getElementById("theme-toggle"); | |
| if (!themeToggleBtn) return; | |
| // Add a class to the button for styling hover | |
| if (isDark) { | |
| themeToggleBtn.classList.add("sun-visible"); | |
| } else { | |
| themeToggleBtn.classList.remove("sun-visible"); | |
| } | |
| } | |
| const themeToggleBtn = document.getElementById("theme-toggle"); | |
| if (!themeToggleBtn) return; | |
| // Add a class to the button for styling hover | |
| if (isDark) { | |
| themeToggleBtn.classList.add("sun-visible"); | |
| } else { | |
| themeToggleBtn.classList.remove("sun-visible"); | |
| } | |
| // A11y: reflect state and action | |
| themeToggleBtn.setAttribute("aria-pressed", String(isDark)); | |
| const nextLabel = isDark ? "Switch to light mode" : "Switch to dark mode"; | |
| themeToggleBtn.setAttribute("aria-label", nextLabel); | |
| themeToggleBtn.setAttribute("title", nextLabel); | |
| } |
🤖 Prompt for AI Agents
In script.js around lines 24-33, the theme-toggle button is not exposing its
state/action to assistive tech; add an accessible state and label by setting
aria-pressed (true when dark, false when light) and an appropriate aria-label
(e.g., "Switch to light theme" when isDark is true, "Switch to dark theme" when
false). Apply these attributes when initializing the button (in the shown block)
and update them inside the theme toggle handler whenever the theme changes; if
the element is not a native button ensure it has role="button" and is
keyboard-focusable.
Comment on lines
+152
to
+156
| .theme-toggle-btn.sun-visible:hover { | ||
| color: #f59e0b; | ||
| transform: scale(1.1) rotate(15deg); | ||
| background-color: rgba(253, 230, 138, 0.2); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Mirror hover styling on keyboard focus for accessibility
Add a :focus-visible variant so keyboard users get the same affordance. Include an outline for contrast.
.theme-toggle-btn.sun-visible:hover {
color: #f59e0b;
transform: scale(1.1) rotate(15deg);
background-color: rgba(253, 230, 138, 0.2);
}
+
+.theme-toggle-btn.sun-visible:focus-visible {
+ color: #f59e0b;
+ transform: scale(1.1) rotate(15deg);
+ background-color: rgba(253, 230, 138, 0.2);
+ outline: 2px solid #f59e0b;
+ outline-offset: 2px;
+}🤖 Prompt for AI Agents
In style.css around lines 152 to 156, the .theme-toggle-btn.sun-visible hover
rules are not applied to keyboard focus; add a matching :focus-visible selector
that duplicates the color, transform and background-color rules and also add a
visible high-contrast outline and outline-offset for accessibility (use
:focus-visible rather than :focus so only keyboard users see it); ensure the
visual treatment matches the hover affordance and include an outline color that
contrasts with the background.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Adjusted the icon for the sun and changed the color when it is visible during hover
Summary by CodeRabbit
Refactor
New Features
Style