Fix auto light dark color scheme2 #296
Conversation
✅ Deploy Preview for graypaper-reader ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughUpdates PdfViewer loading markup and CSS so the loading overlay inherits the page background and includes ARIA attributes and a fade-in class. Theme handling moves color-scheme control from HTML selectors to a root-level Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant App
participant PdfViewer
participant DOM
participant CSS as "CSS (root/.dark + component)"
User->>App: Open document
App->>PdfViewer: mount / request PDF
PdfViewer->>DOM: render loading div with classes + ARIA
DOM->>CSS: resolve styles (fade-in, bg-inherit)
CSS-->>DOM: overlay ::after inherits page background
PdfViewer->>DOM: render pages when pdfDocument available
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. 📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (1)**/*.{js,jsx,ts,tsx}⚙️ CodeRabbit configuration file
Files:
🔇 Additional comments (1)
✨ 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
Status, Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/components/PdfViewer/PdfViewer.css (1)
32-34: Make the overlay override resilient to upstreambackgroundshorthandsUse
backgroundinstead ofbackground-colorto reliably trump pdfjs-dist’sbackgrounddeclarations (if any) on the pseudo-element.-.pdfViewer .page.loading::after{ - background-color: inherit; -} +.pdfViewer .page.loading::after{ + /* Ensure we override any `background` shorthand from pdfjs-dist */ + background: inherit; +}
📜 Review details
Configuration used: Path: .coderabbit.yaml
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)
src/components/PdfViewer/PdfViewer.css(1 hunks)src/components/PdfViewer/PdfViewer.tsx(1 hunks)src/index.css(1 hunks)src/tailwind.css(0 hunks)
💤 Files with no reviewable changes (1)
- src/tailwind.css
🧰 Additional context used
📓 Path-based instructions (2)
**/*.css
⚙️ CodeRabbit configuration file
Review CSS code with focus on Tailwind CSS 4.x best practices and conventions. Ensure compatibility with Tailwind 4.x features and syntax.
Files:
src/components/PdfViewer/PdfViewer.csssrc/index.css
**/*.{js,jsx,ts,tsx}
⚙️ CodeRabbit configuration file
When reviewing Tailwind CSS classes, ensure they follow Tailwind 4.x conventions and suggest modern 4.x alternatives for deprecated patterns.
Files:
src/components/PdfViewer/PdfViewer.tsx
🔇 Additional comments (1)
src/index.css (1)
1-8: Action Required: Please Confirm Dark-Mode Toggle ScopeI searched the codebase for any
classList.add/remove/toggle('dark')invocations and found no matches. Without knowing how your dark-mode toggle is implemented, it’s unclear whether.darkis ever applied at the root level (<html>/:root). Please verify that your toggle mechanism targets the root element to ensure the CSS change below will work as intended.• Search performed:
rg -nP 'classList\.(add|remove|toggle)\(\s*["'\'']dark["'\'']\s*\)'└─ no matches found
• If you use a framework-specific API (e.g. React, Vue, Angular), confirm it adds.darkto<html>or<body>, not deeper in the DOM.Suggested optional refactor (scope dark mode to root):
- .dark { + :root.dark { color-scheme: dark; }
1 participant
Summary by CodeRabbit
Style
Accessibility
Bug Fixes