<commit_before># OroThemeBundle

OroThemeBundle provides the basic theme support with the ability to change the original UI applying the extra CSS/SCSS files that are grouped into themes.

## Basic statements

* Bundle can provide CSS and templates that are required for it's UI;
* UI of bundles (css and templates markup) should be "themable", it means that CSS and UI components of bundle should
  be affectable by theme to change look and feel of application (at least colors and icons);
* A theme is a set of CSS/SCSS files that will be included at the end of all CSS files to cascade styles and change look and feel;

## Theme Properties

Each theme can have next properties:

* **name**
_required_
Unique name of the theme.

* **label**
_optional_
This will be displayed in theme management UI.

* **styles**
_required_
The list of CSS and SCSS files that represent a theme.

* **icon**
_optional_
Standard "favicon.ico" file for this theme.

* **logo**
_optional_
Logo that will be displayed in the UI.

* **screenshot**
_optional_
This be displayed in theme management UI.

## Adding a theme using config.yml

To add a theme you can use _config.yml_ file.

```
# add to config.yml next string to use mytheme theme
oro_theme:
    active_theme: mytheme
    themes:
        mytheme:
            styles:
                - mytheme/css/main.css
                - mytheme/css/ie.css
            label: My Theme
            icon: mytheme/images/favicon.ico
            logo: mytheme/images/logo.png
            screenshot: /mytheme/images/screenshot.png
```

Make sure that your root public sites directory (generally a "web" directory in symfony) contains mytheme directory
with all used files.

## Adding a theme using a bundle

Theme could be added in any bundle, place a file in _Resources/public/themes/\<theme_name\>/settings.yml_ path inside of bundle.
This file contains same configuration like in config.yml:

```
styles:
    - bundles/mybundle/themes/mytheme/css/main.css
    - bundles/mybundle/themes/mytheme/css/ie.css
label: My Theme
icon: bundles/mybundle/themes/mytheme/images/favicon.ico
logo: bundles/mybundle/themes/mytheme/images/logo.png
screenshot: bundles/mybundle/themes/mytheme/images/screenshot.png
```

## Overriding a theme

All themes settings are collected and merged at compile time of DI container. Bundle could override others bundle theme
by placing a file with theme _Resources/public/themes/\<theme_name\>/settings.yml_ in settings.yml path.


## Loading styles of theme

When application has active theme it's styles append to the end of the list of all CSS assets of bundles. Theme's styles
will override existing bundles styles to change look and feel of application.

To set active theme add next settings to _config.yml_

```
oro_theme:
    active_theme: <theme_name>
```

After this change was made next commends should be executed:

```
bin/console cache:clear
bin/console assets:install
bin/console assetic:dump
```


## Debugging theme styles

Each theme is appended to the list of CSS assets in group "theme". So, if you want to debug theme's
styles, you should use next configuration in _config.yml_:

```
oro_assetic:
    css_debug: [theme]
    # css_debug_all: true # if you want to debug all CSS assets
```

When you are making changes to theme's CSS don't forget to run next commands:

```
bin/console cache:clear # if you have changed some theme's setting, including adding/removing CSS/SCSS styles files.
bin/console assets:install # if you have changed themes files, you can use --symlink parameter, in this case you should install it only once
bin/console assetic:dump # if you are not using oro_assetic.css_debug: [theme] or oro_assetic.css_debug_all: true options
```

## Getting list of all available themes

There is a command _oro:theme:list_ for this purpose. Here is an example output of this command:

```
List of available themes:<commit_msg>BAP-18342: Update article "Customizing the Application Layout" in documentation<commit_after># OroThemeBundle

OroThemeBundle provides the basic theme support with the ability to change the original UI applying the extra CSS/SCSS files that are grouped into themes.

## Basic statements

* Bundle can provide CSS and templates that are required for it's UI;
* UI of bundles (css and templates markup) should be "themable", it means that CSS and UI components of bundle should
  be affectable by theme to change look and feel of application (at least colors and icons);
* A theme is a set of CSS/SCSS files that will be included at the end of all CSS files to cascade styles and change look and feel;

## Theme Properties

Each theme can have next properties:

* **name**
_required_
Unique name of the theme.

* **label**
_optional_
This will be displayed in theme management UI.

* **styles**
_required_
The list of CSS and SCSS files that represent a theme.

* **icon**
_optional_
Standard "favicon.ico" file for this theme.

* **logo**
_optional_
Logo that will be displayed in the UI.

* **screenshot**
_optional_
This be displayed in theme management UI.

## Adding a theme using config.yml

To add a theme you can use _config.yml_ file.

```
# add to config.yml next string to use mytheme theme
oro_theme:
    active_theme: mytheme
    themes:
        mytheme:
            styles:
                - mytheme/css/main.css
                - mytheme/css/ie.css
            label: My Theme
            icon: mytheme/images/favicon.ico
            logo: mytheme/images/logo.png
            screenshot: /mytheme/images/screenshot.png
```

Make sure that your root public sites directory (generally a "web" directory in symfony) contains mytheme directory
with all used files.

## Adding a theme using a bundle

Theme could be added in any bundle, place a file in _Resources/public/themes/\<theme_name\>/settings.yml_ path inside of bundle.
This file contains same configuration like in config.yml:

```
styles:
    - bundles/mybundle/themes/mytheme/css/main.css
    - bundles/mybundle/themes/mytheme/css/ie.css
label: My Theme
icon: bundles/mybundle/themes/mytheme/images/favicon.ico
logo: bundles/mybundle/themes/mytheme/images/logo.png
screenshot: bundles/mybundle/themes/mytheme/images/screenshot.png
```

## Overriding a theme

All themes settings are collected and merged at compile time of DI container. Bundle could override others bundle theme
by placing a file with theme _Resources/public/themes/\<theme_name\>/settings.yml_ in settings.yml path.


## Loading styles of theme

When application has active theme it's styles append to the end of the list of all CSS assets of bundles. Theme's styles
will override existing bundles styles to change look and feel of application.

To set active theme add next settings to _config.yml_

```
oro_theme:
    active_theme: <theme_name>
```

After this change was made next commends should be executed:

```
bin/console cache:clear
bin/console assets:install --symlink
bin/console oro:assets:build
```


## Debugging theme styles

Each theme is appended to the list of CSS assets in group "theme". So, if you want to debug theme's
styles, you should use next configuration in _config.yml_:

```
oro_assetic:
    css_debug: [theme]
    # css_debug_all: true # if you want to debug all CSS assets
```

When you are making changes to theme's CSS don't forget to run next commands:

```
bin/console cache:clear # if you have changed some theme's setting, including adding/removing CSS/SCSS styles files.
bin/console assets:install --symlink # if you have changed themes files, you can use --symlink parameter, in this case you should install it only once
bin/console oro:assets:build # if you are not using oro_assetic.css_debug: [theme] or oro_assetic.css_debug_all: true options
```

## Getting list of all available themes

There is a command _oro:theme:list_ for this purpose. Here is an example output of this command:

```
List of available themes:
{'fraction_non_alphanumeric': 0.07160931174089069, 'fraction_numerical': 0.0006325910931174089, 'mean_word_length': 3.8319070904645476, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5308105', 'n_tokens_mistral': 2294, 'n_tokens_neox': 2162, 'n_words': 1013}