Alexey Pavlov
a16bf812e4
- CSS-переменные --bg, --surface, --ink, --mute, --accent для обеих тем - darkMode: 'class' в Tailwind config - ThemeToggle компонент с Sun/Moon, сохраняет выбор в localStorage - Inline-скрипт в layout.js защищает от FOUC (FlashOfUnstyledContent) - Авто-определение по prefers-color-scheme как fallback - not-found.js: красивая 404 страница вместо дефолтной Next - Обновлены все компоненты и страницы — Header, Footer, ArticleCard, page.js, blog, tag, about
47 lines
1.7 KiB
JavaScript
47 lines
1.7 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
darkMode: 'class',
|
|
content: [
|
|
'./app/**/*.{js,jsx,ts,tsx}',
|
|
'./components/**/*.{js,jsx,ts,tsx}',
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// Используем CSS-переменные напрямую — для совместимости со старым кодом
|
|
bg: 'rgb(var(--bg) / <alpha-value>)',
|
|
surface: 'rgb(var(--surface) / <alpha-value>)',
|
|
surface2: 'rgb(var(--surface-2) / <alpha-value>)',
|
|
border: 'rgb(var(--border) / <alpha-value>)',
|
|
ink: 'rgb(var(--ink) / <alpha-value>)',
|
|
mute: 'rgb(var(--mute) / <alpha-value>)',
|
|
accent: 'rgb(var(--accent) / <alpha-value>)',
|
|
accent2: 'rgb(var(--accent-2) / <alpha-value>)',
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
serif: ['"Source Serif Pro"', 'Georgia', 'serif'],
|
|
},
|
|
typography: ({ theme }) => ({
|
|
DEFAULT: {
|
|
css: {
|
|
'--tw-prose-body': 'rgb(var(--ink))',
|
|
'--tw-prose-headings': 'rgb(var(--ink))',
|
|
'--tw-prose-links': 'rgb(var(--accent-2))',
|
|
'--tw-prose-bold': 'rgb(var(--ink))',
|
|
'--tw-prose-quotes': 'rgb(var(--mute))',
|
|
'--tw-prose-quote-borders': 'rgb(var(--accent))',
|
|
'--tw-prose-code': 'rgb(var(--accent-2))',
|
|
'--tw-prose-pre-bg': 'rgb(var(--surface-2))',
|
|
'--tw-prose-pre-code': 'rgb(var(--ink))',
|
|
'--tw-prose-bullets': 'rgb(var(--mute))',
|
|
'--tw-prose-counters': 'rgb(var(--mute))',
|
|
'--tw-prose-hr': 'rgb(var(--border))',
|
|
},
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
plugins: [require('@tailwindcss/typography')],
|
|
};
|