Logo Logo

Documentation v1.1.5

Preview
Light
Dark
System

Overview

Craft supports dynamic theme mode switching to both Dark  and Light  modes by storing the user's preference in the browser's local storage or user'f profile in the server side database.

Quick Setup

The theme mode can be set through data-bs-theme-mode attribute on the page's root <html> tag. The theme mode accepts dark, light or system. If this attribute is not set then user's selected theme mode will be stored in the browser storage. 
<html data-bs-theme-mode="light">
....
</html>
Refer to src/js/layout/theme-mode-user.js script to submit the selected theme mode value to backend for saving it in database so users always use prefered theme mode when logged in from different devices.
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-bs-theme="dark">
....
</div>

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

Initialization

To enable remembering user's selected theme mode in the browser storage the below inline Javascript code must be 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 defaultThemeMode variable can be set to system, dark or light: 
<!--begin::Theme mode setup on page load-->
<script>
var defaultThemeMode = "light";
var themeMode;

if ( document.documentElement ) {
    if ( document.documentElement.hasAttribute("data-bs-theme-mode")) {
        themeMode = document.documentElement.getAttribute("data-bs-theme-mode");
    } else {
        if ( localStorage.getItem("data-bs-theme") !== null ) {
            themeMode = localStorage.getItem("data-bs-theme");
        } else {
            themeMode = defaultThemeMode;
        }
    }

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

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

Switch Menu

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 KTThemeMode javascript class and allows saving user's preference in the browser's local storage.

Flip Elements

Use .theme-light-show and .theme-dark-show utility 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-show and .theme-dark-show utility 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-bs-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 KTThemeMode class 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 KTThemeMode class defined in src/js/layout/theme-mode.js:
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);
try metronic buy mega bundle
Preview Get Help Buy Now