The Tailwind Theme component enables users to switch theme mode between, `dark`, `light`, and `system` preferences.
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.
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. |
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 system |
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. |
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 . |
hide(element) | Hides the theme-switch section that corresponds to the given DOM element . |
hide(element) | Toggles the theme-switch section that corresponds to the given DOM element . |
toggle(element) | Retrieves the value of a configuration option by name parameter from a KTThemeSwitch instance. |
getOption(name) | Retrieves the DOM element linked to a specific KTThemeSwitch instance. |
on(eventName, handler) | Allows attaching event listeners to the KTThemeSwitch custom events using the eventName and eventId string parameters. These events enable programmatic interaction based on user actions or internal state changes of KTThemeSwitch. The function returns string as a unique identifier for the registered listener, allowing you to remove it later if needed. |
off(eventName, eventId) | Removes an event listener for the eventName and eventId parameters attached with the on method. |
dispose() | Removes the KTThemeSwitch instance from an element, including any associated data stored on the DOM element. |
const themeEl = document.querySelector('body');
const theme = KTTheme.getInstance(themeEl);
theme.getMode();
theme.setMode('dark');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);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. |
hiden | Triggered immediately after an sticky section is hidden. |
toggle | Triggered immediately before an sticky section is toggled(shown/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');
});