Added AppearanceMenu allowing modification of DiceSoNice Duality presets

daggerheart.mjs

@@ -5,12 +5,12 @@ import * as documents from './module/documents/_module.mjs';
 import RegisterHandlebarsHelpers from './module/helpers/handlebarsHelper.mjs';
 import DhpCombatTracker from './module/ui/combatTracker.mjs';
 import { GMUpdateEvent, handleSocketEvent, socketEvent } from './module/helpers/socket.mjs';
-import { registerDHPSettings } from './module/applications/settings.mjs';
+import { registerDHSettings } from './module/applications/settings.mjs';
 import DhpChatLog from './module/ui/chatLog.mjs';
 import DhpPlayers from './module/ui/players.mjs';
 import DhpRuler from './module/ui/ruler.mjs';
 import DhpTokenRuler from './module/ui/tokenRuler.mjs';
-import { dualityRollEnricher, getDualityMessage } from './module/enrichers/DualityRollEnricher.mjs';
+import { dualityRollEnricher } from './module/enrichers/DualityRollEnricher.mjs';
 import { getCommandTarget, rollCommandToJSON, setDiceSoNiceForDualityRoll } from './module/helpers/utils.mjs';
 import { abilities } from './module/config/actorConfig.mjs';
 
@@ -97,7 +97,7 @@ Hooks.once('init', () => {
 
     game.socket.on(`system.${SYSTEM.id}`, handleSocketEvent);
 
-    registerDHPSettings();
+    registerDHSettings();
     RegisterHandlebarsHelpers.registerHelpers();
 
     return preloadHandlebarsTemplates();

lang/en.json

@@ -46,6 +46,21 @@
                     "CloseLabel": "Close",
                     "FarLabel": "Far",
                     "VeryFarLabel": "Very Far"
+                },
+                "Appearance": {
+                    "title": "Appearance Settings",
+                    "label": "Appearance Settings",
+                    "hint": "Modify the look of various parts of the system",
+                    "name": "Appearance Settings",
+                    "duality": "Duality Rolls",
+                    "DiceSoNice": {
+                        "title": "Dice So Nice",
+                        "hint": "Coloration of Hope and Fear dice if the Dice So Nice module is used.",
+                        "foreground": "Foreground",
+                        "background": "Background",
+                        "outline": "Outline",
+                        "edge": "Edge"
+                    }
                 }
             },
             "Automation": {

module/applications/chatMessage.mjs

@@ -1,5 +1,5 @@
-import { DualityRollColor } from '../config/settingsConfig.mjs';
 import DhpDualityRoll from '../data/dualityRoll.mjs';
+import { DualityRollColor } from '../data/settings/Appearance.mjs';
 
 export default class DhpChatMesssage extends ChatMessage {
     async renderHTML() {
@@ -16,7 +16,7 @@ export default class DhpChatMesssage extends ChatMessage {
         const html = await super.renderHTML();
         if (
             this.type === 'dualityRoll' &&
-            game.settings.get(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.DualityRollColor) ===
+            game.settings.get(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.appearance).dualityColorScheme ===
                 DualityRollColor.colorful.value
         ) {
             html.classList.add('duality');

module/applications/settings.mjs

@@ -1,4 +1,5 @@
-import { DualityRollColor } from '../config/settingsConfig.mjs';
+import DhAppearance from '../data/settings/Appearance.mjs';
+import DHAppearanceSettings from './settings/appearanceSettings.mjs';
 
 class DhpAutomationSettings extends FormApplication {
     constructor(object = {}, options = {}) {
@@ -160,7 +161,7 @@ class DhpRangeSettings extends FormApplication {
     }
 }
 
-export const registerDHPSettings = () => {
+export const registerDHSettings = () => {
     // const debouncedReload = foundry.utils.debounce(() => window.location.reload(), 100);
 
     game.settings.register(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.General.AbilityArray, {
@@ -215,15 +216,11 @@ export const registerDHPSettings = () => {
         }
     });
 
-    game.settings.register(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.DualityRollColor, {
+    game.settings.register(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.appearance, {
-        name: game.i18n.localize('DAGGERHEART.Settings.DualityRollColor.Name'),
-        hint: game.i18n.localize('DAGGERHEART.Settings.DualityRollColor.Hint'),
         scope: 'client',
         config: true,
-        type: Number,
+        type: DhAppearance,
-        choices: Object.values(DualityRollColor),
+        default: DhAppearance.defaultSchema
-        default: DualityRollColor.colorful.value,
-        requiresReload: true
     });
 
     game.settings.registerMenu(SYSTEM.id, SYSTEM.SETTINGS.menu.Automation.Name, {
@@ -250,53 +247,13 @@ export const registerDHPSettings = () => {
         type: DhpRangeSettings,
         restricted: true
     });
+
+    game.settings.registerMenu(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.appearance, {
+        name: game.i18n.localize('DAGGERHEART.Settings.Menu.Appearance.title'),
+        label: game.i18n.localize('DAGGERHEART.Settings.Menu.Appearance.label'),
+        hint: game.i18n.localize('DAGGERHEART.Settings.Menu.Appearance.hint'),
+        icon: 'fa-solid fa-palette',
+        type: DHAppearanceSettings,
+        restricted: false
+    });
 };
-
-// const {HandlebarsApplicationMixin, ApplicationV2} = foundry.applications.api;
-
-// export default class DhpSettings extends HandlebarsApplicationMixin(ApplicationV2) {
-//     constructor(actor, shortrest){
-//         super({});
-
-//         this.actor = actor;
-//         this.selectedActivity = null;
-//         this.shortrest = shortrest;
-
-//         this.customActivity = SYSTEM.GENERAL.downtime.custom;
-//     }
-
-//     get title(){
-//         return game.i18n.localize("DAGGERHEART.Application.Settings.Title");
-//     }
-
-//     static DEFAULT_OPTIONS = {
-//         tag: 'form',
-//         classes: ["daggerheart", "application", "settings"],
-//         position: { width: 800, height: 'auto' },
-//         actions: {
-//             selectActivity: this.selectActivity,
-//         },
-//         form: { handler: this.updateData }
-//     };
-
-//     static PARTS = {
-//         application: {
-//             id: "settings",
-//             template: "systems/daggerheart/templates/application/settings.hbs"
-//         }
-//     }
-
-//     async _prepareContext(_options) {
-//         const context = await super._prepareContext(_options);
-
-//         return context;
-//     }
-
-//     static async updateData(event, element, formData){
-//         this.render();
-//     }
-
-//     static close(){
-//         super.close();
-//     }
-// }

module/applications/settings/appearanceSettings.mjs

@@ -0,0 +1,59 @@
+import DhAppearance from '../../data/settings/Appearance.mjs';
+
+const { HandlebarsApplicationMixin, ApplicationV2 } = foundry.applications.api;
+
+export default class DHAppearanceSettings extends HandlebarsApplicationMixin(ApplicationV2) {
+    constructor() {
+        super({});
+
+        this.settings = new DhAppearance(
+            game.settings.get(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.appearance).toObject()
+        );
+    }
+
+    get title() {
+        return game.i18n.localize('DAGGERHEART.Settings.Menu.Appearance.name');
+    }
+
+    static DEFAULT_OPTIONS = {
+        tag: 'form',
+        id: 'daggerheart-appearance-settings',
+        classes: ['daggerheart', 'setting', 'dh-style'],
+        position: { width: '600', height: 'auto' },
+        actions: {
+            reset: this.reset,
+            save: this.save
+        },
+        form: { handler: this.updateData, submitOnChange: true }
+    };
+
+    static PARTS = {
+        main: {
+            template: 'systems/daggerheart/templates/settings/appearance-settings.hbs'
+        }
+    };
+
+    async _prepareContext(_options) {
+        const context = await super._prepareContext(_options);
+        context.settingFields = this.settings;
+
+        return context;
+    }
+
+    static async updateData(event, element, formData) {
+        const updatedSettings = foundry.utils.expandObject(formData.object);
+
+        await this.settings.updateSource(updatedSettings);
+        this.render();
+    }
+
+    static async reset() {
+        this.settings = new DhAppearance();
+        this.render();
+    }
+
+    static async save() {
+        await game.settings.set(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.appearance, this.settings.toObject());
+        this.close();
+    }
+}

module/config/generalConfig.mjs

@@ -247,51 +247,43 @@ export const diceTypes = {
     d20: 'd20'
 };
 
-export const diceSoNicePresets = {
+export const getDiceSoNicePresets = () => {
-    hope: {
+    const { diceSoNice } = game.settings.get(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.appearance);
-        colorset: 'inspired',
+
-        foreground: '#FFFFFF',
+    return {
-        background: '#ffe760',
+        hope: {
-        outline: '#000000',
+            ...diceSoNice.hope,
-        edge: '#FFFFFF',
+            colorset: 'inspired',
-        texture: 'bloodmoon',
+            texture: 'bloodmoon',
-        material: 'metal',
+            material: 'metal',
-        font: 'Arial Black',
+            font: 'Arial Black',
-        system: 'standard'
+            system: 'standard'
-    },
+        },
-    fear: {
+        fear: {
-        colorset: 'bloodmoon',
+            ...diceSoNice.fear,
-        foreground: '#000000',
+            colorset: 'bloodmoon',
-        background: '#0032b1',
+            texture: 'bloodmoon',
-        outline: '#FFFFFF',
+            material: 'metal',
-        edge: '#000000',
+            font: 'Arial Black',
-        texture: 'bloodmoon',
+            system: 'standard'
-        material: 'metal',
+        },
-        font: 'Arial Black',
+        advantage: {
-        system: 'standard'
+            ...diceSoNice.advantage,
-    },
+            colorset: 'bloodmoon',
-    advantage: {
+            texture: 'bloodmoon',
-        colorset: 'bloodmoon',
+            material: 'metal',
-        foreground: '#FFFFFF',
+            font: 'Arial Black',
-        background: '#008000',
+            system: 'standard'
-        outline: '#000000',
+        },
-        edge: '#FFFFFF',
+        disadvantage: {
-        texture: 'bloodmoon',
+            ...diceSoNice.disadvantage,
-        material: 'metal',
+            colorset: 'bloodmoon',
-        font: 'Arial Black',
+            texture: 'bloodmoon',
-        system: 'standard'
+            material: 'metal',
-    },
+            font: 'Arial Black',
-    disadvantage: {
+            system: 'standard'
-        colorset: 'bloodmoon',
+        }
-        foreground: '#000000',
+    };
-        background: '#b30000',
-        outline: '#FFFFFF',
-        edge: '#000000',
-        texture: 'bloodmoon',
-        material: 'metal',
-        font: 'Arial Black',
-        system: 'standard'
-    }
 };
 
 export const refreshTypes = {

module/config/settingsConfig.mjs

@@ -25,16 +25,5 @@ export const gameSettings = {
         AbilityArray: 'AbilityArray',
         RangeMeasurement: 'RangeMeasurement'
     },
-    DualityRollColor: 'DualityRollColor'
+    appearance: 'Appearance'
-};
-
-export const DualityRollColor = {
-    colorful: {
-        value: 0,
-        label: 'DAGGERHEART.Settings.DualityRollColor.Options.Colorful'
-    },
-    normal: {
-        value: 1,
-        label: 'DAGGERHEART.Settings.DualityRollColor.Options.Normal'
-    }
 };

module/data/dualityRoll.mjs

@@ -1,4 +1,4 @@
-import { DualityRollColor } from '../config/settingsConfig.mjs';
+import { DualityRollColor } from './settings/Appearance.mjs';
 
 const fields = foundry.data.fields;
 const diceField = () =>
@@ -106,7 +106,7 @@ export default class DhpDualityRoll extends foundry.abstract.TypeDataModel {
 
     get colorful() {
         return (
-            game.settings.get(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.DualityRollColor) ===
+            game.settings.get(SYSTEM.id, SYSTEM.SETTINGS.gameSettings.appearance).dualityColorScheme ===
             DualityRollColor.colorful.value
         );
     }

module/data/settings/Appearance.mjs

@@ -0,0 +1,51 @@
+export default class DhAppearance extends foundry.abstract.DataModel {
+    static defineSchema() {
+        const fields = foundry.data.fields;
+        return {
+            dualityColorScheme: new fields.StringField({
+                required: true,
+                choices: DualityRollColor,
+                initial: DualityRollColor.normal.value
+            }),
+            diceSoNice: new fields.SchemaField({
+                hope: new fields.SchemaField({
+                    foreground: new fields.ColorField({ required: true, initial: '#ffffff' }),
+                    background: new fields.ColorField({ required: true, initial: '#ffe760' }),
+                    outline: new fields.ColorField({ required: true, initial: '#000000' }),
+                    edge: new fields.ColorField({ required: true, initial: '#ffffff' })
+                }),
+                fear: new fields.SchemaField({
+                    foreground: new fields.ColorField({ required: true, initial: '#000000' }),
+                    background: new fields.ColorField({ required: true, initial: '#0032b1' }),
+                    outline: new fields.ColorField({ required: true, initial: '#ffffff' }),
+                    edge: new fields.ColorField({ required: true, initial: '#000000' })
+                }),
+                advantage: new fields.SchemaField({
+                    foreground: new fields.ColorField({ required: true, initial: '#ffffff' }),
+                    background: new fields.ColorField({ required: true, initial: '#008000' }),
+                    outline: new fields.ColorField({ required: true, initial: '#000000' }),
+                    edge: new fields.ColorField({ required: true, initial: '#ffffff' })
+                }),
+                disadvantage: new fields.SchemaField({
+                    foreground: new fields.ColorField({ required: true, initial: '#000000' }),
+                    background: new fields.ColorField({ required: true, initial: '#b30000' }),
+                    outline: new fields.ColorField({ required: true, initial: '#ffffff' }),
+                    edge: new fields.ColorField({ required: true, initial: '#000000' })
+                })
+            })
+        };
+    }
+
+    static defaultSchema = {};
+}
+
+export const DualityRollColor = {
+    colorful: {
+        value: 'colorful',
+        label: 'DAGGERHEART.Settings.DualityRollColor.Options.Colorful'
+    },
+    normal: {
+        value: 'normal',
+        label: 'DAGGERHEART.Settings.DualityRollColor.Options.Normal'
+    }
+};

module/helpers/utils.mjs

@@ -1,4 +1,4 @@
-import { diceSoNicePresets } from '../config/generalConfig.mjs';
+import { diceSoNicePresets, getDiceSoNicePresets } from '../config/generalConfig.mjs';
 
 export const loadCompendiumOptions = async compendiums => {
     const compendiumValues = [];
@@ -122,6 +122,7 @@ export const getCommandTarget = () => {
 };
 
 export const setDiceSoNiceForDualityRoll = (rollResult, advantage, disadvantage) => {
+    const diceSoNicePresets = getDiceSoNicePresets();
     rollResult.dice[0].options.appearance = diceSoNicePresets.hope;
     rollResult.dice[1].options.appearance = diceSoNicePresets.fear;
     if (advantage) {

styles/daggerheart.css

@@ -3091,6 +3091,39 @@ div.daggerheart.views.multiclass {
   transform: translateY(-20px);
   transform-origin: top;
 }
+.application.setting.dh-style fieldset h2,
+.application.setting.dh-style fieldset h3,
+.application.setting.dh-style fieldset h4 {
+  margin: 8px 0 4px;
+  text-align: center;
+}
+.application.setting.dh-style fieldset .title-hint {
+  font-size: 12px;
+  font-variant: small-caps;
+  text-align: center;
+}
+.application.setting.dh-style fieldset .field-section .split-section {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+.application.setting.dh-style fieldset .label-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+.application.setting.dh-style fieldset .label-container label {
+  align-self: center;
+  text-align: center;
+}
+.application.setting.dh-style footer {
+  margin-top: 8px;
+  display: flex;
+  gap: 8px;
+}
+.application.setting.dh-style footer button {
+  flex: 1;
+}
 .sheet.daggerheart.dh-style .tab-navigation {
   margin: 5px 0;
   height: 40px;

styles/less/global/elements.less

@@ -1,158 +1,203 @@
-@import '../utils/colors.less';
+@import '../utils/colors.less';
-@import '../utils/fonts.less';
+@import '../utils/fonts.less';
-
+
-.application.sheet.dh-style {
+.application.sheet.dh-style {
-    border: 1px solid light-dark(@dark-blue, @golden);
+    border: 1px solid light-dark(@dark-blue, @golden);
-
+
-    input[type='text'],
+    input[type='text'],
-    input[type='number'] {
+    input[type='number'] {
-        background: light-dark(transparent, transparent);
+        background: light-dark(transparent, transparent);
-        border-radius: 6px;
+        border-radius: 6px;
-        box-shadow: 0 4px 30px @soft-shadow;
+        box-shadow: 0 4px 30px @soft-shadow;
-        backdrop-filter: blur(9.5px);
+        backdrop-filter: blur(9.5px);
-        -webkit-backdrop-filter: blur(9.5px);
+        -webkit-backdrop-filter: blur(9.5px);
-        outline: none;
+        outline: none;
-        color: light-dark(@dark-blue, @golden);
+        color: light-dark(@dark-blue, @golden);
-        border: 1px solid light-dark(@dark, @beige);
+        border: 1px solid light-dark(@dark, @beige);
-
+
-        &:hover[type='text'],
+        &:hover[type='text'],
-        &:hover[type='number'],
+        &:hover[type='number'],
-        &:focus[type='text'],
+        &:focus[type='text'],
-        &:focus[type='number'] {
+        &:focus[type='number'] {
-            background: light-dark(@soft-shadow, @semi-transparent-dark-blue);
+            background: light-dark(@soft-shadow, @semi-transparent-dark-blue);
-            box-shadow: none;
+            box-shadow: none;
-            outline: 2px solid light-dark(@dark, @beige);
+            outline: 2px solid light-dark(@dark, @beige);
-        }
+        }
-    }
+    }
-
+
-    input[type='checkbox'] {
+    input[type='checkbox'] {
-        &:checked::after {
+        &:checked::after {
-            color: light-dark(@dark-blue, @golden);
+            color: light-dark(@dark-blue, @golden);
-        }
+        }
-        &::before {
+        &::before {
-            color: light-dark(@golden, @dark-blue);
+            color: light-dark(@golden, @dark-blue);
-        }
+        }
-    }
+    }
-
+
-    button {
+    button {
-        background: light-dark(transparent, @golden);
+        background: light-dark(transparent, @golden);
-        border: 1px solid light-dark(@dark-blue, @dark-blue);
+        border: 1px solid light-dark(@dark-blue, @dark-blue);
-        color: light-dark(@dark-blue, @dark-blue);
+        color: light-dark(@dark-blue, @dark-blue);
-        outline: none;
+        outline: none;
-        box-shadow: none;
+        box-shadow: none;
-
+
-        &:hover {
+        &:hover {
-            background: light-dark(@light-black, @dark-blue);
+            background: light-dark(@light-black, @dark-blue);
-            color: light-dark(@dark-blue, @golden);
+            color: light-dark(@dark-blue, @golden);
-        }
+        }
-    }
+    }
-
+
-    select {
+    select {
-        background: light-dark(transparent, transparent);
+        background: light-dark(transparent, transparent);
-        color: light-dark(@dark, @beige);
+        color: light-dark(@dark, @beige);
-        font-family: @font-body;
+        font-family: @font-body;
-        outline: 2px solid transparent;
+        outline: 2px solid transparent;
-        border: 1px solid light-dark(@dark, @beige);
+        border: 1px solid light-dark(@dark, @beige);
-
+
-        &:focus,
+        &:focus,
-        &:hover {
+        &:hover {
-            outline: 2px solid light-dark(@dark, @beige);
+            outline: 2px solid light-dark(@dark, @beige);
-            box-shadow: none;
+            box-shadow: none;
-        }
+        }
-
+
-        & option {
+        & option {
-            color: @beige;
+            color: @beige;
-            background-color: @dark-blue;
+            background-color: @dark-blue;
-            border-radius: 6px;
+            border-radius: 6px;
-        }
+        }
-    }
+    }
-
+
-    p {
+    p {
-        margin: 0;
+        margin: 0;
-    }
+    }
-
+
-    ul {
+    ul {
-        margin: 0;
+        margin: 0;
-        padding: 0;
+        padding: 0;
-        list-style: none;
+        list-style: none;
-    }
+    }
-
+
-    li {
+    li {
-        margin: 0;
+        margin: 0;
-    }
+    }
-
+
-    fieldset {
+    fieldset {
-        align-items: center;
+        align-items: center;
-        margin-top: 5px;
+        margin-top: 5px;
-        border-radius: 6px;
+        border-radius: 6px;
-        border-color: light-dark(@dark-blue, @golden);
+        border-color: light-dark(@dark-blue, @golden);
-
+
-        &.one-column {
+        &.one-column {
-            display: flex;
+            display: flex;
-            flex-direction: column;
+            flex-direction: column;
-            align-items: start;
+            align-items: start;
-            gap: 10px;
+            gap: 10px;
-            min-height: 64px;
+            min-height: 64px;
-        }
+        }
-
+
-        &.two-columns {
+        &.two-columns {
-            display: grid;
+            display: grid;
-            grid-template-columns: 1fr 2fr;
+            grid-template-columns: 1fr 2fr;
-            gap: 10px;
+            gap: 10px;
-        }
+        }
-
+
-        legend {
+        legend {
-            font-family: @font-body;
+            font-family: @font-body;
-            font-weight: bold;
+            font-weight: bold;
-            color: light-dark(@dark-blue, @golden);
+            color: light-dark(@dark-blue, @golden);
-
+
-            a {
+            a {
-                text-shadow: none;
+                text-shadow: none;
-            }
+            }
-        }
+        }
-
+
-        input[type='text'],
+        input[type='text'],
-        input[type='number'] {
+        input[type='number'] {
-            color: light-dark(@dark, @beige);
+            color: light-dark(@dark, @beige);
-            font-family: @font-body;
+            font-family: @font-body;
-            transition: all 0.3s ease;
+            transition: all 0.3s ease;
-            outline: 2px solid transparent;
+            outline: 2px solid transparent;
-
+
-            &:focus,
+            &:focus,
-            &:hover {
+            &:hover {
-                outline: 2px solid light-dark(@dark, @beige);
+                outline: 2px solid light-dark(@dark, @beige);
-            }
+            }
-        }
+        }
-
+
-        .nest-inputs {
+        .nest-inputs {
-            display: flex;
+            display: flex;
-            align-items: center;
+            align-items: center;
-            gap: 5px;
+            gap: 5px;
-        }
+        }
-    }
+    }
-
+
-    line-div {
+    line-div {
-        display: block;
+        display: block;
-        height: 1px;
+        height: 1px;
-        width: 100%;
+        width: 100%;
-        border-bottom: 1px solid light-dark(@dark-blue, @golden);
+        border-bottom: 1px solid light-dark(@dark-blue, @golden);
-        mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
+        mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
-    }
+    }
-
+
-    .item-description {
+    .item-description {
-        opacity: 1;
+        opacity: 1;
-        transform: translateY(0);
+        transform: translateY(0);
-
+
-        transition:
+        transition:
-            opacity 0.3s ease-out,
+            opacity 0.3s ease-out,
-            transform 0.3s ease-out;
+            transform 0.3s ease-out;
-    }
+    }
-
+
-    .item-description.invisible {
+    .item-description.invisible {
-        height: 0;
+        height: 0;
-        opacity: 0;
+        opacity: 0;
-        overflow: hidden;
+        overflow: hidden;
-        transform: translateY(-20px);
+        transform: translateY(-20px);
-        transform-origin: top;
+        transform-origin: top;
-    }
+    }
-}
+}
+
+.application.setting.dh-style {
+    fieldset {
+        h2,
+        h3,
+        h4 {
+            margin: 8px 0 4px;
+            text-align: center;
+        }
+        .title-hint {
+            font-size: 12px;
+            font-variant: small-caps;
+            text-align: center;
+        }
+
+        .field-section {
+            .split-section {
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+                gap: 10px;
+            }
+        }
+
+        .label-container {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 10px;
+
+            label {
+                align-self: center;
+                text-align: center;
+            }
+        }
+    }
+
+    footer {
+        margin-top: 8px;
+        display: flex;
+        gap: 8px;
+
+        button {
+            flex: 1;
+        }
+    }
+}

templates/settings/appearance-settings.hbs

@@ -0,0 +1,119 @@
+<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>
+