Fixes dark mode styling for admonition blocks on documentation pages #82 #94
Conversation
…erts - Defined dark mode base styles for admonitions with consistent background, border, and text colors - Customized tip, info, caution, and danger admonitions with harmonious dark color schemes - Ensured proper styling of admonition content including paragraphs and links in dark mode - Added alert styles for both light and dark themes with distinct color palettes per alert type - Applied consistent alert content styling for text and links in all themes - Included root-level CSS variable override for alert background in dark mode - Enhanced specificity for dark mode alert content to maintain color inheritance and link decoration
|
@Nexvyn is attempting to deploy a commit to the idan lodzki's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughExtends CSS with comprehensive dark-mode styling for admonitions and alerts, including variants for tip, info, caution, and danger. Adds unified alert styling across themes with variant-specific classes and color rules. Removes obsolete integration-related styles. Includes dark-mode overrides and explicit selectors for consistent appearance. Changes
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
opsimate-docs/src/css/custom.css (2)
1013-1042: Consolidate duplicate dark mode alert style rules.The dark mode alert styles are defined twice with minimal differences:
- Lines 1013–1042: Initial dark mode alert definitions
- Lines 1067–1104: Repeated definitions with identical rules
The second block appears to be a fallback or override, but the duplication makes maintenance harder. Consolidate to a single set of rules.
-/* Tip alert - Dark mode */ -html[data-theme="dark"] .alert--tip, -[data-theme="dark"] .alert--tip { - background-color: #121212 !important; - border: 1px solid #3949ab !important; /* Indigo border */ - color: #e3f2fd !important; /* Light text */ -} - -/* Info alert - Dark mode */ -html[data-theme="dark"] .alert--info, -[data-theme="dark"] .alert--info { - background-color: #121212 !important; - border: 1px solid #303f9f !important; /* Indigo blue border */ - color: #e3f2fd !important; /* Light text */ -} - -/* Caution alert - Dark mode */ -html[data-theme="dark"] .alert--caution, -[data-theme="dark"] .alert--caution { - background-color: #121212 !important; - border: 1px solid #5d4037 !important; /* Brownish amber border */ - color: #ffecb3 !important; /* Light amber text */ -} - -/* Danger alert - Dark mode */ -html[data-theme="dark"] .alert--danger, -[data-theme="dark"] .alert--danger { - background-color: #121212 !important; - border: 1px solid #6d4c41 !important; /* Brownish red border */ - color: #ffcdd2 !important; /* Light red text */ -} - -/* Ensure alert content is properly styled */ -.alert__content { - color: inherit !important; -} - -.alert__content p { - color: inherit !important; - margin: 0 !important; -} - -.alert__content a { - color: inherit !important; - text-decoration: underline !important; -} - -/* ===== DARK MODE SPECIFIC OVERRIDES (if needed) ===== */ - -/* Dark mode alert background */ -[data-theme="dark"]:root { - --ifm-alert-background-color: #121212 !important; -} - -/* Alternative approach - direct styling for alerts in dark mode */ -html[data-theme="dark"] .alert, -[data-theme="dark"] .alert { - background-color: #121212 !important; - border: 1px solid #333333 !important; - color: #e6eef6 !important; -} - -/* Tip alert (Our Mission block) - Dark mode */ -html[data-theme="dark"] .alert--tip, -[data-theme="dark"] .alert--tip { - background-color: #121212 !important; - border: 1px solid #3949ab !important; /* Primary indigo color */ - color: #e3f2fd !important; -} - -/* Info alert - Dark mode */ -html[data-theme="dark"] .alert--info, -[data-theme="dark"] .alert--info { - background-color: #121212 !important; - border: 1px solid #303f9f !important; /* Indigo blue */ - color: #e3f2fd !important; -} - -/* Caution alert - Dark mode */ -html[data-theme="dark"] .alert--caution, -[data-theme="dark"] .alert--caution { - background-color: #121212 !important; - border: 1px solid #5d4037 !important; /* Brownish amber */ - color: #ffecb3 !important; -} - -/* Danger alert - Dark mode */ -html[data-theme="dark"] .alert--danger, -[data-theme="dark"] .alert--danger { - background-color: #121212 !important; - border: 1px solid #6d4c41 !important; /* Brownish red */ - color: #ffcdd2 !important; -} - -/* Ensure alert content is properly styled with higher specificity for dark mode */ -html[data-theme="dark"] .alert__content, -[data-theme="dark"] .alert__content { - color: inherit !important; -} - -html[data-theme="dark"] .alert__content p, -[data-theme="dark"] .alert__content p { - color: inherit !important; - margin: 0 !important; -} - -html[data-theme="dark"] .alert__content a, -[data-theme="dark"] .alert__content a { - color: inherit !important; - text-decoration: underline !important; -} +/* Ensure alert content is properly styled */ +.alert__content { + color: inherit !important; +} + +.alert__content p { + color: inherit !important; + margin: 0 !important; +} + +.alert__content a { + color: inherit !important; + text-decoration: underline !important; +}Also applies to: 1067-1104
960-1010: Redundant selector patterns across light and dark alert styling.Throughout lines 960–1010, selectors like
html[data-theme="light"] .alertand[data-theme="light"] .alertappear together with identical rules. Thehtmlprefix adds unnecessary specificity without benefit. Simplify to use only[data-theme="light"]or[data-theme="dark"]consistently.-/* Light mode base styles */ -html[data-theme="light"] .alert, -[data-theme="light"] .alert { +/* Light mode base styles */ +[data-theme="light"] .alert { background-color: #e8f5e9 !important; /* Light green background */ border: 1px solid #4caf50 !important; /* Green border */ color: #2e7d32 !important; /* Dark green text */ } -/* Tip alert - Light mode */ -html[data-theme="light"] .alert--tip, -[data-theme="light"] .alert--tip { +/* Tip alert - Light mode */ +[data-theme="light"] .alert--tip { background-color: #e8f5e9 !important; /* Light green background */ border: 1px solid #4caf50 !important; /* Green border */ color: #2e7d32 !important; /* Dark green text */ } -/* Info alert - Light mode */ -html[data-theme="light"] .alert--info, -[data-theme="light"] .alert--info { +/* Info alert - Light mode */ +[data-theme="light"] .alert--info { background-color: #e3f2fd !important; /* Light blue background */ border: 1px solid #2196f3 !important; /* Blue border */ color: #1565c0 !important; /* Dark blue text */ } -/* Caution alert - Light mode */ -html[data-theme="light"] .alert--caution, -[data-theme="light"] .alert--caution { +/* Caution alert - Light mode */ +[data-theme="light"] .alert--caution { background-color: #fff8e1 !important; /* Light amber background */ border: 1px solid #ffc107 !important; /* Amber border */ color: #ff8f00 !important; /* Dark amber text */ } -/* Danger alert - Light mode */ -html[data-theme="light"] .alert--danger, -[data-theme="light"] .alert--danger { +/* Danger alert - Light mode */ +[data-theme="light"] .alert--danger { background-color: #ffebee !important; /* Light red background */ border: 1px solid #f44336 !important; /* Red border */ color: #c62828 !important; /* Dark red text */ }Apply the same simplification to dark mode selectors (lines 1013–1042 and 1067–1104), removing the
html[data-theme="dark"]prefix variants.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
opsimate-docs/src/css/custom.css(1 hunks)
🔇 Additional comments (2)
opsimate-docs/src/css/custom.css (2)
1045-1057: Alert content styling is properly scoped and inherits parent colors well.The
.alert__contentrules ensure text and links within alerts inherit the variant-specific colors, maintaining visual consistency and reducing the need for per-variant overrides.
881-955: All color combinations pass WCAG 2.1 accessibility standards with substantial margins.The dark mode admonition styling is compliant: Caution (11.63:1), Danger (11.61:1), Tip heading (12.39:1), and Info heading (9.43:1) all exceed the WCAG AA minimum of 4.5:1, with most exceeding AAA standards (7:1). The code requires no accessibility improvements.
2 participants
Issue Reference
Fixes dark mode styling for admonition blocks on documentation pages #82
What Was Changed
Enhanced the dark mode styling for all admonition blocks (tip, info, caution, danger) to better align with the dark theme palette, with special focus on the "Our Mission" block on the Welcome page.
Specifically updated:
.admonition-tip(Our Mission block) - Now uses a cohesive indigo background that matches the overall dark theme.admonition-info- Uses a dark blue background that fits with the color scheme.admonition-caution- Uses a dark gray background with amber text for better contrast.admonition-danger- Uses a dark red background with light red text for clear danger indicationWhy Was It Changed
The "Our Mission" block and other admonition blocks on the Welcome page looked mismatched and stood out awkwardly from the rest of the page in dark mode. The previous styling didn't align with the dark theme palette, creating a disjointed user experience.
These changes ensure:
Screenshots
Summary by CodeRabbit