Overview

Metronic 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-theme-modeattribute on the page's root <html> tag. The theme mode accepts dark, lightor system. If this attribute is not set then user's selected theme mode will be stored in the browser storage.

													<html data-theme-mode="light">
....
</html>
                

Refer to src/js/layout/theme-mode-user.jsscript 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 individually 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

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 defaultThemeModevariable can be set to system, darkor light:

resources/views/partials/theme-mode/_init.blade.php