Theming

You can override or "theme" some parts of components by setting CSS Custom Properties (opens new window) in your :root: {} tag. Take a look at individual components to see what properties are themable.

Inputs

Variable	Purpose
--KInputBackground	Default background
--KInputBorder	Default border
--KInputColor	Default font color
--KInputFocus	Focus color
--KInputDisabledBackground	Disabled background
--KInputError	Error border
--KInputPlaceholderColor	Placeholder text color

Note: Add the input-error class to add error styling

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

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

Popovers

Variable	Purpose
--KPopBackground	Default background
--KPopBorder	Default border
--KPopColor	Default font color

An Example of changing the color of KPopover text

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

<style>
:root {
  --KPopColor: orange;
}
</style>

email

I have different colored text.