How to detect what color theme AE is using via script?

Question

I am developing a script for After Effects that launches a small window and lets the user generate various compositions. I want to include a small image of a company logo on the window: One version that works with a light color theme and a different version that works with After Effects’ dark color themes. However, what ExtendScript code can I use to detect the currently active theme (e.g. ‘light’, ‘dark’ or ‘darkest’?)

I’ve scoured forums and Github for answers but I’ve not found anything yet that works.

emile_3380 · Accepted Answer

Thanks for this. I tried something similar to what you’ve suggested but for some reason, `backgroundColor` would be undefined and it wouldn’t work. So after scouring GitHub for hours, I managed to find bits of code and piece them together to make this, which worked really well:

function UIBrightness() {
    if (
        parseFloat(app.version) < 24.4 ||
        !app.preferences.havePref(
            "Main Pref Section v2",
            "User Interface Brightness (4) [0.0..1.0]",
            PREFType.PREF_Type_MACHINE_INDEPENDENT,
        )
    )
    return 0.2;

    return app.preferences.getPrefAsFloat(
        "Main Pref Section v2",
        "User Interface Brightness (4) [0.0..1.0]",
        PREFType.PREF_Type_MACHINE_INDEPENDENT,
    );
};

var themeColour = UIBrightness() > 0.5 ? "light" : "dark";

OussK · Answer

Unfortunately ExtendScript doesn't expose the UI theme directly as a clean API call, but there's a reliable workaround that most script developers use:

You can infer the theme by sampling the background color of a UI element — specifically a Panel or Window — since AE applies the theme color to all native UI components. Something like this:

var w = new Window("palette");
var bg = w.graphics.backgroundColor;
var brightness = (bg.color[0] + bg.color[1] + bg.color[2]) / 3;
w.close();

var theme;
if (brightness > 0.5) {
    theme = "light";
} else if (brightness > 0.2) {
    theme = "dark";
} else {
    theme = "darkest";
}

The threshold values may need slight tuning based on your testing across the three AE themes, but this approach is solid and widely used in production scripts.
Alternatively, if you're building a CEP panel rather than a pure ExtendScript window, you have access to __adobe_cep__.getSystemPath() and the full CSS theme variables Adobe exposes via --color-bg and similar tokens, which gives you much cleaner theme detection without the sampling workaround.
Worth noting — if your logo works on a transparent background with enough contrast margin, you can sometimes sidestep the whole issue entirely.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded