Override Tailwind zinc scale with brighter values for improved text contrast on dark backgrounds. Targets older users who may have difficulty reading gray-on-black text. - zinc-500: #71717a → #8a8a95 (+20% brightness) - zinc-600: #52525b → #6b6b75 (+25% brightness) - zinc-400/700 also adjusted proportionally
38 lines
1.4 KiB
TypeScript
38 lines
1.4 KiB
TypeScript
import type { Config } from "tailwindcss";
|
|
|
|
const config: Config = {
|
|
content: [
|
|
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
|
|
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
|
|
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
|
|
],
|
|
theme: {
|
|
extend: {
|
|
// High-contrast zinc scale for better readability
|
|
// Original zinc-500 (#71717a) is now brighter for better contrast on dark backgrounds
|
|
colors: {
|
|
zinc: {
|
|
50: '#fafafa',
|
|
100: '#f4f4f5',
|
|
200: '#e4e4e7',
|
|
300: '#d4d4d8',
|
|
400: '#a8a8b3', // Brighter (was #a1a1aa)
|
|
500: '#8a8a95', // Brighter (was #71717a) - main secondary text
|
|
600: '#6b6b75', // Brighter (was #52525b) - subtle text
|
|
700: '#4a4a52', // Brighter (was #3f3f46)
|
|
800: '#2a2a2e', // Slightly adjusted
|
|
900: '#1a1a1e', // Dark background
|
|
950: '#0d0d0f', // Darkest
|
|
},
|
|
},
|
|
backgroundImage: {
|
|
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
|
|
"gradient-conic":
|
|
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|
|
export default config;
|