feat: Add custom dark/light theme to Swagger UI#4237
Open
HarshitVerma109 wants to merge 2 commits intoOWASP:mainfrom
Open
feat: Add custom dark/light theme to Swagger UI#4237HarshitVerma109 wants to merge 2 commits intoOWASP:mainfrom
HarshitVerma109 wants to merge 2 commits intoOWASP:mainfrom
Conversation
Contributor
Summary by CodeRabbit
WalkthroughAdds a new Swagger UI template and a comprehensive theme stylesheet providing light/dark palettes, theme initialization/switching logic, CSRF handling, and granular UI styling for Swagger components. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Suggested reviewers
🚥 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)
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. Comment |
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@backend/static/css/swagger-theme.css`:
- Around line 30-34: The .btn.execute rule in swagger-theme.css uses
background-color and border-color values that yield insufficient contrast for
normal text; update the selector html .swagger-ui .btn.execute (and the
equivalent rule near lines 115-119) to use slightly darker background/border
colors—replace the light-mode color with `#1a6fc2` and the dark-mode color with
`#2563eb` while keeping color: `#ffffff`; ensure both background-color and
border-color are changed so the button meets WCAG contrast targets for normal
text and re-run a contrast check after the update.
In `@backend/templates/ninja/swagger.html`:
- Line 3: The top-level <html> element in backend/templates/ninja/swagger.html
lacks a lang attribute required for accessibility; update the <html> tag (the
root element in this template) to include an appropriate lang value (e.g., "en"
or a template/i18n variable) so screen readers and WCAG checks can detect the
document language.
- Around line 45-51: The Django template currently splits the template variable
braces across lines so "{{ swagger_settings | safe }}" won't render; update the
script with id "swagger-settings" to use contiguous Django variable tags and
filter syntax (i.e., use {{ swagger_settings|safe }} as a single token) so the
swagger_settings JSON is rendered into the script block for Swagger UI
initialization.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: e29bd1fc-4ea0-42ca-bd24-9010f6c6969c
📒 Files selected for processing (2)
backend/static/css/swagger-theme.cssbackend/templates/ninja/swagger.html
Contributor
There was a problem hiding this comment.
2 issues found across 2 files
Confidence score: 3/5
- Possible Swagger UI breakage:
backend/templates/ninja/swagger.htmlmay output literal braces becauseswagger_settingslacks proper{{ ... }}wrapping, which could invalidate the JSON. - Dark mode styling risk in
backend/static/css/swagger-theme.css: an unscoped!importantlight text rule can leave controls/text with incorrect colors. - Score reflects a concrete user-facing issue (Swagger JSON rendering) plus a medium-severity UI regression risk.
- Pay close attention to
backend/templates/ninja/swagger.htmlandbackend/static/css/swagger-theme.css- template rendering correctness and dark-mode overrides.
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="backend/templates/ninja/swagger.html">
<violation number="1" location="backend/templates/ninja/swagger.html:48">
P2: The `swagger_settings` template variable is not wrapped in a valid `{{ ... }}` tag, so Django will output literal braces and break the JSON used by Swagger UI.</violation>
</file>
<file name="backend/static/css/swagger-theme.css">
<violation number="1" location="backend/static/css/swagger-theme.css:46">
P2: Unscoped `!important` light text rule is not fully overridden in dark mode, leaving several model controls/text with light-theme color values.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
|
Contributor
There was a problem hiding this comment.
♻️ Duplicate comments (1)
backend/templates/ninja/swagger.html (1)
45-51:⚠️ Potential issue | 🔴 CriticalRender
swagger_settingsas a single Django template expression.This block still uses malformed template syntax, so the page will emit literal braces/text instead of the JSON config that
swagger-ui-init.jsexpects.🐛 Proposed fix
<script type="application/json" id="swagger-settings"> - { - { - swagger_settings | safe - } - } + {{ swagger_settings|safe }} </script>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@backend/templates/ninja/swagger.html` around lines 45 - 51, The template renders swagger_settings with extra braces so the JSON block emits literal braces; change the script block to output swagger_settings as a single Django expression (use the template variable swagger_settings inside the script with the safe filter) so the element with id "swagger-settings" contains valid JSON for swagger-ui-init.js to consume; update the <script id="swagger-settings"> content to a single {{ swagger_settings|safe }} expression (preserving the id and type attributes) so the JSON config is rendered correctly.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@backend/templates/ninja/swagger.html`:
- Around line 45-51: The template renders swagger_settings with extra braces so
the JSON block emits literal braces; change the script block to output
swagger_settings as a single Django expression (use the template variable
swagger_settings inside the script with the safe filter) so the element with id
"swagger-settings" contains valid JSON for swagger-ui-init.js to consume; update
the <script id="swagger-settings"> content to a single {{ swagger_settings|safe
}} expression (preserving the id and type attributes) so the JSON config is
rendered correctly.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 7016c928-9aa6-4c36-b8b7-93f0e6056004
📒 Files selected for processing (2)
backend/static/css/swagger-theme.cssbackend/templates/ninja/swagger.html
🚧 Files skipped from review as they are similar to previous changes (1)
- backend/static/css/swagger-theme.css
Contributor
Author
|
@arkid15r , please review it and let me know if any changes are required. |
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.
Proposed change
Resolves #4197
Added a custom Dark/Light mode theme to the Swagger UI to perfectly match the OWASP Nest.
Checklist
make check-testlocally: all warnings addressed, tests passed