Documentation v8.1.1

Preview Downloads Purchase

Overview

Metronic supports dynamic theme mode switching to both Dark and Light modes and storing the user's preference in browser's local storage.

Quick Setup

Change the theme mode by setting data-theme="dark"or data-theme="light"attributes to the page's root <html> tag. Works for background colors, images, text colors, border colors, shadows and even gradients.

<html data-theme="dark">
....
</html>

The theme mode can be set invidivually for particular page blocks despite having different mode for the page:

Instagram Social Media

87%

Instagram Social Media

87%

<!-- Dark mode -->
<div data-theme="dark">
....
</div>

<!-- Light mode -->
<div data-theme="light">
....
</div>

Initialization

The theme mode initialization are handled by the below inline Javascript code placed as the first child of the body element so the code is executed right after the body element's creation in the DOM. The default theme mode defaultThemeModevariable can be set to system, darkor light:

<!--begin::Theme mode setup on page load-->
<script>
 if ( document.documentElement ) {
  const defaultThemeMode = "system";

  const name = document.body.getAttribute("data-kt-name");
  let themeMode = localStorage.getItem("kt_" + ( name !== null ? name + "_" : "" ) + "theme_mode_value");

  if ( themeMode === null ) {
   if ( defaultThemeMode === "system" ) {
    themeMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   } else {
    themeMode = defaultThemeMode;
   }
  }

  document.documentElement.setAttribute("data-theme", themeMode);
 }
</script>
<!--end::Theme mode setup on page load-->

The theme mode can be switched through unified Theme Mode Switcher opened by the sun or moon icons click in the page's header block. The theme mode switch feature is handled by KTThemeModejavascript class and allows saving user's preference in the browser's local storage.

Flip Elements

Use .theme-light-showand .theme-dark-showutility classes to flip an element for particular theme mode:

<!-- Show for light mode only-->
<div class="theme-light-show">
....
</div>

<!-- Show for dark mode only-->
<div class="theme-dark-show">
....
</div>

Flip Images

Use .theme-light-showand .theme-dark-showutility classes to flip image for required mode:

<!-- Show for light mode only -->
<img alt="Logo" src="assets/logos/default.svg" class="theme-light-show h-35px"/>

<!-- Show for dark mode light-->
<img alt="Logo" src="assets/logos/default-dark.svg" class="theme-dark-show h-35px"/>

Use a custom class defined inside <style>tag for background image flip support:

<!--begin::Image placeholder-->
<style>
 .image-placeholder {
  background-image: url('assets/example.svg');
 }

 [data-theme="dark"] .image-placeholder {
  background-image: url('assets/example-dark.svg');
 }
</style>
<!--end::Image placeholder-->

<!-- Dark and light background image support -->
<div class="image-placeholder">
...
</div>

API Methods

The API methods of KTThemeModeclass defined in src/js/layout/theme-mode.js:

Name	Description
`getMode()`	Returns current theme mode as string `// Returns "dark" or "light" string value. var mode = KTThemeMode.getMode();`
`getMenuMode()`	Returns the theme switcher menu's current selection mode as string `// Returns "dark", "light" or "system" string value. var mode = KTThemeMode.getMenuMode();`
`getSystemMode()`	Returns the browser's mode as string `// Returns "dark" or "light" string value. var mode = KTThemeMode.getSystemMode();`
`setMode(String mode)`	Sets a mode to change the theme mode `KTThemeMode.setMode("dark");`

API Events

The API events of KTThemeModeclass defined in src/js/layout/theme-mode.js:

Event Type Description

Event Type	Description
`kt.thememode.init`	This event fires on the theme mode initialization right after the page load. `// Register an event handler var handlerId = KTThemeMode.on("kt.thememode.init", function() { console.log("Initialized init:" + KTThemeMode.getMode()); });`
`kt.thememode.change`	This event fires on previous navigation button click. `// Register an event handler var handlerId = KTThemeMode.on("kt.thememode.change", function() { console.log("Theme mode is changed:" + KTThemeMode.getMode()); }); // Unregister the event handler after 10 seconds setTimeout(function() { KTThemeMode.off("kt.thememode.change", handlerId); }, 1000 * 10);`

kt.thememode.init

This event fires on the theme mode initialization right after the page load.

// Register an event handler
var handlerId = KTThemeMode.on("kt.thememode.init", function() {
    console.log("Initialized init:" + KTThemeMode.getMode());
});

kt.thememode.change

This event fires on previous navigation button click.

// Register an event handler
var handlerId = KTThemeMode.on("kt.thememode.change", function() {
    console.log("Theme mode is changed:" + KTThemeMode.getMode());
});

// Unregister the event handler after 10 seconds
setTimeout(function() {
    KTThemeMode.off("kt.thememode.change", handlerId);
}, 1000 * 10);