Theme Provider

The Theme Provider component creates an isolated theme context for a portion of your application. It allows you to override theme colors, settings, and theme type (light, dark, or inverted) for specific components or sections without affecting the global theme. Perfect for creating themed sections, component previews, or isolated design variations within your application.

Basic theme provider

Wrap content with the Theme Provider to create an isolated theme context. By default, it inherits from the parent theme but can be customized independently.

Default Theme

Dark Theme

Source code

<template>
  <div style="display: flex; gap: 24px;">
    <div style="flex: 1; padding: 24px; border: 1px solid var(--border-neutral-regular-default); border-radius: 4px;">
      <h3 style="margin-top: 0;">Default Theme</h3>
      <IkButton design="primary">Primary Button</IkButton>
      <IkButton design="accent" class="ik-ml-2">Accent Button</IkButton>
    </div>
    <IkThemeProvider theme="dark" style="flex: 1; padding: 24px; border: 1px solid var(--border-neutral-regular-default); border-radius: 4px;">
      <h3 style="margin-top: 0;">Dark Theme</h3>
      <IkButton design="primary">Primary Button</IkButton>
      <IkButton design="accent" class="ik-ml-2">Accent Button</IkButton>
    </IkThemeProvider>
  </div>
</template>
<script setup>
import { IkThemeProvider } from '@ikol/ui-kit/components/IkThemeProvider';
import { IkButton } from '@ikol/ui-kit/components/IkButton';
</script>

Theme types

The Theme Provider supports three theme types: light, dark, and inverted. Each provides a different color scheme for the contained content.

Light Theme

This section uses the light theme variant.

Dark Theme

This section uses the dark theme variant.

Inverted Theme

This section uses the inverted theme variant.

Source code

<template>
  <div style="display: flex; flex-direction: column; gap: 16px;">
    <IkThemeProvider theme="light" style="padding: 20px; border: 1px solid var(--border-neutral-regular-default); border-radius: 4px;">
      <h4 style="margin-top: 0;">Light Theme</h4>
      <p>This section uses the light theme variant.</p>
      <IkButton design="primary">Light Theme Button</IkButton>
    </IkThemeProvider>
    <IkThemeProvider theme="dark" style="padding: 20px; border: 1px solid var(--border-neutral-regular-default); border-radius: 4px;">
      <h4 style="margin-top: 0;">Dark Theme</h4>
      <p>This section uses the dark theme variant.</p>
      <IkButton design="primary">Dark Theme Button</IkButton>
    </IkThemeProvider>
    <IkThemeProvider theme="inverted" style="padding: 20px; border: 1px solid var(--border-neutral-regular-default); border-radius: 4px;">
      <h4 style="margin-top: 0;">Inverted Theme</h4>
      <p>This section uses the inverted theme variant.</p>
      <IkButton design="primary">Inverted Theme Button</IkButton>
    </IkThemeProvider>
  </div>
</template>
<script setup>
import { IkThemeProvider } from '@ikol/ui-kit/components/IkThemeProvider';
import { IkButton } from '@ikol/ui-kit/components/IkButton';
</script>

Custom colors

Override specific theme colors by providing a colors prop with partial color values. This allows you to create custom color schemes for specific sections.

Default Colors

Custom Colors

Source code

<template>
  <div style="display: flex; gap: 16px;">
    <div style="flex: 1; padding: 20px; border: 1px solid var(--border-neutral-regular-default); border-radius: 4px;">
      <h4 style="margin-top: 0;">Default Colors</h4>
      <IkButton design="primary">Primary</IkButton>
      <IkButton design="accent" class="ik-ml-2">Accent</IkButton>
    </div>
    <IkThemeProvider
      :colors="{
        PRIMARY_500: '#10b981',
        PRIMARY_600: '#059669',
        PRIMARY_700: '#047857',
        ACCENT_500: '#f59e0b',
        ACCENT_600: '#d97706',
        ACCENT_700: '#b45309',
      }"
      style="flex: 1; padding: 20px; border: 1px solid var(--border-neutral-regular-default); border-radius: 4px;"
    >
      <h4 style="margin-top: 0;">Custom Colors</h4>
      <IkButton design="primary">Custom Primary</IkButton>
      <IkButton design="accent" class="ik-ml-2">Custom Accent</IkButton>
    </IkThemeProvider>
  </div>
</template>
<script setup>
import { IkThemeProvider } from '@ikol/ui-kit/components/IkThemeProvider';
import { IkButton } from '@ikol/ui-kit/components/IkButton';
</script>

Custom theme settings

Customize theme settings like fonts, spacing scale, borders, and animations using the settings prop.

Default Settings

Default text spacing and styling.

Custom Settings

Increased spacing, size and rounded borders.

Source code

<template>
  <div style="display: flex; gap: 16px;">
    <div style="flex: 1; padding: 20px; border: 1px solid var(--border-neutral-regular-default); border-radius: 4px;">
      <h4 style="margin-top: 0;">Default Settings</h4>
      <IkButton>Default Button</IkButton>
      <p>Default text spacing and styling.</p>
    </div>
    <IkThemeProvider
      :settings="{
        scale: { global: 1.3 },
        borders: { radius: 'round-large' },
        buttons: { border: 'round-full' },
      }"
      style="flex: 1; padding: 20px; border: 1px solid var(--border-neutral-regular-default); border-radius: 4px;"
    >
      <h4 style="margin-top: 0;">Custom Settings</h4>
      <IkButton>Rounded Button</IkButton>
      <p>Increased spacing, size and rounded borders.</p>
    </IkThemeProvider>
  </div>
</template>
<script setup>
import { IkThemeProvider } from '@ikol/ui-kit/components/IkThemeProvider';
import { IkButton } from '@ikol/ui-kit/components/IkButton';
</script>