Tailwind Theme

Docs

Tailwind Theme

The Tailwind Theme component enables users to switch theme mode between, `dark`, `light`, and `system` preferences.

Examples

Toggle

Utilize the data-kt-theme-switch-toggle="light" and data-kt-theme-switch-toggle="dark" attributes on an element to toggle the theme mode upon clicking.

The following example illustrates a menu offering the option to select a theme mode from dark , light , and system preferences.

<div data-kt-dropdown="true" data-kt-dropdown-trigger="click">
  <button class="kt-btn" data-kt-dropdown-toggle="true">
    Current Mode:<svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-sun flex dark:hidden opacity-95"
      aria-hidden="true"
    >
      <circle cx="12" cy="12" r="4"></circle>
      <path d="M12 2v2"></path>
      <path d="M12 20v2"></path>
      <path d="m4.93 4.93 1.41 1.41"></path>
      <path d="m17.66 17.66 1.41 1.41"></path>
      <path d="M2 12h2"></path>
      <path d="M20 12h2"></path>
      <path d="m6.34 17.66-1.41 1.41"></path>
      <path d="m19.07 4.93-1.41 1.41"></path></svg
    ><svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-moon hidden dark:flex opacity-95"
      aria-hidden="true"
    >
      <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
    </svg>
  </button>
  <div class="kt-dropdown-menu" data-kt-dropdown-menu="true">
    <ul class="kt-dropdown-menu-sub w-40" data-kt-dropdown-menu="true">
      <li>
        <button
          class="kt-dropdown-menu-link kt-theme-switch-light:bg-accent"
          data-kt-dropdown-dismiss="true"
          data-kt-theme-switch-set="light"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-sun"
            aria-hidden="true"
          >
            <circle cx="12" cy="12" r="4"></circle>
            <path d="M12 2v2"></path>
            <path d="M12 20v2"></path>
            <path d="m4.93 4.93 1.41 1.41"></path>
            <path d="m17.66 17.66 1.41 1.41"></path>
            <path d="M2 12h2"></path>
            <path d="M20 12h2"></path>
            <path d="m6.34 17.66-1.41 1.41"></path>
            <path d="m19.07 4.93-1.41 1.41"></path></svg
          >Light
        </button>
      </li>
      <li>
        <button
          class="kt-dropdown-menu-link kt-theme-switch-dark:bg-accent"
          data-kt-dropdown-dismiss="true"
          data-kt-theme-switch-set="dark"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-moon"
            aria-hidden="true"
          >
            <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg
          >Dark
        </button>
      </li>
      <li>
        <button
          class="kt-dropdown-menu-link kt-theme-switch-system:bg-accent"
          data-kt-dropdown-dismiss="true"
          data-kt-theme-switch-set="system"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-monitor"
            aria-hidden="true"
          >
            <rect width="20" height="14" x="2" y="3" rx="2"></rect>
            <line x1="8" x2="16" y1="21" y2="21"></line>
            <line x1="12" x2="12" y1="17" y2="21"></line></svg
          >System
        </button>
      </li>
    </ul>
  </div>
</div>

Component API

Options

These data attributes allow you to set options for the theme switch component during auto initialization.

| Name | Type | Default | Description | | ----------------------------- | ------ | --------- | -------------------------------------------------------------------------------------------------------- | --- | | data-kt-theme-switch-mode | enum | "light" | Automatically initializes Tailwind Sticky instances on page load. | | | data-kt-theme-switch-toggle | enum | - | Sets a specific sticky item to be open initially when used togather with data-kt-sticky-item selector. |

Selectors

This table details the custom classes and data attributes used by the theme-switch component.

Name	Description
Data Attributes
`data-kt-theme-switch="true"`	Used to auto-initialize KTThemeSwitch instances on page load. Alternatively, you can remove it and perform initialization using JavaScript.
`data-kt-theme-switch-set="dark"`	Sets the theme mode to one of the following options: `light` , `dark` , or

Tailwind Modifiers

Use KTThemeSwitch component's API methods to programmatically control its behavior.

Name	Description
`kt-theme-switch-light:*`	A custom variant to apply classes when light mode is selected using the KTThemeSwitch JavaScript component.
`kt-theme-switch-dark:*`	A custom variant to apply classes when dark mode is selected using the KTThemeSwitch JavaScript component.
`t-theme-switch-system:*`	A custom variant to apply classes based on the system theme preference using the KTThemeSwitch JavaScript component.

Methods

Custom modifiers to control the theme switch’s style and behavior with Tailwind classes.

Method	Description
`new KTThemeSwitch(element, options)`	Creates an object instance of KTThemeSwitch class for the given DOM `element` and
configuration `options` .
`show(element)`	Shows the theme-switch section that corresponds to the given DOM `element` .

const themeEl = document.querySelector('body');
const theme = KTTheme.getInstance(themeEl);
 
theme.getMode();
theme.setMode('dark');

Utilities

Manage and interact with KTThemeSwitch instances using these static methods.

| Method | Description | | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- | --- | | init() | Automatically initializes KTThemeSwitch object for all elements with the data-kt-theme-switch attribute on page load. | | createInstances() | Allows to create KTThemeSwitch instances for all elements that have been dynamically added to the DOM but haven't been activated yet. | | | getInstance(element) | Returns the KTThemeSwitch object associated with the given DOM element element . | | getOrCreateInstance(element) | Returns the existing KTThemeSwitch object for the provided DOM element element , or creates a new instance if none exists, then returns the same. |

// Initialize all instances
KTTheme.init();
 
// Initialzie pending instances
KTTheme.createInstances();
 
// Get theme object
const themeEl = document.querySelector('body');
const theme = KTTheme.getInstance(themeEl);

Events

KTThemeSwitch custom events allows you to register callback functions(event listeners) that will be invoked automatically whenever specific custom events are triggered within the component.

Event	Description
`show`	Triggered immediately before an sticky section is shown.
`shown`	Triggered immediately after an sticky section is shown.
`hide`	Triggered immediately before an sticky section is hidden.

const themeEl = document.querySelector('body');
const theme = KTTheme.getInstance(themeEl);
 
theme.on('change', () => {
  detail.cancel = true;
  console.log('change action canceled');
});
 
theme.on('change', () => {
  console.log('changed event');
});

PreviouseTextarea NextToast

On This Page

Examples
- Toggle
- Menu
Component API

Tailwind Theme

Examples

Toggle

Menu

Component API

Options

Selectors

Tailwind Modifiers

Methods

Utilities

Events