Skip to main content
Version: Next

Themes and ergonomics

Avanteam's appearance is fully customizable through the theme system (Skins). A clear portal in your company's colors promotes user adoption of the tool and strengthens your organization's visual identity.

Theme principles​

What is a theme?​

A theme is a set of style files (CSS, images) that define the visual appearance of the application:

  • Colors: Primary and secondary color palette
  • Fonts: Typography and text sizes
  • Logos: Brand images and icons
  • Layout: Spacing and margins

Theme configuration​

Access: Application Global Settings menu

General theme configuration

As a functional administrator, you can:

  • Select the active theme from those available
  • Create a new custom theme
  • Modify an existing theme
  • Duplicate a theme to create a variant

Theme editor​

The editor allows you to customize every visual aspect of the interface. Here's a detailed guide to exploit all its functionalities.

Primary colors​

These colors define your brand's visual identity and are used consistently throughout the application.

Primary Color​

Usage: This is your application's dominant color

  • Header and navigation bar
  • Main action buttons
  • Active and selected elements
  • Focus indicators

Examples:

  • Corporate blue: #0066CC
  • Eco green: #00A651
  • Industrial red: #E4002B

Tip: Choose a color that aligns with your brand guidelines

Secondary Color​

Usage: Accent color used sparingly

  • Floating action buttons
  • Important hyperlinks
  • Switches and toggles
  • Highlight elements

Tip: Choose a color complementary to your primary, with good contrast

Semantic colors (Intentions)​

Avanteam uses a universal color code to visually communicate the state of an operation. It's strongly recommended to maintain standard conventions to ensure intuitive understanding.

Success (Green)​

Usage:

  • Successfully validated operation
  • Approved file
  • Confirmation message
  • Positive status indicator

Standard color: #4CAF50 (green)

Where to find it:

  • "Validate" button
  • "Successfully saved" message
  • "Approved" status badge

Danger (Red)​

Usage:

  • System error
  • Destructive action (deletion)
  • Rejected file
  • Critical alert

Standard color: #F44336 (red)

Where to find it:

  • "Delete" button
  • Error message
  • "Rejected" badge
  • Warning icon

Warning (Orange)​

Usage:

  • Alert requiring attention
  • Overdue item
  • Action requiring confirmation
  • Intermediate status

Standard color: #FF9800 (orange)

Where to find it:

  • "Overdue" badge
  • "Attention required" message
  • Near deadline indicator

Information (Blue/Gray)​

Usage:

  • Neutral information
  • Contextual help
  • Documentation
  • "In progress" status

Standard color: #2196F3 (blue) or #9E9E9E (gray)

Where to find it:

  • Informative messages
  • Help bubbles
  • "In progress" badge

Element categories​

Text​

Defines font colors in different contexts.

On light background:

  • Primary text: Dark gray #212121 (avoid pure black #000000)
  • Secondary text: Medium gray #757575
  • Disabled text: Light gray #BDBDBD

On dark background:

  • Primary text: White #FFFFFF or very light gray #FAFAFA
  • Secondary text: Light gray #BDBDBD
  • Disabled text: Medium gray #757575

Tip: Always ensure sufficient contrast ratio (WCAG AA minimum: 4.5:1)

Background​

Background color of pages and components.

Application areas:

  • Page: General application background (usually white or very light gray)
  • Cards: Content blocks (usually white on gray background, or light gray on white background)
  • Navigation bar: Header and menus (usually primary color)
  • Footer: Footer (usually medium gray)

Variants:

  • Light background: #FFFFFF or #F5F5F5
  • Medium background: #EEEEEE
  • Dark background: #424242 or #212121

Status​

Specific colors related to record lifecycle.

Examples:

  • Draft: Gray #9E9E9E
  • In progress: Blue #2196F3
  • Under validation: Orange #FF9800
  • Validated: Green #4CAF50
  • Rejected: Red #F44336
  • Closed: Dark gray #616161
  • Archived: Very light gray #E0E0E0

Miscellaneous​

Technical interface elements.

Components:

  • Borders: Table and card separation lines (usually light gray #E0E0E0)
  • Shadows: Card depth effect (usually black at 10% opacity)
  • Separators: Horizontal lines (usually very light gray #F5F5F5)
  • Hover: Color on mouse hover (usually lighter version of main color)

Creating a new theme​

Never start from scratch. Duplicating an existing theme ensures a consistent base.

Procedure:

  1. Select an existing theme close to the desired result
  2. Click the Duplicate or Save as button
  3. Give an explicit name (e.g., "Avanteam Theme 2025", "Production Site Theme")
  4. Modify colors one by one
  5. Regularly test the rendering
  6. Save your modifications

Advantages:

  • All elements are pre-configured
  • Guaranteed visual consistency
  • Considerable time savings

Advanced customization​

For specific needs, you can adjust:

  • Fonts: Character sizes and families
  • Spacing: Component margins and padding
  • Rounded corners: Rounded border radius
  • Animations: Transitions and effects

Use cases​

Production environment theme​

Objective: Sober and professional interface for daily use

Configuration:

  • Primary: Corporate blue #0066CC
  • Secondary: Light blue #4A90E2
  • Background: White #FFFFFF
  • Text: Dark gray #333333
  • Success: Standard green #4CAF50
  • Danger: Standard red #F44336

Workshop theme​

Objective: High contrast for good readability in industrial environment

Configuration:

  • Primary: Bright orange #FF6600
  • Secondary: Yellow #FFD700
  • Background: Light gray #F5F5F5
  • Text: Black #000000 (increased size)
  • Contrast: Enhanced on all elements

Quality portal theme​

Objective: Visual identity aligned with certification (ISO 9001)

Configuration:

  • Primary: Quality green #00A651
  • Secondary: ISO blue #003DA5
  • Logo: Company quality logo
  • Favicon: Certification icon

Dark theme (Dark Mode)​

Objective: Reduce visual fatigue at the end of the day

Configuration:

  • Background: Anthracite gray #303030
  • Cards: Dark gray #424242
  • Text: White #FAFAFA
  • Primary: Lighter version of your main color
  • Borders: Medium gray #616161

Note: Dark mode is also individually accessible by each user via the profile menu

Best practices​

Design​

  • Consistency: Use your existing brand guidelines
  • Contrast: Always check readability (tools like WebAIM Contrast Checker)
  • Testing: View on different screens (PC, tablet, mobile)
  • Accessibility: Respect WCAG standards for users with disabilities
  • Simplicity: Don't multiply colors unnecessarily (3 to 5 colors maximum)

Maintenance​

  • Documentation: Note the color codes used (reference palette)
  • Versioning: Keep old versions in case of rollback
  • Communication: Warn users before a major change
  • Testing: Use a test environment before applying to production

Performance​

  • Optimization: Theme images must be optimized (reduced weight)
  • Cache: Clear cache after a theme change (AdminTools > Cache)
  • Reload: Users will need to refresh their browser (F5)

Theme application​

For the entire application​

Procedure:

  1. Configure your theme in the editor
  2. Save your modifications
  3. Activate the theme via Global Settings
  4. Clear the application cache (AdminTools > Cache)
  5. Communicate to users to refresh their browser

Impact: All users see the new theme immediately (after F5)

Individual dark mode​

Users can activate their own dark mode without impacting others:

User procedure:

  1. Click on profile (name at top right)
  2. Activate the Dark Mode switch
  3. Interface switches instantly

Particularity: This setting is personal and is preserved between sessions

Troubleshooting​

Theme doesn't apply​

Solutions:

  1. Clear application cache (AdminTools > Cache)
  2. Clear browser cache (Ctrl+F5)
  3. Check that theme is properly activated in settings
  4. Check logs to identify possible error

Some colors don't change​

Possible causes:

  • Browser cache not cleared
  • Colors hard-coded in custom views
  • Incomplete theme (all elements not defined)

Solution:

  • Start from a complete standard theme
  • Contact support if problem persists

Insufficient contrast​

Solution:

  • Use a verification tool (WebAIM Contrast Checker)
  • Increase contrast between text and background
  • Test with real users
  • Consult WCAG 2.1 standards

Pre-configured themes​

Avanteam offers several standard themes:

  • Default: Default theme, balanced and neutral
  • Light: Light theme, ideal for bright offices
  • Dark: Dark theme, reduces visual fatigue
  • High Contrast: Enhanced contrast for accessibility
  • Corporate: Sober professional theme

Tip: Start by testing these themes before creating your own

Resources​

Design tools​

  • Adobe Color: Creating harmonious palettes
  • Coolors: Palette generator
  • WebAIM Contrast Checker: Contrast verification
  • Material Design Color Tool: Material Design palette

Documentation​

  • Brand guidelines: Reference your company guidelines
  • Style guide: Document your choices (color codes, usage)
  • Screenshots: Keep visual examples

Support​

For specific needs (animated logo, complex theme), contact Avanteam support who can assist you with advanced customization.