Skip to content

Fixes dark mode styling for admonition blocks on documentation pages #82 #94

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 5, 2025
Merged

Fixes dark mode styling for admonition blocks on documentation pages #82 #94

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
243 changes: 243 additions & 0 deletions opsimate-docs/src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -877,3 +877,246 @@ button[class*="toggle"] {
.admonitionContent_pbrs p a:hover {
text-decoration-color: currentColor;
}

/* ===== DARK MODE ADMONITION STYLES ===== */

/* Base admonition styles for dark mode */
[data-theme="dark"] .admonition {
background-color: #1a1a1a !important;
border: 1px solid #333333 !important;
color: #e6eef6 !important;
}

/* Tip admonition (Our Mission block) - Using a more harmonious indigo shade */
[data-theme="dark"] .admonition-tip {
background-color: #252a4b !important; /* Darker, more muted indigo */
border: 1px solid #3949ab !important; /* Primary indigo color */
color: #e3f2fd !important;
}

[data-theme="dark"] .admonition-tip .admonitionHeading {
background-color: rgba(57, 73, 171, 0.2) !important; /* Transparent indigo */
color: #bbdefb !important; /* Light blue text */
border-bottom: 1px solid #3949ab !important;
}

/* Info admonition - Using a harmonious blue shade */
[data-theme="dark"] .admonition-info {
background-color: #1a237e !important; /* Darker indigo-blue */
border: 1px solid #303f9f !important; /* Slightly lighter blue */
color: #e3f2fd !important;
}

[data-theme="dark"] .admonition-info .admonitionHeading {
background-color: rgba(48, 63, 159, 0.2) !important; /* Transparent blue */
color: #bbdefb !important;
border-bottom: 1px solid #303f9f !important;
}

/* Caution admonition - Using a harmonious amber shade */
[data-theme="dark"] .admonition-caution {
background-color: #342d1d !important; /* Dark amber background */
border: 1px solid #5d4037 !important; /* Brownish amber border */
color: #ffecb3 !important;
}

[data-theme="dark"] .admonition-caution .admonitionHeading {
background-color: rgba(93, 64, 55, 0.2) !important; /* Transparent amber */
color: #ffecb3 !important;
border-bottom: 1px solid #5d4037 !important;
}

/* Danger admonition - Using a harmonious red shade */
[data-theme="dark"] .admonition-danger {
background-color: #2d1b1b !important; /* Dark red background */
border: 1px solid #6d4c41 !important; /* Brownish red border */
color: #ffcdd2 !important;
}

[data-theme="dark"] .admonition-danger .admonitionHeading {
background-color: rgba(109, 76, 65, 0.2) !important; /* Transparent red */
color: #ffcdd2 !important;
border-bottom: 1px solid #6d4c41 !important;
}

/* Ensure content text is properly styled */
[data-theme="dark"] .admonitionContent_pbrs {
color: inherit !important;
}

[data-theme="dark"] .admonitionContent_pbrs p {
color: inherit !important;
margin: 0 !important;
}

[data-theme="dark"] .admonitionContent_pbrs p a {
color: inherit !important;
text-decoration: underline !important;
}

/* ===== ALERT STYLES FOR BOTH LIGHT AND DARK MODES ===== */

/* Base alert styles for consistent appearance */
.alert {
color: #e6eef6 !important;
}

/* Light mode base styles */
html[data-theme="light"] .alert,
[data-theme="light"] .alert {
background-color: #e8f5e9 !important; /* Light green background */
border: 1px solid #4caf50 !important; /* Green border */
color: #2e7d32 !important; /* Dark green text */
}

/* Dark mode base styles */
html[data-theme="dark"] .alert,
[data-theme="dark"] .alert {
background-color: #121212 !important; /* Dark background */
border: 1px solid #333333 !important; /* Dark border */
color: #e6eef6 !important; /* Light text */
}

/* Tip alert - Light mode */
html[data-theme="light"] .alert--tip,
[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 {
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 {
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 {
background-color: #ffebee !important; /* Light red background */
border: 1px solid #f44336 !important; /* Red border */
color: #c62828 !important; /* Dark red text */
}

/* Tip alert - Dark mode */
html[data-theme="dark"] .alert--tip,
[data-theme="dark"] .alert--tip {
background-color: #121212 !important; /* Dark background */
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; /* Dark background */
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; /* Dark background */
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; /* Dark background */
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;
}