72 lines
No EOL
1.9 KiB
Markdown
72 lines
No EOL
1.9 KiB
Markdown
# 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 |