feat(design): implement dark gray background for code listings with bright syntax highlighting

This commit is contained in:
Vijay Janapa Reddi
2025-08-04 13:47:17 -04:00
parent cbfabcea20
commit ed47e6d196

View File

@@ -1399,7 +1399,7 @@ figcaption.quarto-float-caption-top {
/* Code content styling within listings */
.listing .sourceCode {
padding: 0.75rem 1rem !important; /* Reduced padding to eliminate dead space */
background-color: #fdfdfd !important; /* Very subtle off-white */
background-color: #2d3748 !important; /* Dark gray background for code */
margin: 0 !important; /* Ensure no margin */
border: none !important; /* Remove all borders */
}
@@ -1435,41 +1435,41 @@ figcaption.quarto-float-caption-top {
z-index: 1;
}
/* Ensure code syntax highlighting works well with the new color scheme */
/* Ensure code syntax highlighting works well with dark background */
.listing .sourceCode .kw,
.listing .sourceCode .keyword {
color: #A51C30 !important; /* Harvard crimson for keywords */
color: #f56565 !important; /* Bright red for keywords on dark background */
}
.listing .sourceCode .nb,
.listing .sourceCode .number {
color: #3A70B0 !important; /* Muted blue for numbers */
color: #63b3ed !important; /* Bright blue for numbers on dark background */
}
.listing .sourceCode .s1,
.listing .sourceCode .string {
color: #4a7c59 !important; /* Forest green for strings - from callout-success */
color: #68d391 !important; /* Bright green for strings on dark background */
}
.listing .sourceCode .n,
.listing .sourceCode .name {
color: #64748b !important; /* Slate for names/variables - from callout-secondary */
color: #e2e8f0 !important; /* Light gray for names/variables on dark background */
}
/* Additional syntax elements using the complete callout palette */
.listing .sourceCode .o,
.listing .sourceCode .operator {
color: #5C6FB2 !important; /* Muted slate blue for operators */
color: #a0aec0 !important; /* Light gray for operators on dark background */
}
.listing .sourceCode .c1,
.listing .sourceCode .comment {
color: #64748b !important; /* Slate for comments - from callout-secondary */
color: #718096 !important; /* Medium gray for comments on dark background */
}
.listing .sourceCode .k,
.listing .sourceCode .keyword {
color: #A51C30 !important; /* Harvard crimson for keywords */
color: #f56565 !important; /* Bright red for keywords on dark background */
}
.listing .sourceCode .kt,