# Keycloak Custom Theme Setup

## Automatic Setup

Run the provided script after Keycloak is running:
```bash
./docker/keycloak/set-theme.sh
```

## Manual Setup

1. Access Keycloak Admin Console:
   - URL: http://localhost:8180
   - Username: admin
   - Password: keycloak_admin_password_123

2. Select your realm:
   - Click on the realm dropdown (top left)
   - Select "misinformation-analyzer"

3. Configure the theme:
   - Go to "Realm Settings" in the left menu
   - Click on the "Themes" tab
   - In "Login theme" dropdown, select "misinformation-theme"
   - Click "Save"

4. Test the theme:
   - Logout from admin console
   - Go to your application: http://localhost:3001
   - You should see the styled login page

## Theme Customization

The theme files are located in:
- CSS: `misinformation-theme/login/resources/css/login.css`
- Logo: `misinformation-theme/login/resources/img/logo.png`
- Properties: `misinformation-theme/login/theme.properties`

### Customization Options:

1. **Colors**: Edit the CSS variables in login.css
2. **Logo**: Replace logo.png with your own
3. **Fonts**: Update font-family in the CSS
4. **Layout**: Modify the CSS selectors

### Available CSS Variables:
```css
--primary-color: #1976d2;
--primary-dark: #115293;
--primary-light: #4791db;
--secondary-color: #dc004e;
--gradient-trust: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-bloom: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
```

## Troubleshooting

If the theme doesn't appear:
1. Ensure the theme folder is mounted correctly in docker-compose.yml
2. Restart Keycloak: `docker compose restart keycloak`
3. Clear browser cache
4. Check Keycloak logs: `docker compose logs keycloak`

## Preview

The custom theme includes:
- Gradient background matching your app
- Custom logo
- Styled input fields with focus effects
- Matching button styles
- Consistent color scheme
- Responsive design