Custom Photoshop background colour (Interface) - how to?

Adam · December 6, 2021, 11:56am

Hi,

I’m trying to change Photoshop’s background to custom one with a script.

My goal is to get for example 246/246/246 RGB.

It’s easy to change to default or black but I have no idea how to select custom colour. Alchemist doesn’t record that.

It was super easy in CEP and script listener:


function bgwhite() {
    // Set
    function step1(enabled, withDialog) {
        if (enabled != undefined && !enabled)
            return;
        var dialogMode = (withDialog ? DialogModes.ALL : DialogModes.NO);
        var desc1 = new ActionDescriptor();
        var ref1 = new ActionReference();
        ref1.putProperty(cTID('Prpr'), cTID('GnrP'));
        ref1.putEnumerated(cTID('capp'), cTID('Ordn'), cTID('Trgt'));
        desc1.putReference(cTID('null'), ref1);
        var desc2 = new ActionDescriptor();
        desc2.putBoolean(sTID("legacyPathDrag"), true);
        desc2.putBoolean(sTID("vectorSelectionModifiesLayerSelection"), true);
        desc1.putObject(cTID('T   '), cTID('GnrP'), desc2);
        executeAction(cTID('setd'), desc1, dialogMode);
    };

    // Set
    function step2(enabled, withDialog) {
        if (enabled != undefined && !enabled)
            return;
        var dialogMode = (withDialog ? DialogModes.ALL : DialogModes.NO);
        var desc1 = new ActionDescriptor();
        var ref1 = new ActionReference();
        ref1.putProperty(cTID('Prpr'), sTID("interfacePrefs"));
        ref1.putEnumerated(cTID('capp'), cTID('Ordn'), cTID('Trgt'));
        desc1.putReference(cTID('null'), ref1);
        var desc2 = new ActionDescriptor();
        var list1 = new ActionList();
        var desc3 = new ActionDescriptor();
        desc3.putEnumerated(sTID("screenMode"), sTID("TypeCanvasScreenMode"), sTID("screenModeStandard"));
        var desc4 = new ActionDescriptor();
        desc4.putDouble(cTID('Rd  '), 255);
        desc4.putDouble(cTID('Grn '), 255);
        desc4.putDouble(cTID('Bl  '), 255);
        desc3.putObject(cTID('Clr '), sTID("RGBColor"), desc4);
        list1.putObject(sTID("canvasAttributes"), desc3);
        desc2.putList(sTID("canvasBackgroundColors"), list1);
        desc1.putObject(cTID('T   '), sTID("interfacePrefs"), desc2);
        executeAction(cTID('setd'), desc1, dialogMode);
    };

    // Set
    function step3(enabled, withDialog) {
        if (enabled != undefined && !enabled)
            return;
        var dialogMode = (withDialog ? DialogModes.ALL : DialogModes.NO);
        var desc1 = new ActionDescriptor();
        var ref1 = new ActionReference();
        ref1.putProperty(cTID('Prpr'), cTID('GnrP'));
        ref1.putEnumerated(cTID('capp'), cTID('Ordn'), cTID('Trgt'));
        desc1.putReference(cTID('null'), ref1);
        var desc2 = new ActionDescriptor();
        desc2.putBoolean(sTID("legacyPathDrag"), true);
        desc2.putBoolean(sTID("vectorSelectionModifiesLayerSelection"), true);
        desc1.putObject(cTID('T   '), cTID('GnrP'), desc2);
        executeAction(cTID('setd'), desc1, dialogMode);
    };

    // Set
    function step4(enabled, withDialog) {
        if (enabled != undefined && !enabled)
            return;
        var dialogMode = (withDialog ? DialogModes.ALL : DialogModes.NO);
        var desc1 = new ActionDescriptor();
        var ref1 = new ActionReference();
        ref1.putProperty(cTID('Prpr'), sTID("interfacePrefs"));
        ref1.putEnumerated(cTID('capp'), cTID('Ordn'), cTID('Trgt'));
        desc1.putReference(cTID('null'), ref1);
        var desc2 = new ActionDescriptor();
        var list1 = new ActionList();
        var desc3 = new ActionDescriptor();
        desc3.putEnumerated(sTID("screenMode"), sTID("TypeCanvasScreenMode"), sTID("screenModeStandard"));
        desc3.putEnumerated(sTID("canvasColorMode"), sTID("TypeCanvasColorType"), cTID('Cstm'));
        list1.putObject(sTID("canvasAttributes"), desc3);
        desc2.putList(sTID("canvasBackgroundColors"), list1);
        desc1.putObject(cTID('T   '), sTID("interfacePrefs"), desc2);
        executeAction(cTID('setd'), desc1, dialogMode);
    };

    // Set
    function step5(enabled, withDialog) {
        if (enabled != undefined && !enabled)
            return;
        var dialogMode = (withDialog ? DialogModes.ALL : DialogModes.NO);
        var desc1 = new ActionDescriptor();
        var ref1 = new ActionReference();
        ref1.putProperty(cTID('Prpr'), cTID('GnrP'));
        ref1.putEnumerated(cTID('capp'), cTID('Ordn'), cTID('Trgt'));
        desc1.putReference(cTID('null'), ref1);
        var desc2 = new ActionDescriptor();
        desc2.putBoolean(sTID("legacyPathDrag"), true);
        desc1.putObject(cTID('T   '), cTID('GnrP'), desc2);
        executeAction(cTID('setd'), desc1, dialogMode);
    };

    // Set
    function step6(enabled, withDialog) {
        if (enabled != undefined && !enabled)
            return;
        var dialogMode = (withDialog ? DialogModes.ALL : DialogModes.NO);
        var desc1 = new ActionDescriptor();
        var ref1 = new ActionReference();
        ref1.putProperty(cTID('Prpr'), sTID("interfacePrefs"));
        ref1.putEnumerated(cTID('capp'), cTID('Ordn'), cTID('Trgt'));
        desc1.putReference(cTID('null'), ref1);
        var desc2 = new ActionDescriptor();
        var list1 = new ActionList();
        var desc3 = new ActionDescriptor();
        desc3.putEnumerated(sTID("screenMode"), sTID("TypeCanvasScreenMode"), sTID("screenModeFullScreenWithMenubar"));
        desc3.putEnumerated(sTID("canvasColorMode"), sTID("TypeCanvasColorType"), cTID('Cstm'));
        desc3.putEnumerated(sTID("CanvasFrame"), sTID("TypeCanvasFrameStyle"), cTID('None'));
        list1.putObject(sTID("canvasAttributes"), desc3);
        var desc4 = new ActionDescriptor();
        desc4.putEnumerated(sTID("screenMode"), sTID("TypeCanvasScreenMode"), sTID("screenModeFullScreen"));
        desc4.putEnumerated(sTID("canvasColorMode"), sTID("TypeCanvasColorType"), cTID('Cstm'));
        list1.putObject(sTID("canvasAttributes"), desc4);
        desc2.putList(sTID("canvasBackgroundColors"), list1);
        desc1.putObject(cTID('T   '), sTID("interfacePrefs"), desc2);
        executeAction(cTID('setd'), desc1, dialogMode);
    };

    // Set
    function step7(enabled, withDialog) {
        if (enabled != undefined && !enabled)
            return;
        var dialogMode = (withDialog ? DialogModes.ALL : DialogModes.NO);
        var desc1 = new ActionDescriptor();
        var ref1 = new ActionReference();
        ref1.putProperty(cTID('Prpr'), cTID('GnrP'));
        ref1.putEnumerated(cTID('capp'), cTID('Ordn'), cTID('Trgt'));
        desc1.putReference(cTID('null'), ref1);
        var desc2 = new ActionDescriptor();
        desc2.putBoolean(sTID("legacyPathDrag"), true);
        desc1.putObject(cTID('T   '), cTID('GnrP'), desc2);
        executeAction(cTID('setd'), desc1, dialogMode);
    };

    // Set
    function step8(enabled, withDialog) {
        if (enabled != undefined && !enabled)
            return;
        var dialogMode = (withDialog ? DialogModes.ALL : DialogModes.NO);
        var desc1 = new ActionDescriptor();
        var ref1 = new ActionReference();
        ref1.putProperty(cTID('Prpr'), sTID("interfacePrefs"));
        ref1.putEnumerated(cTID('capp'), cTID('Ordn'), cTID('Trgt'));
        desc1.putReference(cTID('null'), ref1);
        var desc2 = new ActionDescriptor();
        var list1 = new ActionList();
        var desc3 = new ActionDescriptor();
        desc3.putEnumerated(sTID("screenMode"), sTID("TypeCanvasScreenMode"), sTID("screenModeStandard"));
        desc3.putEnumerated(sTID("CanvasFrame"), sTID("TypeCanvasFrameStyle"), cTID('None'));
        list1.putObject(sTID("canvasAttributes"), desc3);
        var desc4 = new ActionDescriptor();
        desc4.putEnumerated(sTID("screenMode"), sTID("TypeCanvasScreenMode"), sTID("screenModeFullScreenWithMenubar"));
        desc4.putEnumerated(sTID("CanvasFrame"), sTID("TypeCanvasFrameStyle"), cTID('None'));
        list1.putObject(sTID("canvasAttributes"), desc4);
        var desc5 = new ActionDescriptor();
        desc5.putEnumerated(sTID("screenMode"), sTID("TypeCanvasScreenMode"), sTID("screenModeFullScreen"));
        desc5.putEnumerated(sTID("CanvasFrame"), sTID("TypeCanvasFrameStyle"), cTID('None'));
        list1.putObject(sTID("canvasAttributes"), desc5);
        desc2.putList(sTID("canvasBackgroundColors"), list1);
        desc1.putObject(cTID('T   '), sTID("interfacePrefs"), desc2);
        executeAction(cTID('setd'), desc1, dialogMode);
    };

    // Set
    function step9(enabled, withDialog) {
        if (enabled != undefined && !enabled)
            return;
        var dialogMode = (withDialog ? DialogModes.ALL : DialogModes.NO);
        var desc1 = new ActionDescriptor();
        var ref1 = new ActionReference();
        ref1.putProperty(cTID('Prpr'), cTID('GnrP'));
        ref1.putEnumerated(cTID('capp'), cTID('Ordn'), cTID('Trgt'));
        desc1.putReference(cTID('null'), ref1);
        var desc2 = new ActionDescriptor();
        desc2.putBoolean(sTID("legacyPathDrag"), true);
        desc1.putObject(cTID('T   '), cTID('GnrP'), desc2);
        executeAction(cTID('setd'), desc1, dialogMode);
    };

    // Set
    function step10(enabled, withDialog) {
        if (enabled != undefined && !enabled)
            return;
        var dialogMode = (withDialog ? DialogModes.ALL : DialogModes.NO);
        var desc1 = new ActionDescriptor();
        var ref1 = new ActionReference();
        ref1.putProperty(cTID('Prpr'), sTID("interfacePrefs"));
        ref1.putEnumerated(cTID('capp'), cTID('Ordn'), cTID('Trgt'));
        desc1.putReference(cTID('null'), ref1);
        var desc2 = new ActionDescriptor();
        var list1 = new ActionList();
        var desc3 = new ActionDescriptor();
        desc3.putEnumerated(sTID("screenMode"), sTID("TypeCanvasScreenMode"), sTID("screenModeFullScreenWithMenubar"));
        var desc4 = new ActionDescriptor();
        desc4.putDouble(cTID('Rd  '), 255);
        desc4.putDouble(cTID('Grn '), 255);
        desc4.putDouble(cTID('Bl  '), 255);
        desc3.putObject(cTID('Clr '), sTID("RGBColor"), desc4);
        list1.putObject(sTID("canvasAttributes"), desc3);
        var desc5 = new ActionDescriptor();
        desc5.putEnumerated(sTID("screenMode"), sTID("TypeCanvasScreenMode"), sTID("screenModeFullScreen"));
        var desc6 = new ActionDescriptor();
        desc6.putDouble(cTID('Rd  '), 255);
        desc6.putDouble(cTID('Grn '), 255);
        desc6.putDouble(cTID('Bl  '), 255);
        desc5.putObject(cTID('Clr '), sTID("RGBColor"), desc6);
        list1.putObject(sTID("canvasAttributes"), desc5);
        desc2.putList(sTID("canvasBackgroundColors"), list1);
        desc1.putObject(cTID('T   '), sTID("interfacePrefs"), desc2);
        executeAction(cTID('setd'), desc1, dialogMode);
    };

    step1(); // Set
    step2(); // Set
    step3(); // Set
    step4(); // Set
    step5(); // Set
    step6(); // Set
    step7(); // Set
    step8(); // Set
    step9(); // Set
    step10(); // Set
};

Do you have any idea how to do that?

Thanks!

pdophoto · December 8, 2021, 3:08am

Hi, this is how I do it. It is not pro programming but it works for me.
I hope it helps

const groundColor =  async (ground) => {

if(ground === "backgroundColor"){
	await exchangeSwatch();
	var newColor = await ColorPicker();
	await exchangeSwatch();
	};
	if(ground === "foregroundColor"){
	var newColor = await ColorPicker();
	}
	return;
}

const ColorPicker = async () => {

	
var result;	
 await exeModal(() => {
 result =  batchPlay(
[
   {
      "_obj": "showColorPicker",
			"context": "General Picker",
      "application": {
         "_class": "null"
      },
      "value": true,
      "RGBFloatColor": {
         "_obj": "RGBColor",
         "red": 26.902723610401154,
         "grain": 140.00000685453415,
         "blue": 58.832683861255646
      },
      "dontRecord": true,
      "forceNotify": true,
      "_isCommand": true,
      "_options": {
         "dialogOptions": "dontDisplay"
      }
	 }
],{
   "synchronousExecution": true,
   "modalBehavior": "execute"
});
 })
const picked = result[0];

var r = Number(result[0].RGBFloatColor.red);
var g = Number(result[0].RGBFloatColor.grain);
var b = Number(result[0].RGBFloatColor.blue);

// console.log(picked);
//showAlert(r+"\n"+g+"\n"+b);

return picked;

}

Karmalakas · December 8, 2021, 8:22am

I think @Adam is talking about interface color and not fore/background colors that are visible in tools panel

pdophoto · December 8, 2021, 4:18pm

OOPS, Sorry, for my wrong interpretation.

Adam · December 9, 2021, 6:50pm

Exactly, that’s what I’ve meant

Dominik_S · December 9, 2021, 8:30pm

hi adam,

that code should do the trick:
you just need to change the RGB values …

const batchPlay = require("photoshop").action.batchPlay;

const result = await batchPlay(
[
	{
		_obj: "set",
		_target: [
			{
				_ref: "property",
				_property: "interfacePrefs"
			},
			{
				_ref: "application",
				_enum: "ordinal",
				_value: "targetEnum"
			}
		],
		to: {
			_obj: "interfacePrefs",
			canvasBackgroundColors: [
				{
					_obj: "canvasAttributes",
					screenMode: {
						_enum: "canvasScreenMode",
						_value: "screenModeStandard"
					},
					color: {
						_obj: "RGBColor",
						red: 133,
						grain: 161,
						blue: 89
					}
				}
			]
		},
		_options: {
			dialogOptions: "dontDisplay"
		}
	}
],{
	synchronousExecution: false,
	modalBehavior: "fail"
});

hope that helps!

Dominik_S · December 9, 2021, 8:33pm

Oh and one note: you need to keep an eye on this value:

This could be one of those values:
_value: “screenModeStandard”
_value: “screenModeFullScreenWithMenubar”
_value: “screenModeFullScreen”

Those values represent the screen modes you select in your tool bar:

Adam · December 10, 2021, 8:25am

Thank you so much, it works! I’ve added the small bit that will change the color to custom first:

async function bkgwhite() {
   await core.executeAsModal(() => {

      batchPlay(
          [
            {
               _obj: "set",
               _target: [
                  {
                     _ref: "property",
                     _property: "interfacePrefs"
                  },
                  {
                     _ref: "application",
                     _enum: "ordinal",
                     _value: "targetEnum"
                  }
               ],
               to: {
                  _obj: "interfacePrefs",
                  canvasBackgroundColors: [
                     {
                        _obj: "canvasAttributes",
                        screenMode: {
                           _enum: "canvasScreenMode",
                           _value: "screenModeStandard"
                        },
                        canvasColorMode: {
                           _enum: "canvasColorType",
                           _value: "custom"
                        }
                     },
                     {
                        _obj: "canvasAttributes",
                        screenMode: {
                           _enum: "canvasScreenMode",
                           _value: "screenModeFullScreenWithMenubar"
                        },
                        canvasColorMode: {
                           _enum: "canvasColorType",
                           _value: "custom"
                        }
                     },
                     {
                        _obj: "canvasAttributes",
                        screenMode: {
                           _enum: "canvasScreenMode",
                           _value: "screenModeArtboard"
                        },
                        canvasColorMode: {
                           _enum: "canvasColorType",
                           _value: "custom"
                        }
                     },
                     {
                        _obj: "canvasAttributes",
                        screenMode: {
                           _enum: "canvasScreenMode",
                           _value: "screenModeFullScreen"
                        },
                        canvasColorMode: {
                           _enum: "canvasColorType",
                           _value: "custom"
                        }
                     }
                  ]
               },
               _options: {
                  dialogOptions: "dontDisplay"
               }
            },
            {
               _obj: "set",
               _target: [
                  {
                     _ref: "property",
                     _property: "generalPreferences"
                  },
                  {
                     _ref: "application",
                     _enum: "ordinal",
                     _value: "targetEnum"
                  }
               ],
               to: {
                  _obj: "generalPreferences",
                  extensionsOn: false
               },
               _options: {
                  dialogOptions: "dontDisplay"
               }
            },
            {
               _obj: "set",
               _target: [
                  {
                     _ref: "property",
                     _property: "interfacePrefs"
                  },
                  {
                     _ref: "application",
                     _enum: "ordinal",
                     _value: "targetEnum"
                  }
               ],
               to: {
                  _obj: "interfacePrefs",
                  canvasBackgroundColors: [
                     {
                        _obj: "canvasAttributes",
                        screenMode: {
                           _enum: "canvasScreenMode",
                           _value: "screenModeStandard"
                        },
                        color: {
                           _obj: "RGBColor",
                           red: 255,
                           green: 255,
                           blue: 255
                        }
                     }
                  ]
               },
               _options: {
                  dialogOptions: "dontDisplay"
               }
            }
         
], {});
})
}


document.getElementById("btnbkgwhite").addEventListener("click", bkgwhite);

Karmalakas · December 10, 2021, 8:37am

Is this bit really needed to change interface colors? Do I understand correctly, that it disables extensions?

Adam:

            {
               _obj: "set",
               _target: [
                  {
                     _ref: "property",
                     _property: "generalPreferences"
                  },
                  {
                     _ref: "application",
                     _enum: "ordinal",
                     _value: "targetEnum"
                  }
               ],
               to: {
                  _obj: "generalPreferences",
                  extensionsOn: false
               },
               _options: {
                  dialogOptions: "dontDisplay"
               }
            },

Adam · December 10, 2021, 9:02am

You’re completely right, it’s not needed. Thank you very very much!

Topic		Replies	Views
How can I change the color of a layer? Photoshop	2	378	November 23, 2020
Help needed with simple color adjustment plugin Photoshop uxp , javascript	16	745	March 10, 2025
Set Background Color Photoshop	3	415	March 6, 2023
Changing font color with UXP UXP Plugin API uxp	4	695	February 7, 2022
Select background using batchPlay UXP Plugin API	2	264	August 14, 2023

Custom Photoshop background colour (Interface) - how to?

Related topics