daggerheart/templates/settings/appearance-settings.hbs

<div>
    <header class="dialog-header">
        <h1>{{localize 'DAGGERHEART.SETTINGS.Menu.appearance.name'}}</h1>
    </header>
    {{formGroup settingFields.schema.fields.displayFear value=settingFields._source.displayFear localize=true}}
    {{formGroup settingFields.schema.fields.showGenericStatusEffects value=settingFields._source.showGenericStatusEffects localize=true}}

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

    <fieldset>
        <legend>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.title"}}</legend>
        <div class="title-hint">{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.hint"}}</div>

        <section class='tab-navigation'>
            <div class='navigation-container'>
                <div class="navigation-inner-container">
                    <line-div></line-div>
                    <nav class='feature-tab sheet-tabs tabs' data-group='diceSoNice'>
                        {{#each tabs as |tab|}}
                            <a class='{{tab.id}} {{tab.cssClass}}' data-action='tab' data-group='{{tab.group}}' data-tab='{{tab.id}}'>
                                {{localize tab.label}}
                            </a>
                        {{/each}}
                    </nav>
                    <line-div></line-div>
                </div>
            </div>
        </section>

        <div class="field-section">
            <div class="split-section">
                <div class="label-container">
                    <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.foreground"}}</label>
                    {{formInput diceTab.fields.foreground value=diceTab.source.foreground localize=true}}
                </div>
                <div class="label-container">
                    <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.background"}}</label>
                    {{formInput diceTab.fields.background value=diceTab.source.background localize=true}}
                </div>
                <div class="label-container">
                    <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.outline"}}</label>
                    {{formInput diceTab.fields.outline value=diceTab.source.outline localize=true}}
                </div>
                <div class="label-container">
                    <label>{{localize "DAGGERHEART.SETTINGS.Menu.appearance.diceSoNice.edge"}}</label>
                    {{formInput diceTab.fields.edge value=diceTab.source.edge localize=true}}
                </div>
            </div>
        </div>
    </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>