# Working on layout preview

**URL:** <https://forum.getkirby.com/t/working-on-layout-preview/21342>\
**Category:** Questions\
**Tags:** v3\
**Created:** [February 24, 2021, 2:39pm UTC](https://forum.getkirby.com/t/working-on-layout-preview/21342 "2021-02-24T14:39:56Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![arnoson](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/arnoson/32/6155_2.png) [@arnoson](https://forum.getkirby.com/u/arnoson)\
**Post date:** [September 13, 2022, 8:55am UTC](https://forum.getkirby.com/t/working-on-layout-preview/21342/4 "2022-09-13T08:55:29Z")

</div>

Sorry for bumping this old topic, but I’ve been searching for a long time so I thought I share my approach. In my case I wanted to reflect the selected background color for each layout in the layout’s toolbar.

```javascript
panel.plugin('my/plugin', {
  components: {
    'k-layout-field': {
      extends: 'k-layout-field',
      watch: {
        value() {
          // Update the color as soon as the layout settings are changing.
          this.setColor()
        },
      },

      mounted() {
        // Also set the color on start.
        this.setColor()
      },

      methods: {
        setColor() {
          Array.from(this.$el.querySelectorAll('.k-layout')).forEach(
            (layout, index) => {
              // Get the layout settings (attrs) for each layout.
              const layoutAttrs = this.value[index].attrs

              let { color } = layoutAttrs
              // This is only necessary because the color field I'm using might
              // store the color as an array of colors.
              color = Array.isArray(color) ? color[0] : color

              // Set a css variable on the layout so we can style it
              // individually.
              if (color) {
                layout.style.setProperty('--layout-attrs-color', color)
              } else {
                layout.style.removeProperty('--layout-attrs-color')
              }
            }
          )
        },
      },
    },
  },
})

```

```css
.k-layout-toolbar {
  background-color: var(--layout-attrs-color);
}

```

---

_[View the full topic](https://forum.getkirby.com/t/working-on-layout-preview/21342)._