resolve style application on GitHub and complex websites#179
Open
soumojit-D48 wants to merge 1 commit intodeveloper-diganta:mainfrom
Open
resolve style application on GitHub and complex websites#179soumojit-D48 wants to merge 1 commit intodeveloper-diganta:mainfrom
soumojit-D48 wants to merge 1 commit intodeveloper-diganta:mainfrom
Conversation
📝 WalkthroughWalkthroughThis change refactors the color theming mechanism in Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
![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
🤖 Fix all issues with AI agents
In `@webpage-assets/js/content.js`:
- Around line 185-203: Remove the global reset and duplicate background block in
the style built for styleElement: delete the `* { background-color: transparent
!important; }` rule and remove the repeated selector block so only one set of
container selectors is present; ensure you keep the single container-targeting
CSS that applies `background-color: ${request.backgroundColor} !important`
(refer to styleElement and request.backgroundColor) so buttons, alerts, and
other components retain their native backgrounds and states.
Comment on lines
+185
to
+203
| const styleElement = document.createElement('style'); | ||
| styleElement.id = 'dino-custom-styles'; | ||
| styleElement.textContent = ` | ||
| html, body, [data-turbo-body], .application-main, | ||
| .Box, .Box-body, .markdown-body, .container, | ||
| .main-content, .content, .wrapper, .page, | ||
| .layout, .section, .panel, .card, .modal { | ||
| background-color: ${request.backgroundColor} !important; | ||
| } | ||
| * { | ||
| background-color: transparent !important; | ||
| } | ||
| html, body, [data-turbo-body], .application-main, | ||
| .Box, .Box-body, .markdown-body, .container, | ||
| .main-content, .content, .wrapper, .page, | ||
| .layout, .section, .panel, .card, .modal { | ||
| background-color: ${request.backgroundColor} !important; | ||
| } | ||
| `; |
There was a problem hiding this comment.
Avoid the global * background reset; it wipes component styling.
* { background-color: transparent !important; } removes backgrounds from buttons, alerts, and code blocks, which can reduce contrast and hide UI state cues. Consider dropping the global reset and relying on container selectors (or limiting the reset only to container elements).
🛠️ Suggested change (remove the global reset + duplicate block)
styleElement.textContent = `
html, body, [data-turbo-body], .application-main,
.Box, .Box-body, .markdown-body, .container,
.main-content, .content, .wrapper, .page,
.layout, .section, .panel, .card, .modal {
background-color: ${request.backgroundColor} !important;
}
- * {
- background-color: transparent !important;
- }
- html, body, [data-turbo-body], .application-main,
- .Box, .Box-body, .markdown-body, .container,
- .main-content, .content, .wrapper, .page,
- .layout, .section, .panel, .card, .modal {
- background-color: ${request.backgroundColor} !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
| const styleElement = document.createElement('style'); | |
| styleElement.id = 'dino-custom-styles'; | |
| styleElement.textContent = ` | |
| html, body, [data-turbo-body], .application-main, | |
| .Box, .Box-body, .markdown-body, .container, | |
| .main-content, .content, .wrapper, .page, | |
| .layout, .section, .panel, .card, .modal { | |
| background-color: ${request.backgroundColor} !important; | |
| } | |
| * { | |
| background-color: transparent !important; | |
| } | |
| html, body, [data-turbo-body], .application-main, | |
| .Box, .Box-body, .markdown-body, .container, | |
| .main-content, .content, .wrapper, .page, | |
| .layout, .section, .panel, .card, .modal { | |
| background-color: ${request.backgroundColor} !important; | |
| } | |
| `; | |
| const styleElement = document.createElement('style'); | |
| styleElement.id = 'dino-custom-styles'; | |
| styleElement.textContent = ` | |
| html, body, [data-turbo-body], .application-main, | |
| .Box, .Box-body, .markdown-body, .container, | |
| .main-content, .content, .wrapper, .page, | |
| .layout, .section, .panel, .card, .modal { | |
| background-color: ${request.backgroundColor} !important; | |
| } | |
| `; |
🤖 Prompt for AI Agents
In `@webpage-assets/js/content.js` around lines 185 - 203, Remove the global reset
and duplicate background block in the style built for styleElement: delete the
`* { background-color: transparent !important; }` rule and remove the repeated
selector block so only one set of container selectors is present; ensure you
keep the single container-targeting CSS that applies `background-color:
${request.backgroundColor} !important` (refer to styleElement and
request.backgroundColor) so buttons, alerts, and other components retain their
native backgrounds and states.
Author
|
Hi @developer-diganta, Check this PR Helpful or not, let me know, Thank you. |
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
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.
Fixes #174
Description
Fixed the issue where selected style options (background color, font color) were not being applied on GitHub and other complex websites.
Problem: GitHub's nested DOM structure and high CSS specificity prevented Dino's style changes from working properly. The existing approach only targeted basic elements like
bodyand*, which was insufficient.Solution Implemented:
<style>elements with unique IDs for proper cleanup.application-main,.Box,.Box-body,.markdown-body,.container,.main-content, etc.!importantto override GitHub's existing styles.color-fg-default,.Header-link,.btn,.Link--primary, etc.Files Modified:
webpage-assets/js/content.js(lines 174-241): Enhanced backgroundColor and fontColor actionsThe fix ensures that background and font color changes now work correctly across all GitHub pages and similar complex websites with nested structures.
Screenshots
Before
After
Before Fix:
After Fix:
Types of changes
Checklist:
I am a Apertre3.0 Participant
Summary by CodeRabbit