404 lines
16 KiB
Plaintext
404 lines
16 KiB
Plaintext
<project_specification>
|
|
<project_name>Claude.ai Clone - Advanced Theme Customization</project_name>
|
|
|
|
<overview>
|
|
This specification adds advanced theme customization features to the Claude.ai clone application.
|
|
Users will be able to customize accent colors, font sizes, message spacing, and choose from
|
|
preset color themes. All changes are additive and backward-compatible with existing theme functionality.
|
|
|
|
The existing light/dark mode toggle remains unchanged and functional.
|
|
</overview>
|
|
|
|
<safety_requirements>
|
|
<critical>
|
|
- DO NOT modify existing light/dark mode functionality
|
|
- DO NOT break existing theme persistence
|
|
- DO NOT change existing CSS classes without ensuring backward compatibility
|
|
- All new theme options must be optional (defaults should match current behavior)
|
|
- Test thoroughly to ensure existing themes still work
|
|
- Maintain backward compatibility at all times
|
|
- New theme preferences should be stored separately from existing theme settings
|
|
</critical>
|
|
</safety_requirements>
|
|
|
|
<new_features>
|
|
<feature_6_theme_customization>
|
|
<title>Advanced Theme Customization</title>
|
|
<description>
|
|
Add advanced theme customization options. Users should be able to:
|
|
- Customize accent colors (beyond just light/dark mode)
|
|
- Choose from preset color themes (blue, green, purple, orange)
|
|
- Adjust font size globally (small, medium, large)
|
|
- Adjust message spacing (compact, comfortable, spacious)
|
|
- Preview theme changes before applying
|
|
- Save custom theme preferences
|
|
|
|
The customization interface should be intuitive and provide real-time preview
|
|
of changes before they are applied. All preferences should persist across sessions.
|
|
</description>
|
|
<priority>3</priority>
|
|
<category>style</category>
|
|
<implementation_approach>
|
|
- Create a new "Appearance" or "Theme" section in settings
|
|
- Add accent color picker with preset options (blue, green, purple, orange)
|
|
- Add font size slider/selector (small, medium, large)
|
|
- Add message spacing selector (compact, comfortable, spacious)
|
|
- Implement preview functionality that shows changes in real-time
|
|
- Store theme preferences in localStorage or backend (user preferences)
|
|
- Apply theme using CSS custom properties (CSS variables)
|
|
- Ensure theme works with both light and dark modes
|
|
</implementation_approach>
|
|
<test_steps>
|
|
1. Open settings menu
|
|
2. Navigate to "Appearance" or "Theme" section
|
|
3. Select a different accent color (e.g., green)
|
|
4. Verify accent color changes are visible in preview
|
|
5. Adjust font size slider to "large"
|
|
6. Verify font size changes in preview
|
|
7. Adjust message spacing option to "spacious"
|
|
8. Verify spacing changes in preview
|
|
9. Click "Preview" to see changes applied temporarily
|
|
10. Click "Apply" to save changes permanently
|
|
11. Verify changes persist after page refresh
|
|
12. Test with both light and dark mode
|
|
13. Test reset to default theme
|
|
14. Verify existing conversations display correctly with new theme
|
|
</test_steps>
|
|
</feature_6_theme_customization>
|
|
|
|
<feature_accent_colors>
|
|
<title>Accent Color Customization</title>
|
|
<description>
|
|
Allow users to customize the accent color used throughout the application.
|
|
This includes:
|
|
- Primary button colors
|
|
- Link colors
|
|
- Focus states
|
|
- Active states
|
|
- Selection highlights
|
|
- Progress indicators
|
|
|
|
Preset options:
|
|
- Blue (default, matches Claude.ai)
|
|
- Green
|
|
- Purple
|
|
- Orange
|
|
|
|
Users should be able to see a preview of each color before applying.
|
|
</description>
|
|
<priority>3</priority>
|
|
<category>style</category>
|
|
<implementation_approach>
|
|
- Define accent colors as CSS custom properties
|
|
- Create color palette for each preset (light and dark variants)
|
|
- Add color picker UI component in settings
|
|
- Update all accent color usages to use CSS variables
|
|
- Ensure colors have proper contrast ratios for accessibility
|
|
- Store selected accent color in user preferences
|
|
</implementation_approach>
|
|
<test_steps>
|
|
1. Open theme settings
|
|
2. Select "Green" accent color
|
|
3. Verify buttons, links, and highlights use green
|
|
4. Switch to dark mode and verify green accent still works
|
|
5. Test all preset colors (blue, green, purple, orange)
|
|
6. Verify color persists after refresh
|
|
7. Test accessibility (contrast ratios)
|
|
</test_steps>
|
|
</feature_accent_colors>
|
|
|
|
<feature_font_size>
|
|
<title>Global Font Size Adjustment</title>
|
|
<description>
|
|
Allow users to adjust the global font size for better readability.
|
|
Options:
|
|
- Small (12px base)
|
|
- Medium (14px base, default)
|
|
- Large (16px base)
|
|
|
|
Font size should scale proportionally across all text elements:
|
|
- Message text
|
|
- UI labels
|
|
- Input fields
|
|
- Buttons
|
|
- Sidebar text
|
|
</description>
|
|
<priority>3</priority>
|
|
<category>style</category>
|
|
<implementation_approach>
|
|
- Use CSS rem units for all font sizes
|
|
- Set base font size on root element
|
|
- Create font size presets (small, medium, large)
|
|
- Add font size selector in settings
|
|
- Store preference in user settings
|
|
- Ensure responsive design still works with different font sizes
|
|
</implementation_approach>
|
|
<test_steps>
|
|
1. Open theme settings
|
|
2. Select "Small" font size
|
|
3. Verify all text is smaller throughout the app
|
|
4. Select "Large" font size
|
|
5. Verify all text is larger throughout the app
|
|
6. Verify layout doesn't break with different font sizes
|
|
7. Test with long messages to ensure wrapping works
|
|
8. Verify preference persists after refresh
|
|
</test_steps>
|
|
</feature_font_size>
|
|
|
|
<feature_message_spacing>
|
|
<title>Message Spacing Customization</title>
|
|
<description>
|
|
Allow users to adjust the spacing between messages and within message bubbles.
|
|
Options:
|
|
- Compact: Minimal spacing (for users who prefer dense layouts)
|
|
- Comfortable: Default spacing (current behavior)
|
|
- Spacious: Increased spacing (for better readability)
|
|
|
|
This affects:
|
|
- Vertical spacing between messages
|
|
- Padding within message bubbles
|
|
- Spacing between message elements (avatar, text, timestamp)
|
|
</description>
|
|
<priority>3</priority>
|
|
<category>style</category>
|
|
<implementation_approach>
|
|
- Define spacing scale using CSS custom properties
|
|
- Create spacing presets (compact, comfortable, spacious)
|
|
- Apply spacing to message containers and bubbles
|
|
- Add spacing selector in settings
|
|
- Store preference in user settings
|
|
- Ensure spacing works well with different font sizes
|
|
</implementation_approach>
|
|
<test_steps>
|
|
1. Open theme settings
|
|
2. Select "Compact" spacing
|
|
3. Verify messages are closer together
|
|
4. Select "Spacious" spacing
|
|
5. Verify messages have more space between them
|
|
6. Test with long conversations to ensure scrolling works
|
|
7. Verify spacing preference persists after refresh
|
|
8. Test with different font sizes to ensure compatibility
|
|
</test_steps>
|
|
</feature_message_spacing>
|
|
|
|
<feature_theme_preview>
|
|
<title>Theme Preview Functionality</title>
|
|
<description>
|
|
Allow users to preview theme changes before applying them permanently.
|
|
The preview should:
|
|
- Show a sample conversation with the new theme applied
|
|
- Update in real-time as settings are changed
|
|
- Allow users to cancel and revert to previous theme
|
|
- Show both light and dark mode previews if applicable
|
|
|
|
Users should be able to:
|
|
- See preview immediately when changing settings
|
|
- Click "Apply" to save changes
|
|
- Click "Cancel" to discard changes
|
|
- Click "Reset" to return to default theme
|
|
</description>
|
|
<priority>3</priority>
|
|
<category>functional</category>
|
|
<implementation_approach>
|
|
- Create preview component showing sample conversation
|
|
- Apply theme changes temporarily to preview
|
|
- Store original theme state for cancel functionality
|
|
- Update preview in real-time as settings change
|
|
- Only persist changes when "Apply" is clicked
|
|
- Show clear visual feedback for preview vs. applied state
|
|
</implementation_approach>
|
|
<test_steps>
|
|
1. Open theme settings
|
|
2. Change accent color to green
|
|
3. Verify preview updates immediately
|
|
4. Change font size to large
|
|
5. Verify preview updates with new font size
|
|
6. Click "Cancel" and verify changes are reverted
|
|
7. Make changes again and click "Apply"
|
|
8. Verify changes are saved and applied to actual interface
|
|
9. Test preview with both light and dark mode
|
|
</test_steps>
|
|
</feature_theme_preview>
|
|
</new_features>
|
|
|
|
<implementation_notes>
|
|
<code_structure>
|
|
frontend/
|
|
components/
|
|
ThemeSettings.jsx # New theme customization UI (NEW)
|
|
ThemePreview.jsx # Preview component (NEW)
|
|
styles/
|
|
theme-variables.css # CSS custom properties for themes (NEW)
|
|
accent-colors.css # Accent color definitions (NEW)
|
|
hooks/
|
|
useTheme.js # Updated to handle new theme options
|
|
utils/
|
|
themeStorage.js # Theme preference persistence (NEW)
|
|
</code_structure>
|
|
|
|
<css_architecture>
|
|
Use CSS custom properties (CSS variables) for all theme values:
|
|
- --accent-color-primary
|
|
- --accent-color-hover
|
|
- --font-size-base
|
|
- --message-spacing-vertical
|
|
- --message-padding
|
|
|
|
This allows easy theme switching without JavaScript manipulation.
|
|
</css_architecture>
|
|
|
|
<storage_approach>
|
|
Store theme preferences in:
|
|
- localStorage for client-side persistence
|
|
- Or backend user preferences table if available
|
|
|
|
Structure:
|
|
{
|
|
accentColor: 'blue' | 'green' | 'purple' | 'orange',
|
|
fontSize: 'small' | 'medium' | 'large',
|
|
messageSpacing: 'compact' | 'comfortable' | 'spacious',
|
|
theme: 'light' | 'dark' (existing)
|
|
}
|
|
</storage_approach>
|
|
|
|
<safety_guidelines>
|
|
- Keep existing theme functionality intact
|
|
- Default values should match current behavior
|
|
- Use feature detection for new theme features
|
|
- Gracefully degrade if CSS custom properties not supported
|
|
- Test with existing conversations and UI elements
|
|
- Ensure accessibility standards are maintained
|
|
</safety_guidelines>
|
|
</implementation_notes>
|
|
|
|
<ui_components>
|
|
<theme_settings_panel>
|
|
<description>Settings panel for theme customization</description>
|
|
<sections>
|
|
- Accent Color: Radio buttons or color swatches for preset colors
|
|
- Font Size: Slider or dropdown (small, medium, large)
|
|
- Message Spacing: Radio buttons (compact, comfortable, spacious)
|
|
- Preview: Live preview of theme changes
|
|
- Actions: Apply, Cancel, Reset buttons
|
|
</sections>
|
|
</theme_settings_panel>
|
|
|
|
<theme_preview>
|
|
<description>Preview component showing sample conversation</description>
|
|
<elements>
|
|
- Sample user message
|
|
- Sample AI response
|
|
- Shows current accent color
|
|
- Shows current font size
|
|
- Shows current spacing
|
|
- Updates in real-time
|
|
</elements>
|
|
</theme_preview>
|
|
</ui_components>
|
|
|
|
<css_custom_properties>
|
|
<accent_colors>
|
|
Define CSS variables for each accent color preset:
|
|
--accent-blue: #2563eb;
|
|
--accent-green: #10b981;
|
|
--accent-purple: #8b5cf6;
|
|
--accent-orange: #f59e0b;
|
|
|
|
Each should have hover, active, and focus variants.
|
|
</accent_colors>
|
|
|
|
<font_sizes>
|
|
Define base font sizes:
|
|
--font-size-small: 0.75rem; (12px)
|
|
--font-size-medium: 0.875rem; (14px, default)
|
|
--font-size-large: 1rem; (16px)
|
|
</font_sizes>
|
|
|
|
<spacing>
|
|
Define spacing scales:
|
|
--spacing-compact: 0.5rem;
|
|
--spacing-comfortable: 1rem; (default)
|
|
--spacing-spacious: 1.5rem;
|
|
</spacing>
|
|
</css_custom_properties>
|
|
|
|
<api_endpoints>
|
|
<if_backend_storage>
|
|
If storing preferences in backend:
|
|
- GET /api/user/preferences - Get user theme preferences
|
|
- PUT /api/user/preferences - Update user theme preferences
|
|
- GET /api/user/preferences/theme - Get theme preferences only
|
|
</if_backend_storage>
|
|
|
|
<note>
|
|
If using localStorage only, no API endpoints needed.
|
|
Backend storage is optional but recommended for multi-device sync.
|
|
</note>
|
|
</api_endpoints>
|
|
|
|
<accessibility_requirements>
|
|
- All accent colors must meet WCAG AA contrast ratios (4.5:1 for text)
|
|
- Font size changes must not break screen reader compatibility
|
|
- Theme settings must be keyboard navigable
|
|
- Color choices should not be the only way to convey information
|
|
- Provide high contrast mode option if possible
|
|
</accessibility_requirements>
|
|
|
|
<testing_requirements>
|
|
<regression_tests>
|
|
- Verify existing light/dark mode toggle still works
|
|
- Verify existing theme persistence still works
|
|
- Test that default theme matches current behavior
|
|
- Verify existing conversations display correctly
|
|
- Test that all UI elements are styled correctly
|
|
</regression_tests>
|
|
|
|
<feature_tests>
|
|
- Test each accent color preset
|
|
- Test each font size option
|
|
- Test each spacing option
|
|
- Test theme preview functionality
|
|
- Test theme persistence (localStorage/backend)
|
|
- Test theme reset to defaults
|
|
- Test theme with both light and dark modes
|
|
- Test theme changes in real-time
|
|
</feature_tests>
|
|
|
|
<compatibility_tests>
|
|
- Test with different browsers (Chrome, Firefox, Safari, Edge)
|
|
- Test with different screen sizes (responsive design)
|
|
- Test with long conversations
|
|
- Test with different message types (text, code, artifacts)
|
|
- Test accessibility with screen readers
|
|
</compatibility_tests>
|
|
</testing_requirements>
|
|
|
|
<success_criteria>
|
|
<functionality>
|
|
- Users can customize accent colors from preset options
|
|
- Users can adjust global font size (small, medium, large)
|
|
- Users can adjust message spacing (compact, comfortable, spacious)
|
|
- Theme preview shows changes in real-time
|
|
- Theme preferences persist across sessions
|
|
- Existing light/dark mode functionality works unchanged
|
|
- All theme options work together harmoniously
|
|
</functionality>
|
|
|
|
<user_experience>
|
|
- Theme customization is intuitive and easy to use
|
|
- Preview provides clear feedback before applying changes
|
|
- Changes apply smoothly without flickering
|
|
- Settings are easy to find and access
|
|
- Reset to defaults is easily accessible
|
|
</user_experience>
|
|
|
|
<technical>
|
|
- Code is well-organized and maintainable
|
|
- CSS custom properties are used consistently
|
|
- Theme preferences are stored reliably
|
|
- No performance degradation with theme changes
|
|
- Backward compatibility is maintained
|
|
</technical>
|
|
</success_criteria>
|
|
</project_specification>
|