Skip to content

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:

scss
: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

VariablePurpose
--KInputBackgroundDefault background
--KInputBorderDefault border
--KInputColorDefault font color
--KInputFocusFocus color
--KInputDisabledBackgroundDisabled background
--KInputErrorError border
--KInputPlaceholderColorPlaceholder text color

TIP

Add the input-error class to add error styling

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

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

KPop Example

VariablePurpose
--KPopBackgroundDefault background
--KPopBorderDefault border
--KPopColorDefault font color

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

html
<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>

Released under the Apache-2.0 License.