Theming ​

CSS Variables ​

You can override or "theme" some parts of components by setting corresponding CSS Custom Properties in your :root: {} CSS rule or within a scoped class, for example:

:root {
  --KInputError: firebrick;
}

.custom-input-container {
  --KInputBackground: #007ac1;
}

Examples ​

Take a look at individual components to see what properties are themable. Two examples are listed below.

KInput Example ​

<template>
  <KInput type="email" value="error" class="input-error"/>
</template>

<style>
:root {
  --KInputError: firebrick;
}
</style>

KPop Example ​

You can also scope the CSS variable to a single component by providing a parent selector. Here's an Example of changing the color of KPopover text

<template>
  <div class="custom-class-name">
    <KPop title="email">
      <button>Click me</button>
      <template v-slot:content>
        I have different colored text.
      </template>
    </KPop>
  <div>
</template>

<style>
.custom-class-name {
  --KPopColor: purple;
}
</style>