Lorenzo Iovino
df04844ca2
- Add dark mode support across all components and pages - Implement theme toggle button in navbar (desktop and mobile) - Fix desktop theme toggle icon visibility issue - Add dark mode color variants to all text, backgrounds and components - Update Tailwind config to enable class-based dark mode - Add dark mode support to prose styles for blog content - Persist theme preference in localStorage - Update all pages (index, bio, blog) with dark mode colors - Optimize images (me.png and me-baby.jpg)
139 lines
3.3 KiB
JavaScript
139 lines
3.3 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
|
|
darkMode: 'class',
|
|
theme: {
|
|
colors: {
|
|
white: "#ffffff",
|
|
black: "#000000",
|
|
primary: {
|
|
50: "#fef7e6",
|
|
100: "#fdecc0",
|
|
200: "#fce096",
|
|
300: "#fbd46c",
|
|
400: "#fac84d",
|
|
500: "#f9bc2e",
|
|
600: "#f8b029",
|
|
700: "#f7a123",
|
|
800: "#f6931d",
|
|
900: "#f57612",
|
|
DEFAULT: "#f9bc2e",
|
|
},
|
|
secondary: {
|
|
50: "#e6f7fc",
|
|
100: "#c0ebf8",
|
|
200: "#96def4",
|
|
300: "#6cd1f0",
|
|
400: "#4dc7ed",
|
|
500: "#2ebde9",
|
|
600: "#29b7e7",
|
|
700: "#23aee4",
|
|
800: "#1da6e1",
|
|
900: "#1298dc",
|
|
DEFAULT: "#00baff",
|
|
},
|
|
accent: {
|
|
50: "#e6f0ff",
|
|
100: "#c0d9ff",
|
|
200: "#96c0ff",
|
|
300: "#6ca7ff",
|
|
400: "#4d94ff",
|
|
500: "#2e81ff",
|
|
600: "#2979ff",
|
|
700: "#236eff",
|
|
800: "#1d63ff",
|
|
900: "#1250ff",
|
|
DEFAULT: "#2e81ff",
|
|
},
|
|
gray: {
|
|
50: "#f9fafb",
|
|
100: "#f3f4f6",
|
|
200: "#e5e7eb",
|
|
300: "#d1d5db",
|
|
400: "#9ca3af",
|
|
500: "#6b7280",
|
|
600: "#4b5563",
|
|
700: "#374151",
|
|
800: "#1f2937",
|
|
900: "#111827",
|
|
950: "#030712",
|
|
},
|
|
neutral: {
|
|
50: "#fafaf9",
|
|
100: "#f5f5f4",
|
|
200: "#e7e5e4",
|
|
300: "#d6d3d1",
|
|
400: "#a8a29e",
|
|
500: "#78716c",
|
|
600: "#57534e",
|
|
700: "#44403c",
|
|
800: "#292524",
|
|
900: "#1c1917",
|
|
},
|
|
transparent: "transparent",
|
|
current: "currentColor",
|
|
},
|
|
fontFamily: {
|
|
sans: [
|
|
"Inter",
|
|
"-apple-system",
|
|
"BlinkMacSystemFont",
|
|
"Segoe UI",
|
|
"Roboto",
|
|
"Oxygen",
|
|
"Ubuntu",
|
|
"Cantarell",
|
|
"sans-serif",
|
|
],
|
|
serif: ["Merriweather", "Georgia", "serif"],
|
|
mono: ["JetBrains Mono", "Menlo", "Monaco", "Courier New", "monospace"],
|
|
},
|
|
fontSize: {
|
|
xs: ["0.75rem", { lineHeight: "1rem", letterSpacing: "0.05em" }],
|
|
sm: ["0.875rem", { lineHeight: "1.25rem", letterSpacing: "0.025em" }],
|
|
base: ["1rem", { lineHeight: "1.5rem", letterSpacing: "0" }],
|
|
lg: ["1.125rem", { lineHeight: "1.75rem", letterSpacing: "-0.01em" }],
|
|
xl: ["1.25rem", { lineHeight: "1.875rem", letterSpacing: "-0.01em" }],
|
|
"2xl": ["1.5rem", { lineHeight: "2rem", letterSpacing: "-0.02em" }],
|
|
"3xl": ["1.875rem", { lineHeight: "2.25rem", letterSpacing: "-0.02em" }],
|
|
"4xl": ["2.25rem", { lineHeight: "2.5rem", letterSpacing: "-0.03em" }],
|
|
"5xl": ["3rem", { lineHeight: "1", letterSpacing: "-0.03em" }],
|
|
"6xl": ["3.75rem", { lineHeight: "1", letterSpacing: "-0.04em" }],
|
|
"7xl": ["4.5rem", { lineHeight: "1", letterSpacing: "-0.04em" }],
|
|
"8xl": ["6rem", { lineHeight: "1", letterSpacing: "-0.05em" }],
|
|
"9xl": ["8rem", { lineHeight: "1", letterSpacing: "-0.05em" }],
|
|
},
|
|
fontWeight: {
|
|
normal: "400",
|
|
medium: "500",
|
|
semibold: "600",
|
|
bold: "700",
|
|
extrabold: "800",
|
|
},
|
|
extend: {
|
|
spacing: {
|
|
18: "4.5rem",
|
|
112: "28rem",
|
|
128: "32rem",
|
|
},
|
|
borderRadius: {
|
|
"4xl": "2rem",
|
|
},
|
|
boxShadow: {
|
|
soft: "0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)",
|
|
"soft-lg":
|
|
"0 10px 40px -5px rgba(0, 0, 0, 0.1), 0 20px 40px -10px rgba(0, 0, 0, 0.08)",
|
|
},
|
|
typography: {
|
|
DEFAULT: {
|
|
css: {
|
|
maxWidth: "65ch",
|
|
color: "#374151",
|
|
lineHeight: "1.75",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|