daggerheart/templates/settings/appearance-settings.hbs

<div>
    <fieldset>
        <legend>{{localize "DAGGERHEART.Settings.Menu.Appearance.duality"}}</legend>

        {{formInput settingFields.schema.fields.dualityColorScheme value=settingFields._source.dualityColorScheme localize=true}}

        <h2>{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.title"}}</h2>
        <div class="title-hint">{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.hint"}}</div>

        <fieldset>
            <legend>{{localize "DAGGERHEART.General.Hope"}}</legend>

            <div class="field-section">
                <div class="split-section">
                    <div class="label-container">
                        <label>{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.foreground"}}</label>
                        {{formInput settingFields.schema.fields.diceSoNice.fields.hope.fields.foreground value=settingFields._source.diceSoNice.hope.foreground localize=true}}
                    </div>
                    <div class="label-container">
                        <label>{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.background"}}</label>
                        {{formInput settingFields.schema.fields.diceSoNice.fields.hope.fields.background value=settingFields._source.diceSoNice.hope.background localize=true}}
                    </div>
                    <div class="label-container">
                        <label>{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.outline"}}</label>
                        {{formInput settingFields.schema.fields.diceSoNice.fields.hope.fields.outline value=settingFields._source.diceSoNice.hope.outline localize=true}}
                    </div>
                    <div class="label-container">
                        <label>{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.edge"}}</label>
                        {{formInput settingFields.schema.fields.diceSoNice.fields.hope.fields.edge value=settingFields._source.diceSoNice.hope.edge localize=true}}
                    </div>
                </div>
            </div>
        </fieldset>
        <fieldset>
            <legend>{{localize "DAGGERHEART.General.Fear"}}</legend>

            <div class="field-section">
                <div class="split-section">
                    <div class="label-container">
                        <label>{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.foreground"}}</label>
                        {{formInput settingFields.schema.fields.diceSoNice.fields.fear.fields.foreground value=settingFields._source.diceSoNice.fear.foreground localize=true}}
                    </div>
                    <div class="label-container">
                        <label>{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.background"}}</label>
                        {{formInput settingFields.schema.fields.diceSoNice.fields.fear.fields.background value=settingFields._source.diceSoNice.fear.background localize=true}}
                    </div>
                    <div class="label-container">
                        <label>{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.outline"}}</label>
                        {{formInput settingFields.schema.fields.diceSoNice.fields.fear.fields.outline value=settingFields._source.diceSoNice.fear.outline localize=true}}
                    </div>
                    <div class="label-container">
                        <label>{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.edge"}}</label>
                        {{formInput settingFields.schema.fields.diceSoNice.fields.fear.fields.edge value=settingFields._source.diceSoNice.fear.edge localize=true}}
                    </div>
                </div>
            </div>
        </fieldset>
        <fieldset>
            <legend>{{localize "DAGGERHEART.General.Advantage.Full"}}</legend>

            <div class="field-section">
                <div class="split-section">
                    <div class="label-container">
                        <label>{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.foreground"}}</label>
                        {{formInput settingFields.schema.fields.diceSoNice.fields.advantage.fields.foreground value=settingFields._source.diceSoNice.advantage.foreground localize=true}}
                    </div>
                    <div class="label-container">
                        <label>{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.background"}}</label>
                        {{formInput settingFields.schema.fields.diceSoNice.fields.advantage.fields.background value=settingFields._source.diceSoNice.advantage.background localize=true}}
                    </div>
                    <div class="label-container">
                        <label>{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.outline"}}</label>
                        {{formInput settingFields.schema.fields.diceSoNice.fields.advantage.fields.outline value=settingFields._source.diceSoNice.advantage.outline localize=true}}
                    </div>
                    <div class="label-container">
                        <label>{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.edge"}}</label>
                        {{formInput settingFields.schema.fields.diceSoNice.fields.advantage.fields.edge value=settingFields._source.diceSoNice.advantage.edge localize=true}}
                    </div>
                </div>
            </div>
        </fieldset>
        <fieldset>
            <legend>{{localize "DAGGERHEART.General.Disadvantage.Full"}}</legend>

            <div class="field-section">
                <div class="split-section">
                    <div class="label-container">
                        <label>{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.foreground"}}</label>
                        {{formInput settingFields.schema.fields.diceSoNice.fields.disadvantage.fields.foreground value=settingFields._source.diceSoNice.disadvantage.foreground localize=true}}
                    </div>
                    <div class="label-container">
                        <label>{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.background"}}</label>
                        {{formInput settingFields.schema.fields.diceSoNice.fields.disadvantage.fields.background value=settingFields._source.diceSoNice.disadvantage.background localize=true}}
                    </div>
                    <div class="label-container">
                        <label>{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.outline"}}</label>
                        {{formInput settingFields.schema.fields.diceSoNice.fields.disadvantage.fields.outline value=settingFields._source.diceSoNice.disadvantage.outline localize=true}}
                    </div>
                    <div class="label-container">
                        <label>{{localize "DAGGERHEART.Settings.Menu.Appearance.DiceSoNice.edge"}}</label>
                        {{formInput settingFields.schema.fields.diceSoNice.fields.disadvantage.fields.edge value=settingFields._source.diceSoNice.disadvantage.edge localize=true}}
                    </div>
                </div>
            </div>
        </fieldset>
    </fieldset>

    <footer class="form-footer">
        <button data-action="reset">
            <i class="fa-solid fa-arrow-rotate-left"></i>
            <span>{{localize "Reset"}}</span>
        </button>
        <button data-action="save" >
            <i class="fa-solid fa-floppy-disk"></i>
            <span>{{localize "Save Changes"}}</span>
        </button>
    </footer>
</div>