Font size UXP variables not changing with font size settings

[tim35050]

Hello all,

I am trying to make my plugin theme-aware, following the instructions here: https://developer.adobe.com/photoshop/uxp/2022/guides/theme-awareness/

I was able to use the mentioned CSS variables to successfully make my plugin’s colors theme-aware, but I’m finding that the size variables (e.g. --uxp-host-font-size) are not adapting with the font-size settings.

I changed the font size here, trying all 4 size settings, restarting Photoshop, and checking to see if my plugin’s font size would adapt.

But no matter what size I select, my plugin text will always have the same font size. See the console below, where --uxp-host-font-size-smaller is always equal to 12px no matter what.

Thank you in advance for your help!
Tim

[Jan]

Still looking for the solution?

async function getUIFontSize() {
    const batchCommands = { _obj: "get", _target: [ { _property: "interfacePrefs" }, { _ref: "application", _enum: "ordinal", _value: "targetEnum" } ] };
    const applicationState = await batchPlay([batchCommands], {});
    return applicationState[0].interfacePrefs.paletteEnhancedFontTypeKey._value;
}

async function setUIFontSize() {
    const UIFontSize = await getUIFontSize();
    let newFontSize = "";
    if (UIFontSize === "preferLargePaletteFontType") {
        newFontSize = '* {font-size:12px}';
    } else if (UIFontSize === "preferMediumPaletteFontType") {
        newFontSize = '* {font-size:11px}';
    } else if (UIFontSize === "preferSmallPaletteFontType") {
        newFontSize = '* {font-size:10px}';
    } else if (UIFontSize === "preferTinyPaletteFontType") {
        newFontSize = '* {font-size:9px}';
    }
    document.getElementsByTagName('style')[1].innerHTML = newFontSize;
}

Don’t know if there is a simpler solution… at least this one works for me.