Color themes

Attention! We strongly recommend first to learn more about Sites module REST documentation to understand how the module functions (with REST available in Bitrix24 Self-hosted editions). View this documentation as useful source when working with Bitrix24 Self-hosted editions and find out more details about API and only REST is not enough.

Currently the system provides color themes, listed below. Please note, that template has both visual format (shapes, formats) and font types. Template site is always created with a specific color theme and font type. Usually, they match (font type is a small additional file). When user changes visual theme, font theme inside stays the same and can be changed only by developer via software. It is an intended system behaviour.

Note: theme names starting with numbers at the start of the list is not a typo. Portion of color theme names include such numbers.

Theme expansion

To add a next theme, execute the following sequence of actions:

1. First, create a directory for your theme via the path /bitrix/templates/<TEMPLATE_ID>/themes/<YOUR_CODE>/ and similar directory for the font type /bitrix/templates/<TEMPLATE_ID>/themes-typo/<YOUR_CODE>/. Where <YOUR_CODE> – your theme code, for example, mytheme.
2. Similarly to existing themes (or based on them), create your own files in these directories. All files in these directories will be connected both as page styles.
3. Register your theme via the handler

   $eventManager = \Bitrix\Main\EventManager::getInstance();
   $eventManager->addEventHandler('landing', 'onGetThemeColors',
      function(\Bitrix\Main\Event $event)
      {
         $result = new \Bitrix\Main\Entity\EventResult;
         $colors = $event->getParameter('colors');
   
         $colors['mytheme'] = array(
            'name' => 'Моя тема',
            'color' => '#cdcdcd',
            'base' => true
         );
   
         $result->modifyFields(array(
            'colors' => $colors
         ));
   
         return $result;
      }
   );

   Register the theme via this example:
   – with code mytheme
   – with name 'My theme'
   – with color #cdcdcd (to display in the interface)
   – base key can be missing, but in case of true, its responsible for displaying theme in template preview.
4. After that, your theme can be selected via the editing interface or use via software.