didi-lot2-backend/backend/services/gateway-auth-layer/didiKeycloak/themes

Keycloak Custom Theme Setup

Automatic Setup

Run the provided script after Keycloak is running:

./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:

--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