- Add LanguageSwitch component to all 4 theme layouts (starter/default/dark/minimal) - Import Noto Sans SC for proper Chinese font rendering - Fix theme flash on refresh by blocking render until site info loads - Optimize default theme: violet/blue/cyan palette, SVG icons instead of emoji - Optimize dark theme: unified emerald accent, reduced particle count, backdrop-blur - Add Tailwind safelist for dark theme dynamic class names - Prioritize localStorage in i18n detection so manual language choice persists Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
62 lines
2.0 KiB
JavaScript
62 lines
2.0 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ['./index.html', './src/**/*.{js,jsx}'],
|
|
darkMode: 'class',
|
|
safelist: [
|
|
// Dark theme uses dynamic accent colors
|
|
{ pattern: /border-(emerald|cyan|violet)-500\/(10|15|20|25)/ },
|
|
{ pattern: /bg-(emerald|cyan|violet)-500\/(10|15)/ },
|
|
{ pattern: /text-(emerald|cyan|violet)-400/ },
|
|
{ pattern: /from-(emerald|cyan|violet)-500\/(50|10)/ },
|
|
{ pattern: /to-(emerald|cyan|violet|teal)-500\/(10)/ },
|
|
],
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'Noto Sans SC', 'system-ui', '-apple-system', 'sans-serif'],
|
|
heading: ['Inter', 'Noto Sans SC', 'system-ui', '-apple-system', 'sans-serif'],
|
|
mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
|
|
},
|
|
colors: {
|
|
brand: {
|
|
50: '#eef2ff',
|
|
100: '#e0e7ff',
|
|
200: '#c7d2fe',
|
|
300: '#a5b4fc',
|
|
400: '#818cf8',
|
|
500: '#6366f1',
|
|
600: '#4f46e5',
|
|
700: '#4338ca',
|
|
800: '#3730a3',
|
|
900: '#312e81',
|
|
},
|
|
},
|
|
animation: {
|
|
'star-movement-bottom': 'star-movement-bottom linear infinite alternate',
|
|
'star-movement-top': 'star-movement-top linear infinite alternate',
|
|
'fade-in': 'fade-in 0.5s ease-out',
|
|
'slide-up': 'slide-up 0.5s ease-out',
|
|
},
|
|
keyframes: {
|
|
'star-movement-bottom': {
|
|
'0%': { transform: 'translate(0%, 0%)', opacity: '1' },
|
|
'100%': { transform: 'translate(-100%, 0%)', opacity: '0' },
|
|
},
|
|
'star-movement-top': {
|
|
'0%': { transform: 'translate(0%, 0%)', opacity: '1' },
|
|
'100%': { transform: 'translate(100%, 0%)', opacity: '0' },
|
|
},
|
|
'fade-in': {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
'slide-up': {
|
|
'0%': { opacity: '0', transform: 'translateY(20px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|