<commit_before><?php
$key = "Styling";
$pageTitle = "ag-Grid Styling";
$pageDescription = "ag-Grid Styling";
$pageKeyboards = "ag-Grid Styling";
$pageGroup = "themes";
include '../documentation-main/documentation_header.php';
?>

<div>

    <h2 id="themes">
        <img src="../images/svg/docs/themes.svg" width="50" />
        Themes
    </h2>

    <note>
        <p>
            We are currently upgrading the provided. If using an old theme, you have the
            choice to move to a new theme. We will continue to keep the old themes for backwards
            compatibility. The current status of the themes is as follows:
            <style>
                .theme-table td {
                    border: 1px solid #aaa;
                    padding-left: 10px;
                    padding-right: 10px;
                }
                .theme-table th {
                    border: 1px solid #aaa;
                }
            </style>
            <table class="theme-table">
                <tr>
                    <th>Old Theme</th><th>New Theme</th><th>Preference</th>
                </tr>
                <tr>
                    <td>ag-fresh</td><td>-</td><td>Use ag-fresh for now</td>
                </tr>
                <tr>
                    <td>ag-dark</td><td>-</td><td>Use ag-dark for now.</td>
                </tr>
                <tr>
                    <td>ag-blue</td><td>-</td><td>Use ag-blue for now.</td>
                </tr>
                <tr>
                    <td>ag-material</td><td>ag-theme-material</td><td>Start using ag-theme-material</td>
                </tr>
            </table>
        </p>
        <p>
            In other words, the only theme with a new alternative right now is ag-material.
        </p>
        <pre>&lt;!-- If using the material theme, your code was like this: -->
&lt;ag-grid <b>class="ag-material"</b>>&lt;/ag-grid>

&lt;!-- To use the new theme, change it to this: -->
&lt;ag-grid <b>class="ag-theme-material"</b>>&lt;/ag-grid></pre>

        <p>
            Changing the themes is not an easy task. We have decided to do the material
            theme first and plan to do the other themes in future releases.
        </p>

        <p>
            If you are not using the provided themes, this will not impact you. The CSS classes
            used inside ag-Grid remain the same.
        </p>

    </note>

    <p>
        ag-Grid is designed to have its look and feel derived from a theme.
    </p>

    <p>
        Out of the box, five themes are provided: ag-fresh, ag-blue, ag-dark, ag-material and ag-bootstrap.
    </p>
    <p>
        To use a theme, add the theme class name to the div element where the ag-Grid directive is attached.
    </p>
    <p>
        The following is an example of using the ag-fresh theme:<br/>
        <pre>&lt;div ag-grid="gridOptions" class="ag-fresh">&lt;/div></pre>
    </p>
    <p>
        The following is an example of using the ag-dark theme:<br/>
        <pre>&lt;div ag-grid="gridOptions" class="ag-dark">&lt;/div></pre>
    </p>

    <h2>When to Create a Theme</h2>

    <p>
        You have the following options when choosing a theme:
        <ol>
            <li>Use one of the provided themes eg <i>ag-fresh</i>.</li>
            <li>Use one of the provided themes and override particular items to fine tune it.</li>
            <li>Create your own theme from scratch. This is the most difficult and you are more
            exposed to breaking changes in ag-Grid releases.</li>
        </ol>
    </p>

    <p>
        You should only create your own theme when options 1 and 2 above don't suit, as it is
        the most difficult.
        If you do decide to create your own theme, then you can use one of the provided themes and<commit_msg>added intro comment to themes<commit_after><?php
$key = "Styling";
$pageTitle = "ag-Grid Styling";
$pageDescription = "ag-Grid Styling";
$pageKeyboards = "ag-Grid Styling";
$pageGroup = "themes";
include '../documentation-main/documentation_header.php';
?>

<div>

    <h2 id="themes">
        <img src="../images/svg/docs/themes.svg" width="50" />
        Themes
    </h2>

    <p>
        ag-Grid is designed to have its look and feel derived from a theme.
    </p>

    <p>
        Out of the box, five themes are provided: ag-fresh, ag-blue, ag-dark, ag-material and ag-bootstrap.
    </p>
    <p>
        To use a theme, add the theme class name to the div element where the ag-Grid directive is attached.
    </p>
    <p>
        The following is an example of using the ag-fresh theme:<br/>
        <pre>&lt;div ag-grid="gridOptions" class="ag-fresh">&lt;/div></pre>
    </p>
    <p>
        The following is an example of using the ag-dark theme:<br/>
        <pre>&lt;div ag-grid="gridOptions" class="ag-dark">&lt;/div></pre>
    </p>

    <note>
        <p>
            We are currently upgrading the provided. If using an old theme, you have the
            choice to move to a new theme. We will continue to keep the old themes for backwards
            compatibility. The current status of the themes is as follows:
            <style>
                .theme-table td {
                    border: 1px solid #aaa;
                    padding-left: 10px;
                    padding-right: 10px;
                }
                .theme-table th {
                    border: 1px solid #aaa;
                }
            </style>
        <table class="theme-table">
            <tr>
                <th>Old Theme</th><th>New Theme</th><th>Preference</th>
            </tr>
            <tr>
                <td>ag-fresh</td><td>-</td><td>Use ag-fresh for now</td>
            </tr>
            <tr>
                <td>ag-dark</td><td>-</td><td>Use ag-dark for now.</td>
            </tr>
            <tr>
                <td>ag-blue</td><td>-</td><td>Use ag-blue for now.</td>
            </tr>
            <tr>
                <td>ag-material</td><td>ag-theme-material</td><td>Start using ag-theme-material</td>
            </tr>
        </table>
        </p>
        <p>
            In other words, the only theme with a new alternative right now is ag-material.
        </p>
        <pre>&lt;!-- If using the material theme, your code was like this: -->
&lt;ag-grid <b>class="ag-material"</b>>&lt;/ag-grid>

&lt;!-- To use the new theme, change it to this: -->
&lt;ag-grid <b>class="ag-theme-material"</b>>&lt;/ag-grid></pre>

        <p>
            Changing the themes is not an easy task. We have decided to do the material
            theme first and plan to do the other themes in future releases.
        </p>

        <p>
            If you are not using the provided themes, this will not impact you. The CSS classes
            used inside ag-Grid remain the same.
        </p>

    </note>

    <h2>When to Create a Theme</h2>

    <p>
        You have the following options when choosing a theme:
        <ol>
            <li>Use one of the provided themes eg <i>ag-fresh</i>.</li>
            <li>Use one of the provided themes and override particular items to fine tune it.</li>
            <li>Create your own theme from scratch. This is the most difficult and you are more
            exposed to breaking changes in ag-Grid releases.</li>
        </ol>
    </p>

    <p>
        You should only create your own theme when options 1 and 2 above don't suit, as it is
        the most difficult.
        If you do decide to create your own theme, then you can use one of the provided themes and
{'fraction_non_alphanumeric': 0.12273212379935966, 'fraction_numerical': 0.003735325506937033, 'mean_word_length': 1.6996759092545912, 'pattern_counts': {'":': 0, '<': 195, '<?xml version=': 0, '>': 215, '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': '1771332', 'n_tokens_mistral': 2277, 'n_tokens_neox': 2154, 'n_words': 797}