ThemeLayer component

The ThemeLayer is a component that simply wraps useThemeLayer composable.

Props

as - string | Component - optional

Default: undefined

By default, ThemeLayer is a simple wrapper component, not adding any DOM elements. You can disable this behavior by setting this prop to a tag or component name. The class name will be added to the root component class list

---

theme - object (BaseTheme) - optional

Default: undefined

Lets you completely change the theme from it's parent theme

---

multiplier - number - optional

Default: undefined

The multiplier passed to useThemeLayer which controls how much tint/shade to apply from the parent theme.

Slot props

The slot passes the values returned from useThemeLayer:

• className: The generated class name which contains the CSS variables
• isDark: A boolean which tells if the theme is dark or not
• theme: The current theme configuration
• generatedTheme - The full generated theme configuration

Examples

Basic

<template>
  <ThemeLayer v-slot="{ className }">
    <div :class="className" class="card">
      <p>Hello world</p>
    </div>
  </ThemeLayer>
</template>

Output:

Hello world

---

Setting as prop

<template>
  <ThemeLayer as="div" class="card">
    <p>Hello world</p>
  </ThemeLayer>
</template>

Output:

Hello world

---

Nesting

<template>
  <ThemeLayer as="div" class="card">
    <ThemeLayer as="div" class="card">
      <p>Hello world</p>
    </ThemeLayer>
  </ThemeLayer>
</template>

Output:

Hello world

---

Overriding the default multiplier

<template>
  <ThemeLayer as="div" class="card" :multiplier="8">
    <p>Hello world</p>
  </ThemeLayer>
</template>

Output:

Hello world

---

Overriding the base theme

<template>
  <ThemeLayer
    as="div"
    class="card"
    :theme="{
      surface: {
        background: '#589edf',
        text: '#000000',
      },
      accent: {
        background: '#5c72ff',
        text: '#ffffff',
      },
    }"
  >
    <p>Hello world</p>
  </ThemeLayer>
</template>

Output:

Hello world

---

Using slot props

<template>
  <ThemeLayer v-slot="{ className, isDark, theme }">
    <div :class="className" class="card">
      <p>The theme is {{ isDark ? 'dark' : 'light' }} and was generated with the following configuration:</p>

      <div class="code-container">
        <pre><code>{{ theme }}</code></pre>
      </div>
    </div>
  </ThemeLayer>
</template>

Output:

The theme is dark and has the following configuration:

{
  "accent": {
    "background": "#2b6be3",
    "text": "#ffffff"
  },
  "surface": {
    "background": "#1e1f2a",
    "text": "#ffffff"
  }
}