380 lines
11 KiB
Markdown
380 lines
11 KiB
Markdown
# Dark/Light Mode Implementation Analysis
|
|
|
|
## Current Implementation Analysis
|
|
|
|
After analyzing all components and files in the codebase, I've identified several inconsistencies and issues with the current dark/light mode implementation. Here's a detailed breakdown:
|
|
|
|
## instructions.md
|
|
|
|
```markdown
|
|
# Dark/Light Mode Implementation Instructions
|
|
|
|
## Overview
|
|
This document provides comprehensive instructions for implementing consistent dark/light mode across the ThreeFold Galaxy website.
|
|
|
|
## Theme Management Strategy
|
|
|
|
### 1. Theme Storage and Application
|
|
- **Storage**: Use `localStorage` with key `'theme'`
|
|
- **DOM Application**: Apply theme via `data-theme` attribute on `<html>` element
|
|
- **Method**: `document.documentElement.setAttribute('data-theme', theme)`
|
|
- **Default**: `'light'` theme as fallback
|
|
|
|
### 2. CSS Custom Properties Structure
|
|
|
|
#### Root Variables (Light Theme)
|
|
```css
|
|
:root {
|
|
/* Core colors */
|
|
--background: oklch(1 0 0);
|
|
--foreground: oklch(0.145 0 0);
|
|
--card: oklch(1 0 0);
|
|
--card-foreground: oklch(0.145 0 0);
|
|
--popover: oklch(1 0 0);
|
|
--popover-foreground: oklch(0.145 0 0);
|
|
|
|
/* Brand colors */
|
|
--primary: oklch(0.205 0 0);
|
|
--primary-foreground: oklch(0.985 0 0);
|
|
--secondary: oklch(0.97 0 0);
|
|
--secondary-foreground: oklch(0.205 0 0);
|
|
|
|
/* UI states */
|
|
--muted: oklch(0.97 0 0);
|
|
--muted-foreground: oklch(0.556 0 0);
|
|
--accent: oklch(0.97 0 0);
|
|
--accent-foreground: oklch(0.205 0 0);
|
|
--destructive: oklch(0.577 0.245 27.325);
|
|
|
|
/* Borders and inputs */
|
|
--border: oklch(0.922 0 0);
|
|
--input: oklch(0.922 0 0);
|
|
--ring: oklch(0.708 0 0);
|
|
}
|
|
```
|
|
|
|
#### Dark Theme Override
|
|
```css
|
|
html[data-theme='dark'] {
|
|
--background: oklch(0.145 0 0);
|
|
--foreground: oklch(0.985 0 0);
|
|
/* ... other dark theme values */
|
|
}
|
|
```
|
|
|
|
### 3. Component Implementation Rules
|
|
|
|
#### Required CSS Classes for All Components
|
|
- **Backgrounds**: Use `bg-background`, `bg-card`, `bg-popover`
|
|
- **Text**: Use `text-foreground`, `text-muted-foreground`, `text-card-foreground`
|
|
- **Borders**: Use `border-border`
|
|
- **Interactive elements**: Use appropriate semantic color variables
|
|
|
|
#### Forbidden Patterns
|
|
- ❌ Hardcoded Tailwind colors (e.g., `bg-white`, `text-black`, `bg-slate-900`)
|
|
- ❌ Manual dark: variants (e.g., `bg-white dark:bg-slate-900`)
|
|
- ❌ Inline styles with fixed colors
|
|
- ❌ Direct color values in className
|
|
|
|
#### Required Patterns
|
|
- ✅ Semantic color variables (e.g., `bg-background`, `text-foreground`)
|
|
- ✅ Component-specific variables (e.g., `text-card-foreground` for card content)
|
|
- ✅ State-aware colors (e.g., `text-muted-foreground` for secondary text)
|
|
|
|
### 4. Component-Specific Guidelines
|
|
|
|
#### Navigation Component
|
|
```jsx
|
|
// Required classes
|
|
className="bg-background border-border text-foreground"
|
|
```
|
|
|
|
#### Card Components
|
|
```jsx
|
|
// Card container
|
|
className="bg-card text-card-foreground border-border"
|
|
// Card content
|
|
className="text-muted-foreground" // for secondary text
|
|
```
|
|
|
|
#### Button Components
|
|
```jsx
|
|
// Primary button
|
|
className="bg-primary text-primary-foreground hover:bg-primary/90"
|
|
// Secondary button
|
|
className="bg-secondary text-secondary-foreground"
|
|
```
|
|
|
|
#### Form Elements
|
|
```jsx
|
|
// Input fields
|
|
className="border-border bg-background text-foreground"
|
|
// Labels
|
|
className="text-foreground"
|
|
```
|
|
|
|
#### Tables
|
|
```jsx
|
|
// Table headers
|
|
className="bg-primary text-primary-foreground"
|
|
// Table rows
|
|
className="border-border"
|
|
// Table cells
|
|
className="text-foreground"
|
|
```
|
|
|
|
### 5. ThemeToggle Component Requirements
|
|
|
|
#### Implementation Pattern
|
|
```jsx
|
|
const ThemeToggle = () => {
|
|
const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
|
|
|
|
useEffect(() => {
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
localStorage.setItem('theme', theme);
|
|
}, [theme]);
|
|
|
|
const toggleTheme = () => {
|
|
setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
|
|
};
|
|
|
|
return (
|
|
<button
|
|
onClick={toggleTheme}
|
|
className="bg-background text-foreground border-border"
|
|
>
|
|
{theme === 'light' ? '🌙' : '☀️'}
|
|
</button>
|
|
);
|
|
};
|
|
```
|
|
|
|
### 6. File-Specific Requirements
|
|
|
|
#### App.jsx
|
|
- No theme-specific logic required
|
|
- Ensure proper component structure
|
|
|
|
#### All Page Components
|
|
- Must use `bg-background text-foreground` as base classes
|
|
- All sections should use semantic color variables
|
|
- No hardcoded colors
|
|
|
|
#### UI Components (/components/ui/*)
|
|
- Must be theme-agnostic
|
|
- Use only semantic color variables
|
|
- Follow shadcn/ui patterns for theme support
|
|
|
|
### 7. Testing Requirements
|
|
|
|
#### Visual Testing Checklist
|
|
- [ ] All text is readable in both themes
|
|
- [ ] All backgrounds respond to theme changes
|
|
- [ ] Borders and inputs are visible in both themes
|
|
- [ ] Interactive elements (buttons, links) are properly styled
|
|
- [ ] No color contrast issues in either theme
|
|
|
|
#### Technical Testing Checklist
|
|
- [ ] Theme persists across page reloads
|
|
- [ ] Theme toggle works from any page
|
|
- [ ] No console errors related to theme switching
|
|
- [ ] All components respect theme variables
|
|
|
|
### 8. Maintenance Guidelines
|
|
|
|
#### When Adding New Components
|
|
1. Always use semantic color variables
|
|
2. Test in both light and dark themes
|
|
3. Avoid hardcoded colors
|
|
4. Follow existing component patterns
|
|
|
|
#### When Modifying Existing Components
|
|
1. Replace hardcoded colors with semantic variables
|
|
2. Remove manual dark: variants
|
|
3. Test theme switching functionality
|
|
4. Ensure accessibility standards are met
|
|
|
|
## Implementation Priority
|
|
|
|
### Phase 1: Core Infrastructure
|
|
1. Fix ThemeToggle component (data-theme vs class)
|
|
2. Consolidate CSS custom properties
|
|
3. Update base App styles
|
|
|
|
### Phase 2: Component Updates
|
|
1. Update Navigation component
|
|
2. Fix all page components (Home, Products, Technology, etc.)
|
|
3. Update UI components
|
|
|
|
### Phase 3: Content Components
|
|
1. Fix Blog and BlogPost components
|
|
2. Update form components
|
|
3. Fix table styling
|
|
|
|
### Phase 4: Validation
|
|
1. Test all pages in both themes
|
|
2. Verify localStorage persistence
|
|
3. Check accessibility compliance
|
|
```
|
|
|
|
## Current Issues and Required Fixes
|
|
|
|
### Critical Issues
|
|
|
|
1. **Theme Application Inconsistency**
|
|
- **Location**: `src/components/ThemeToggle.jsx`
|
|
- **Issue**: Uses `classList.toggle('dark')` but CSS expects `data-theme` attribute
|
|
- **Fix**: Change to `document.documentElement.setAttribute('data-theme', theme)`
|
|
|
|
2. **CSS Custom Properties Conflicts**
|
|
- **Location**: `src/styles/App.css` and `src/styles/index.css`
|
|
- **Issue**: Duplicate theme definitions with different values
|
|
- **Fix**: Remove theme definitions from `index.css`, keep only in `App.css`
|
|
|
|
### Component-Specific Issues
|
|
|
|
#### Navigation.jsx
|
|
- **Status**: ✅ Good implementation
|
|
- **Uses**: Proper `dark:` variants and semantic classes
|
|
|
|
#### Home.jsx
|
|
- **Status**: ✅ Mostly good
|
|
- **Uses**: Theme variables properly
|
|
|
|
#### TierSHPage.jsx
|
|
- **Issues**:
|
|
- Line with hardcoded blue: `text-blue-600` should be `text-primary`
|
|
- Table headers use hardcoded `bg-blue-600`
|
|
- **Fixes Needed**: Replace hardcoded colors with semantic variables
|
|
|
|
#### ProductsPage.jsx
|
|
- **Issues**:
|
|
- Table header: `bg-primary text-primary-foreground` (good)
|
|
- Some hardcoded `text-blue-600` instances
|
|
- **Fixes Needed**: Replace blue colors with primary variables
|
|
|
|
#### TechnologyPage.jsx
|
|
- **Issues**:
|
|
- Multiple hardcoded colors: `text-blue-600`, `text-green-600`, `text-purple-600`
|
|
- Table styling has hardcoded `bg-primary text-primary-foreground`
|
|
- **Fixes Needed**: Use appropriate semantic color variables
|
|
|
|
#### RegisterPage.jsx
|
|
- **Issues**:
|
|
- Hardcoded colors in cards and badges
|
|
- Some `bg-blue-600` instances
|
|
- **Fixes Needed**: Replace with semantic variables
|
|
|
|
#### Blog.jsx and BlogPost.jsx
|
|
- **Issues**:
|
|
- Hardcoded `text-blue-600` for links
|
|
- Some prose styling with hardcoded colors
|
|
- **Fixes Needed**: Use `text-primary` for links
|
|
|
|
#### BecomeMember.jsx
|
|
- **Issues**:
|
|
- Multiple hardcoded blue colors
|
|
- Form styling needs theme variables
|
|
- **Fixes Needed**: Replace all hardcoded colors
|
|
|
|
### AI Agent Fix Instructions
|
|
|
|
```markdown
|
|
# AI Agent Fix Instructions for Dark/Light Mode
|
|
|
|
## Task 1: Fix ThemeToggle Component
|
|
**File**: `src/components/ThemeToggle.jsx`
|
|
**Action**:
|
|
- Change `document.documentElement.classList.toggle('dark', theme === 'dark')`
|
|
- To: `document.documentElement.setAttribute('data-theme', theme)`
|
|
- Update button classes to use `bg-background text-foreground border-border`
|
|
|
|
## Task 2: Consolidate CSS
|
|
**File**: `src/styles/index.css`
|
|
**Action**: Remove all CSS custom property definitions (keep only Tailwind imports)
|
|
|
|
## Task 3: Fix Hardcoded Colors - Replace the Following Patterns:
|
|
|
|
### Blue Colors
|
|
- `text-blue-600` → `text-primary`
|
|
- `bg-blue-600` → `bg-primary`
|
|
- `hover:bg-blue-700` → `hover:bg-primary/90`
|
|
- `border-blue-600` → `border-primary`
|
|
|
|
### Green Colors
|
|
- `text-green-600` → `text-emerald-600` (or create --success variable)
|
|
- Keep green for success states, but use consistent shade
|
|
|
|
### Other Colors
|
|
- `text-slate-900` → `text-foreground`
|
|
- `bg-white` → `bg-background`
|
|
- `bg-slate-900` → `bg-background`
|
|
- `text-slate-600` → `text-muted-foreground`
|
|
|
|
### Specific Component Fixes:
|
|
|
|
#### Tables (Multiple files)
|
|
Replace:
|
|
```jsx
|
|
<tr className="bg-blue-600 text-white">
|
|
```
|
|
With:
|
|
```jsx
|
|
<tr className="bg-primary text-primary-foreground">
|
|
```
|
|
|
|
#### Cards
|
|
Replace:
|
|
```jsx
|
|
<Card className="border-blue-200">
|
|
```
|
|
With:
|
|
```jsx
|
|
<Card className="border-border bg-card text-card-foreground">
|
|
```
|
|
|
|
#### Badges
|
|
Replace:
|
|
```jsx
|
|
<Badge className="bg-blue-100 text-blue-800">
|
|
```
|
|
With:
|
|
```jsx
|
|
<Badge className="bg-primary/10 text-primary">
|
|
```
|
|
|
|
## Task 4: Update Navigation Component
|
|
**File**: `src/components/Navigation.jsx`
|
|
**Action**: Replace manual dark variants with semantic variables
|
|
- Change `bg-white dark:bg-slate-900` → `bg-background`
|
|
- Change `text-slate-900 dark:text-white` → `text-foreground`
|
|
|
|
## Task 5: Fix Form Components
|
|
**Files**: All files with form elements
|
|
**Action**: Replace hardcoded input styling:
|
|
- `border-input bg-background text-foreground` for inputs
|
|
- `text-foreground` for labels
|
|
- `text-muted-foreground` for help text
|
|
|
|
## Task 6: Test Each Change
|
|
After each component fix:
|
|
1. Verify theme toggle works
|
|
2. Check both light and dark modes
|
|
3. Ensure no hardcoded colors remain
|
|
4. Validate accessibility
|
|
```
|
|
|
|
### Summary of Files Requiring Changes
|
|
|
|
1. **Critical**: `ThemeToggle.jsx` - Fix theme application method
|
|
2. **Critical**: `index.css` - Remove duplicate theme definitions
|
|
3. **High**: `TierSHPage.jsx` - Multiple hardcoded colors
|
|
4. **High**: `ProductsPage.jsx` - Table and color fixes
|
|
5. **High**: `TechnologyPage.jsx` - Extensive color replacements needed
|
|
6. **Medium**: `RegisterPage.jsx` - Form and card color fixes
|
|
7. **Medium**: `Blog.jsx` & `BlogPost.jsx` - Link color fixes
|
|
8. **Medium**: `BecomeMember.jsx` - Form styling updates
|
|
9. **Low**: `Navigation.jsx` - Minor optimizations (already mostly correct)
|
|
|
|
The implementation should follow the semantic color system defined in `App.css` and ensure all components are theme-agnostic by using CSS custom properties instead of hardcoded colors. |