foundry/Data/modules/dice-so-nice/templates/partial-appearance.html

<div class="tab tabAppearance" data-tab="{{dicetype}}" data-group="dsn-dice">
    <div class="form-group">
        <label>{{localize "DICESONICE.system"}}</label>
        <select data-system data-dicetype="{{dicetype}}" name="appearance[{{dicetype}}][system]">
            {{#select appearance.system}}
            {{#each systemList as |name key|}}
            <option value="{{key}}">{{name}}</option>
            {{/each}}
            {{/select}}
        </select>
    </div>

    <div class="form-group">
        <label>{{localize "DICESONICE.colorset"}}</label>
        <select data-colorset data-dicetype="{{dicetype}}" name="appearance[{{dicetype}}][colorset]">
            {{#select appearance.colorset}}
            {{#each colorsetList as |group key|}}
            <optgroup label="{{key}}">
                {{#each group as |name id|}}
                <option value="{{id}}">{{name}}</option>
                {{/each}}
            </optgroup>
            {{/each}}
            {{/select}}
        </select>
        <p class="notes">{{localize "DICESONICE.colorsetDesc"}}</p>
    </div>

    <div class="form-group">
        <label>{{localize "DICESONICE.texture"}}</label>
        <select data-texture data-dicetype="{{dicetype}}" name="appearance[{{dicetype}}][texture]">
            {{#select appearance.texture}}
            {{#each textureList as |name key|}}
            <option value="{{key}}">{{name}}</option>
            {{/each}}
            {{/select}}
        </select>
    </div>

    <div class="form-group">
        <label>{{localize "DICESONICE.material"}}</label>
        <select data-material data-dicetype="{{dicetype}}" name="appearance[{{dicetype}}][material]">
            {{#select appearance.material}}
            {{#each materialList as |name key|}}
            <option value="{{key}}">{{name}}</option>
            {{/each}}
            {{/select}}
        </select>
    </div>

    <div class="form-group">
        <label>{{localize "DICESONICE.font"}}</label>
        <select data-font data-dicetype="{{dicetype}}" name="appearance[{{dicetype}}][font]">
            {{#select appearance.font}}
            {{#each fontList as |name key|}}
            <option value="{{key}}">{{name}}</option>
            {{/each}}
            {{/select}}
        </select>
    </div>

    <div class="form-group">
        <label>{{localize "DICESONICE.labelColor"}}</label>
        <div class="form-fields">
            <input type="text" data-labelColor data-dicetype="{{dicetype}}" name="appearance[{{dicetype}}][labelColor]" value="{{appearance.labelColor}}" data-dtype="String" />
            <input type="color" name="appearance[{{dicetype}}][labelColorSelector]" value="{{appearance.labelColor}}"
                data-edit="appearance[{{dicetype}}][labelColor]" data-labelColorSelector />
        </div>
    </div>

    <div class="form-group">
        <label>{{localize "DICESONICE.diceColor"}}</label>
        <div class="form-fields">
            <input type="text" data-diceColor data-dicetype="{{dicetype}}" name="appearance[{{dicetype}}][diceColor]" value="{{appearance.diceColor}}" data-dtype="String" />
            <input type="color" name="appearance[{{dicetype}}][diceColorSelector]" value="{{appearance.diceColor}}"
                data-edit="appearance[{{dicetype}}][diceColor]" data-diceColorSelector />
        </div>
    </div>

    <div class="form-group">
        <label>{{localize "DICESONICE.outlineColor"}}</label>
        <div class="form-fields">
            <input type="text" data-outlineColor data-dicetype="{{dicetype}}" name="appearance[{{dicetype}}][outlineColor]" value="{{appearance.outlineColor}}"
                data-dtype="String" />
            <input type="color" name="appearance[{{dicetype}}][outlineColorSelector]" value="{{appearance.outlineColor}}"
                data-edit="appearance[{{dicetype}}][outlineColor]" data-outlineColorSelector />
        </div>
    </div>

    <div class="form-group">
        <label>{{localize "DICESONICE.edgeColor"}}</label>
        <div class="form-fields">
            <input type="text" data-edgeColor data-dicetype="{{dicetype}}" name="appearance[{{dicetype}}][edgeColor]" value="{{appearance.edgeColor}}" data-dtype="String" />
            <input type="color" name="appearance[{{dicetype}}][edgeColorSelector]" value="{{appearance.edgeColor}}"
                data-edit="appearance[{{dicetype}}][edgeColor]" data-edgeColorSelector />
        </div>
    </div>
</div>