Change Object Color

retr0five

Hello, i want to write a plugin which changes color in user selected layers, but i dont know how to access the layer.
my approach is as follows:

var Style = require('sketch/dom').Style var selection = document.selectedLayers selectedLayer.style.fills = [ { color: '#42f5f2' , fillType: Style.FillType.Color, },]
i left some unimportant code out

i know that its wrong but i dont know how to access and change the layers color the right way

please help 😃

kevgski

1 Document Error

When you run that code you get the following error:

ReferenceError: Can't find variable: document

Looks like you don't have document defined. If you head over to the documentation you'll find this

var document = require('sketch/dom').getSelectedDocument()

https://developer.sketch.com/reference/api/#access-the-selected-document

kevgski

2 Missmatch variable names

Now you have this

var Style = require('sketch/dom').Style 
var document = require('sketch/dom').getSelectedDocument()
var selection = document.selectedLayers
selectedLayer.style.fills = [ { color: '#42f5f2' , fillType: Style.FillType.Color, },]

Which if you run that you will get another error:

Can't find variable: selectedLayer

Upon reexamining the code there is a variable called selection. Then the next line has selectedLayer.style.fills. selectedLayer isn't defined but selection is. If you change this you get… you guessed it! Another error ;D

kevgski

3 `Selection` is an object

var Style = require('sketch/dom').Style 
var document = require('sketch/dom').getSelectedDocument()
var selection = document.selectedLayers
selection.style.fills = [ { color: '#42f5f2' , fillType: Style.FillType.Color, },]

and the error this time is:

TypeError: undefined is not an object (evaluating 'selection.style.fills = [ { color: '#42f5f2' , fillType: Style.FillType.Color, },]')

There are a couple different options you can try to use to solve this:

Look at the documentation
Print out the object and try to guess how to change the structure

Lets go with (2) this time.

kevgski

4 Understanding the selection object

First lets make sure that we know what the selection object is.

var Style = require('sketch/dom').Style 
var document = require('sketch/dom').getSelectedDocument()
var selection = document.selectedLayers
console.log(selection)

Logging that out you can see this:

{ layers: [Getter/Setter], length: [Getter], isEmpty: [Getter] }

There are three properties: layers, length, isEmpty. length and isEmpty probably isn't what we are looking for (but feel free to log those if you are interested)

Logging out the layers gets us this:

console.log(selection.layers)

/*
[ ShapePath {
    type: 'ShapePath',
    id: '4409A37C-F29B-4E54-AAB5-85FA54313CCD',
    frame: { x: 340, y: 320, width: 508, height: 312 },
    name: 'Rectangle',
    selected: true,
    hidden: false,
    locked: false,
    exportFormats: [  ],
    transform: { ... },
    style:  { ... },
    sharedStyleId: null,
    shapeType: 'Rectangle',
    points: [ [CurvePoint], [CurvePoint], [CurvePoint], [CurvePoint] ],
    closed: true } ]
*/

Which looks like an array of layers!

kevgski

5 With Style Now

If you look closely you can see the layer's style properties. You might have been able to guess that to get at a layer's style you could do this:

console.log(selection.layers[0].style)

Style {
  type: 'Style',
  id: '9F025CC5-3A21-4F6C-BEAF-F12C707C7612',
  opacity: 1,
  blendingMode: 'Normal',
  borderOptions: 
   BorderOptions {
     startArrowhead: 'None',
     endArrowhead: 'None',
     dashPattern: [],
     lineEnd: 'Butt',
     lineJoin: 'Miter' },
  blur: 
   Blur {
     center: { x: 0.5, y: 0.5 },
     motionAngle: 0,
     radius: 10,
     enabled: false,
     blurType: 'Gaussian' },
  fills: 
   [ Fill {
       fillType: 'Color',
       color: '#d8d8d8ff',
       gradient: [Gradient],
       pattern: [Object],
       enabled: true } ],
  borders: 
   [ Border {
       fillType: 'Color',
       position: 'Inside',
       color: '#979797ff',
       gradient: [Gradient],
       thickness: 1,
       enabled: true } ],
  shadows: [  ],
  innerShadows: [  ],
  styleType: 'Layer',
  fontAxes: null }

Going along with the same pattern you can probably guess that to get at a layer's fills you can get to it like this:

console.log(selection.layers[0].style.fills)

[ Fill {
    fillType: 'Color',
    color: '#d8d8d8ff',
    gradient: 
     Gradient {
       gradientType: 'Linear',
       from: [Object],
       to: [Object],
       aspectRatio: 0,
       stops: [Array] },
    pattern: { patternType: 'Fill', image: null, tileScale: 1 },
    enabled: true } ]

Which is an array of Fill objects. Now we can get at the color!

console.log(selection.layers[0].style.fills[0].color)

'#d8d8d8ff'

Changing the color

If we try setting this property with a hex value you'll see that the color of the selected layer does indeed change!

selection.layers[0].style.fills[0].color = '#FF0000'
console.log(selection.layers[0].style.fills[0].color)

'#ff0000ff'

kevgski

6 Putting it all together

Ok now that you have all the pieces together lets clean up the code a little to make it a bit more comprehensible.

var Style = require('sketch/dom').Style 
var document = require('sketch/dom').getSelectedDocument()

var selection = document.selectedLayers.layers[0]
var style = selection.style
var fills = style.fills
fills[0].color = '#FF0000'

Hopefully you can now see all the different steps we to get there! If I was writing it out myself I would do something like this

const sketch = require('sketch')
let doc = sketch.getSelectedDocument()
let selection = doc.selectedLayers.layers[0]
selection.style.fills[0].color = '#FF0000'

All in all, I hope you learn how to debug issues by using the console and to use the output for clues to search the sketch API Documentation.