Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time
title description toc canonical
Theme related configuration and developer documentation for Kimai

Kimai uses the AdminLTE theme which can be configured in the file config/packages/admin_lte.yaml. You find the theme specific documentation here.

All Kimai specific theme settings will be available in the twig templates with the global kimai_context key, e.g.

{% raw %}{{ kimai_context.select_type }}{% endraw %}

Default theme color

The default theme colors can be changed to one of the following choices:

  • skin-blue
  • skin-blue-light
  • skin-yellow
  • skin-yellow-light
  • skin-green
  • skin-green-light
  • skin-purple
  • skin-purple-light
  • skin-red
  • skin-red-light
  • skin-black
  • skin-black-light

Add this to your [local.yaml]({% link _documentation/ %}).

        skin: skin-blue-light

Please note: unless you change the [permissions]({% link _documentation/ %}), users can still change the theme color to their wish. It is recommended to leave the choice to the user, as colors and contrasts are not only a matter of personal choice but might also be necessary for people with visual impairments.

Searchable input types

The select boxes for customer, project and activity are by default (since 1.4) searchable Javascript components.

If you don't like the way this component behaves (eg. if you want native elements on mobile) you can deactivate it by setting the following config

        select_type: ~

This will turn the select-boxes into native select elements.

Active entries warning

A small colored warning sign will be shown, if a user has more than X active timesheet entries.

The amount X is configured in your local.yaml with the setting timesheet.active_entries.soft_limit (see []({% link _documentation/ %})).


Kimai allows you to configure icons in several places (provided by Font Awesome 5) and ships with a pre-defined list of icon aliases to guarantee a consistent look.

The pre-defined icons aliases can be found in this [IconExtension]({{ site.kimai_v2_file }}/src/Twig/IconExtension.php).

Icon aliases can be used by applying the icon filter, e.g.

{% raw %}<i class="{{ 'money'|icon }}"></i>{% endraw %}


Kimai allows you to use different color schemes in several places.

Possible values are:

  • aqua
  • black
  • blue
  • gray
  • green
  • purple
  • red
  • yellow