Gabriel Vidal
6b55c405f7
The `dark` typography variant only overrode the base text colour, so `strong` and inline `code` kept the light-theme near-black from the base prose theme and were close to unreadable on the dark background, as were table rules. The new article leans on all three heavily, which is how this surfaced. Adds dark overrides for strong, code (+ its backtick pseudo-elements), thead th, tbody row borders and hr. Pre-existing for every post, not just the new one. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
105 lines
3.9 KiB
JavaScript
105 lines
3.9 KiB
JavaScript
const { fontFamily } = require('tailwindcss/defaultTheme')
|
|
const config = require('./tailwind.theme.config.cjs')
|
|
/**
|
|
* Find the applicable theme color palette, or use the default one
|
|
*/
|
|
const themeConfig = process.env.THEME_KEY && config[process.env.THEME_KEY] ? config[process.env.THEME_KEY] : config.default
|
|
const { colors } = themeConfig
|
|
module.exports = {
|
|
darkMode: 'class',
|
|
content: [
|
|
'./public/**/*.html',
|
|
// Posts are authored with raw HTML + utility classes (images, callouts),
|
|
// so markdown has to be scanned too — otherwise those classes are only
|
|
// emitted by luck, when some .astro file happens to use them as well.
|
|
'./src/**/*.{astro,js,ts,md,mdx}'
|
|
],
|
|
safelist: ['dark'],
|
|
theme: {
|
|
fontFamily: {
|
|
sans: ['Fira Code', ...fontFamily.sans],
|
|
},
|
|
extend: {
|
|
colors: {
|
|
theme: {
|
|
...colors
|
|
}
|
|
},
|
|
typography: (theme) => ({
|
|
dark: {
|
|
css: {
|
|
color: theme("colors.gray.200"),
|
|
blockquote: {
|
|
color: colors.dark.primary,
|
|
borderColor: colors.primary
|
|
},
|
|
'blockquote > p::before, p::after': {
|
|
color: colors.primary,
|
|
},
|
|
// The base prose theme colours `strong` and inline `code`
|
|
// near-black for a light background; without these two
|
|
// overrides bold text and inline code are barely legible
|
|
// once the dark class is on.
|
|
strong: {
|
|
color: theme("colors.gray.100"),
|
|
},
|
|
code: {
|
|
color: colors.dark.primary,
|
|
},
|
|
'code::before, code::after': {
|
|
color: colors.dark.primary,
|
|
},
|
|
'thead th': {
|
|
color: theme("colors.gray.100"),
|
|
borderBottomColor: theme("colors.gray.600"),
|
|
},
|
|
'tbody tr': {
|
|
borderBottomColor: theme("colors.gray.700"),
|
|
},
|
|
hr: {
|
|
borderColor: theme("colors.gray.700"),
|
|
},
|
|
},
|
|
},
|
|
DEFAULT: {
|
|
css: {
|
|
a: {
|
|
color: colors.dark.primary,
|
|
'&:hover': {
|
|
color: colors.primary,
|
|
},
|
|
},
|
|
blockquote: {
|
|
color: colors.primary,
|
|
fontSize: theme("fontSize.2xl"),
|
|
borderColor: colors.dark.primary,
|
|
},
|
|
'blockquote > p::before, p::after': {
|
|
color: colors.dark.primary,
|
|
},
|
|
h1: {
|
|
color: colors.dark.secondary,
|
|
},
|
|
h2: {
|
|
color: colors.dark.secondary,
|
|
},
|
|
h3: {
|
|
color: colors.dark.secondary,
|
|
},
|
|
}
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
variants: {
|
|
extend: { typography: ["dark"] }
|
|
},
|
|
plugins: [
|
|
require('@tailwindcss/typography'),
|
|
require('@tailwindcss/forms'),
|
|
require('@tailwindcss/line-clamp'),
|
|
require('@tailwindcss/aspect-ratio'),
|
|
require('tailwindcss-hyphens'),
|
|
]
|
|
};
|