fix: restore dark code blocks with custom CSS

The Tailwind CDN typography plugin configuration wasn't applying correctly in the browser. Reverted to using custom CSS with !important flags to ensure dark code block backgrounds are properly applied. - Code blocks: #14151f (slightly darker than main background) - Inline code: #1a1b26 (matches main background) - Text: #c0caf5 (light text for readability) This is a pragmatic fix that ensures the documentation remains readable while we investigate the Tailwind CDN typography plugin issue.
2026-02-02 21:28:16 -05:00
parent e43e1f1f26
commit e36320bb2c
2 changed files with 42 additions and 45 deletions
@@ -33,26 +33,23 @@ templ DocsLayout(nav Navigation, doc Document, user User) {
 								border: '#414868',
 								accent: '#7aa2f7',
 							},
-							typography: ({ theme }) => ({
-								invert: {
-									css: {
-										code: {
-											backgroundColor: theme('colors.background.primary'),
-											color: theme('colors.text.primary'),
-										},
-										'pre code': {
-											backgroundColor: 'transparent',
-										},
-										pre: {
-											backgroundColor: '#14151f',
-										},
-									},
-								},
-							}),
-						}
+						},
 					}
 				}
+			}
 			</script>
+			<style>
+				.prose pre {
+					background-color: #14151f !important;
+				}
+				.prose code {
+					background-color: #1a1b26 !important;
+					color: #c0caf5 !important;
+				}
+				.prose pre code {
+					background-color: transparent !important;
+				}
+			</style>
 		</head>
 		<body class="bg-background-primary text-text-primary font-sans antialiased">
 			<!-- Mobile Menu Button -->