Metronic - Tailwind CSS Theme

Utilize the


         data-theme-toggle="light"

and


         data-theme-toggle="dark"

attributes on an element to toggle the theme mode upon clicking.

Preview HTML

				
					<button class="btn btn-icon btn-light dark:hidden" data-theme-toggle="true" data-tooltip="#theme_mode_dark">
 <i class="ki-outline ki-sun">
 </i>
</button>
<button class="btn btn-icon btn-light hidden dark:flex" data-theme-toggle="true" data-tooltip="#theme_mode_light">
 <i class="ki-outline ki-moon">
 </i>
</button>
<div class="tooltip" id="theme_mode_light">
 Switch to Light mode
</div>
<div class="tooltip" id="theme_mode_dark">
 Switch to Dark mode
</div>

The following example illustrates a menu offering the option to select a theme mode from


         dark

,


         light

, and


         system

preferences.

Preview HTML

				
					<!--begin::Menu-->
<div class="menu menu-default" data-menu="true">
 <div class="menu-item" data-menu-item-placement="bottom-end" data-menu-item-toggle="dropdown" data-menu-item-trigger="click">
  <!--begin::Menu toggle-->
  <button class="menu-toggle btn btn-primary">
   Current Mode:
   <i class="ki-outline ki-night-day flex dark:hidden text-xl">
   </i>
   <i class="ki-outline ki-moon hidden dark:flex text-xl">
   </i>
  </button>
  <!--end::Menu toggle-->
  <!--begin::Dropdown-->
  <div class="menu-dropdown py-2 w-[150px]">
   <!--begin::Menu item-->
   <div class="menu-item">
    <button class="menu-link light-mode:bg-gray-100 light-mode:text-primary" data-theme-switch="light">
     <span class="menu-icon">
      <i class="ki-outline ki-night-day light-mode:text-primary">
      </i>
     </span>
     <span class="menu-title">
      Light
     </span>
    </button>
   </div>
   <!--end::Menu item-->
   <!--begin::Menu item-->
   <div class="menu-item">
    <button class="menu-link dark-mode:bg-gray-100 dark-mode:text-primary" data-theme-switch="dark">
     <span class="menu-icon">
      <i class="ki-outline ki-moon dark-mode:text-primary">
      </i>
     </span>
     <span class="menu-title">
      Dark
     </span>
    </button>
   </div>
   <!--end::Menu item-->
   <!--begin::Menu item-->
   <div class="menu-item">
    <button class="menu-link system-mode:bg-gray-100 system-mode:text-primary" data-theme-switch="system">
     <span class="menu-icon">
      <i class="ki-outline ki-screen system-mode:text-primary">
      </i>
     </span>
     <span class="menu-title">
      System
     </span>
    </button>
   </div>
   <!--end::Menu item-->
  </div>
  <!--end::Dropdown-->
 </div>
</div>
<!--end::Menu-->

The following source file manages the JavaScript behavior of the Tailwind CSS Theme component. Upon building the assets using Webpack Build Tools , the below file is compiled and added into the


         dist/assets/js/core.bundle.js

bundle, making it available globally across all pages.

File	Description
`src/core/components/theme/theme.ts`	The TypeScript source file that manages the JavaScript behavior of the Tailwind CSS Theme component.

The following markup outlines the core structure of the Tailwind CSS Theme component.

				
					<!--begin::Root element-->
<body class="light" data-theme="true" data-theme-mode="light">
 ...
</body>
<!--end::Root element-->
<!--begin::Toggle theme mode-->
<button class="btn btn-icon btn-light" data-theme-toggle="dark" data-tooltip="#theme_mode_dark">
 <i class="ki-outline ki-sun">
 </i>
</button>
<button class="btn btn-icon btn-light" data-theme-toggle="light" data-tooltip="#theme_mode_light">
 <i class="ki-outline ki-moon">
 </i>
</button>
<button class="btn btn-icon btn-light" data-theme-toggle="system" data-tooltip="#theme_mode_system">
 <i class="ki-outline ki-system">
 </i>
</button>
<!--end::Toggle theme mode-->

Utilize the following Tailwind CSS theme variants to effectively manage the page's theme state and mode. For more information, refer to the Tailwind CSS Variant documentation .

Class	Description
`light-mode:`	A custom variant to apply classes when light mode is selected using the KTTheme JavaScript component.
`dark-mode:`	A custom variant to apply classes when dark mode is selected using the KTTheme JavaScript component.
`system-mode:`	A custom variant to apply classes based on the system theme preference using the KTTheme JavaScript component.
`dark:`	Tailwind CSS built-in variant to apply classes for dark mode.
`light:`	A custom variant to apply classes for light mode.

				
					<div class="hidden light-mode:block">
 Selected theme mode is Light.
</div>
<div class="hidden dark-mode:block">
 Selected theme mode is Dark.
</div>
<div class="hidden system-mode:block">
 Selected theme mode is System.
</div>
<div class="light:border-gray-100">
 Apply for light mode only
</div>
<div class="dark:border-gray-100">
 Apply for dark mode only
</div>

Auto-initialize all KTTheme instances on page load by adding the


         data-theme="true"

attribute to your theme element. This triggers on the fly initialization by the KTTheme JavaScript component.

				
					<!--begin::Root element-->
<body class="light" data-theme="true" data-theme-mode="light">
 ...
</body>
<!--end::Root element-->
<!--begin::Toggle theme mode-->
<button class="btn btn-icon btn-light" data-theme-toggle="dark" data-tooltip="#theme_mode_dark">
 <i class="ki-outline ki-sun">
 </i>
</button>
<button class="btn btn-icon btn-light" data-theme-toggle="light" data-tooltip="#theme_mode_light">
 <i class="ki-outline ki-moon">
 </i>
</button>
<button class="btn btn-icon btn-light" data-theme-toggle="system" data-tooltip="#theme_mode_system">
 <i class="ki-outline ki-system">
 </i>
</button>
<!--end::Toggle theme mode-->

These attributes allow you to set options for the KTTheme component during initialization. The values you provide as strings are automatically converted to the appropriate KTTheme Options .

HTML Attribute	Type	Default	Description
`data-theme`	`boolean`	`true`	Used to auto-initialize KTTheme instances on page load. Alternatively, you can remove it and perform initialization using JavaScript.
`data-theme-mode`	`enum` "light" \| "dark" \| "system"	`"light"`	Specifies the default theme mode.
`data-theme-toggle`	`enum` "light" \| "dark" \| "system"	`-`	Applies the theme mode when an element with this attribute is clicked.

To initialize a new theme component, pass the corresponding DOM element and configuration options to the KTTheme class constructor.

JavaScript HTML

				
					// Theme element
const themeEl = document.querySelector('body');

// Configuration options(optional)
const options = {
	mode: 'system'
};

// Initialize object
const theme = new KTTheme(themerEl, options);

				
					<!--begin::Root element-->
<body class="light" data-theme="false" data-theme-mode="light">
 ...
</body>
<!--end::Root element-->

To initialize KTTheme with JavaScript, use data-theme="false" attribute instead. This prevents automatic initialization on page load.

This table outlines the configuration options for initialization of Tailwind CSS Theme instances, using the KTTheme JavaScript component.

Option	Type	Default	Description
`mode`	`enum` "light" \| "dark" \| "system"	`"light"`	Specifies the default theme mode.
`class`	`boolean`	`true`	Sets the default theme mode selector strategy.
`attribute`	`string`	-	Specify attribute based selector strategy, e.g: `data-mode="dark"` by setting the `class` option to `false` .

Manage and interact with KTTheme instances using these static methods of


         KTTheme

class.

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

JavaScript HTML

				
					// Initialize all instances
KTTheme.init()

// Initialzie pending instances
KTTheme.createInstances();

// Get theme object
const themeEl = document.querySelector('body');
const theme = KTTheme.getInstance(themeEl);

				
					<!--begin::Root element-->
<body class="light" data-theme="true" data-theme-mode="light">
 ...
</body>
<!--end::Root element-->
<!--begin::Toggle theme mode-->
<button class="btn btn-icon btn-light" data-theme-toggle="dark" data-tooltip="#theme_mode_dark">
 <i class="ki-outline ki-sun">
 </i>
</button>
<button class="btn btn-icon btn-light" data-theme-toggle="light" data-tooltip="#theme_mode_light">
 <i class="ki-outline ki-moon">
 </i>
</button>
<button class="btn btn-icon btn-light" data-theme-toggle="system" data-tooltip="#theme_mode_system">
 <i class="ki-outline ki-system">
 </i>
</button>
<!--end::Toggle theme mode-->

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

Method	Description
`new KTTheme(element, options)`	Creates an object instance of KTTheme class for the given DOM `element` and configuration `options` .
`getMode()`	Retrieves the current theme mode value, which can be either `light` , `dark` or `system` .
`setMode(mode)`	Sets a new theme mode: `light` , `dark` , or `system` .
`getOption(name)`	Retrieves the value of a configuration option by `name` parameter from a KTTheme instance.
`getElement()`	Retrieves the DOM element linked to a specific KTTheme instance.
`on(eventName, handler)`	Allows attaching event listeners to the KTTheme custom events using the `eventName` and `eventId` string parameters. These events enable programmatic interaction based on user actions or internal state changes of KTTheme. 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 KTTheme instance from an element, including any associated data stored on the DOM element.

JavaScript HTML

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

theme.getMode();
theme.setMode('dark');

				
					<!--begin::Root element-->
<body class="light" data-theme="true" data-theme-mode="light">
 ...
</body>
<!--end::Root element-->


         KTTheme

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
`change`	Triggered immediately before the theme mode is changed.
`changed`	Triggered immediately after the theme mode is changed.

				
					// Theme element
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');
});