# Customizer.json

This file defines the amount of control you have over your theme's appearence.

Each theme has its own specific `customizer.json`. It defines, which variables are displayed by default or only in advanced mode. The file is splitted into two main parts, controls and groups.

## Controls

Controls define, how the value of a variable will be displayed in the customizer. By default, all variables are displayed inside an input element. You can change the default input field by using one of the following types.

Type | Description
--- | ---
`"type": "color"` | Turns input fields with a color value into an easy to handle color picker.
`"type": "select"` | Use this type to get a select box instead of an input field.
`"type": "font"` | Will turn into a select box with additional options like url or select box groups.

### Variables

After choosing the type of the input you need to define which variables should be affected by each type. You can use specific variables or just the wildcard character `*` to select a group of variables without setting every single variable.

### Specific variables

Affects only `@global-border` and `@global-light-border`.

    {
        "vars": [
            "@global-border",
            "@global-light-border"
        ]
    }

### Wildcard variables

Affects all variables ending with `-color` and `-background`.

    {
        "vars": [
            "*-color",
            "*-background"
        ]
    }

### Color picker

By setting `"type": "color"` the following example turns all variables which end with the word `-color` or `-background` into an easy to handle colorpicker, provided that the variable's value is a color value.

### Example

    {"controls": [
        {
            "type": "color",
            "vars": [
                "*-color",
                "*-background"
            ]
        }
    ]}

### Select element

If a variable should only use specific values, you can easily turn the input element into a select element by using `"type": "select"` and adding the selectable options.

### Example

    {"controls": [
        {
            "type": "select",
            "vars": [
                "*-weight"
            ],
            "options": [
                {"name": "Normal", "value": "normal"},
                {"name": "Bold", "value": "bold"}
            ]
        }
    ]}

### Fonts

When it comes to fonts, you can just use the select type like above or `"type": "font"` to create a select box for fonts, where you can add additional values like a font url or divide your fonts into groups.

### Example

    {"controls": [
        {
            "type": "font",
            "vars": [
                "*-font-family"
            ],
            "options": {
                "System Fonts": [
                    {"name": "Arial", "value": "\"Helvetica Neue\", Helvetica, Arial, sans-serif"},
                    {"name": "Consolas", "value": "Consolas, monospace, serif"}
                ],
                "Google Fonts": [
                    {"name": "Abel", "value": "'Abel'", "url":"http://fonts.googleapis.com/css?family=Abel"},
                    {"name": "Asul", "value": "'Asul'", "url":"http://fonts.googleapis.com/css?family=Asul"},
            }
        }
    ]}

## Groups

Groups define, which variables will be diplayed in the sidebar of the customizer. You can assemble related variables in a group, apply a title or display them in Advanced Mode.

### Example

The two set variables will be displayed in the sidebar of the customizer by default.

    {"groups": [
        {
            "label": "Backgrounds",
            "vars": [
                "@global-background",
                "@global-dark-background"
            ]
        }
    ]}

Shows all variables of the navbar component in Advanced Mode.

    {"groups": [
        {
            "label": "Navbar",
            "advanced": true,
            "vars": [
                "@navbar-*"
            ]
        },
    ]}