arDTDev
a7296be512
- Implement ThemeContext with CSS variables for dynamic theming - Add theme presets: Cyberpunk, Windows Classic, Dark Modern, Matrix, Industrial, Otaku Mode, Pink Pink - Add theme selector UI in Footer with color preview - Theme persists to localStorage - Each theme has unique background effects, colors, and styling - Otaku Mode: anime-style dark purple with pink/purple glow and star effects - Pink Pink: cute pastel pink with heart pattern overlay 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
85 lines
2.9 KiB
JavaScript
85 lines
2.9 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: [
|
|
"./index.html",
|
|
"./**/*.{js,ts,jsx,tsx}",
|
|
],
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'sans-serif'],
|
|
mono: ['Rajdhani', 'monospace'],
|
|
tech: ['Rajdhani', 'sans-serif'],
|
|
classic: ['Segoe UI', 'Tahoma', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
slate: {
|
|
850: '#1e293b',
|
|
900: '#0f172a',
|
|
950: '#020617',
|
|
},
|
|
neon: {
|
|
blue: '#00f3ff',
|
|
purple: '#bc13fe',
|
|
pink: '#ff0099',
|
|
green: '#0aff00',
|
|
yellow: '#ffe600',
|
|
},
|
|
// Theme-aware colors using CSS variables
|
|
theme: {
|
|
primary: 'var(--color-primary)',
|
|
secondary: 'var(--color-secondary)',
|
|
accent: 'var(--color-accent)',
|
|
success: 'var(--color-success)',
|
|
error: 'var(--color-error)',
|
|
warning: 'var(--color-warning)',
|
|
'bg-primary': 'var(--color-bg-primary)',
|
|
'bg-secondary': 'var(--color-bg-secondary)',
|
|
'bg-tertiary': 'var(--color-bg-tertiary)',
|
|
'text-primary': 'var(--color-text-primary)',
|
|
'text-secondary': 'var(--color-text-secondary)',
|
|
border: 'var(--color-border)',
|
|
}
|
|
},
|
|
boxShadow: {
|
|
'glow-blue': '0 0 20px rgba(0, 243, 255, 0.3), inset 0 0 10px rgba(0, 243, 255, 0.1)',
|
|
'glow-purple': '0 0 20px rgba(188, 19, 254, 0.4), inset 0 0 10px rgba(188, 19, 254, 0.1)',
|
|
'glow-red': '0 0 30px rgba(255, 0, 0, 0.5)',
|
|
'hologram': '0 0 15px rgba(6, 182, 212, 0.15), inset 0 0 20px rgba(6, 182, 212, 0.05)',
|
|
'glow-primary': '0 0 20px rgba(var(--color-primary-rgb), 0.3), inset 0 0 10px rgba(var(--color-primary-rgb), 0.1)',
|
|
},
|
|
animation: {
|
|
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
|
'glow': 'glow 2s ease-in-out infinite alternate',
|
|
'gradient': 'gradient 15s ease infinite',
|
|
'scan': 'scan 4s linear infinite',
|
|
'spin-slow': 'spin 10s linear infinite',
|
|
'fadeIn': 'fadeIn 0.2s ease-out',
|
|
},
|
|
keyframes: {
|
|
glow: {
|
|
'0%': { boxShadow: '0 0 5px rgba(var(--color-primary-rgb), 0.2)' },
|
|
'100%': { boxShadow: '0 0 20px rgba(var(--color-primary-rgb), 0.6), 0 0 10px rgba(var(--color-primary-rgb), 0.4)' },
|
|
},
|
|
gradient: {
|
|
'0%': { backgroundPosition: '0% 50%' },
|
|
'50%': { backgroundPosition: '100% 50%' },
|
|
'100%': { backgroundPosition: '0% 50%' },
|
|
},
|
|
scan: {
|
|
'0%': { transform: 'translateY(-100%)' },
|
|
'100%': { transform: 'translateY(100%)' },
|
|
},
|
|
fadeIn: {
|
|
'0%': { opacity: '0', transform: 'scale(0.95)' },
|
|
'100%': { opacity: '1', transform: 'scale(1)' },
|
|
}
|
|
},
|
|
borderRadius: {
|
|
'theme': 'var(--border-radius)',
|
|
}
|
|
}
|
|
},
|
|
plugins: [],
|
|
}
|