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.
data-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-theme-mode="light">
....
</html>
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.
<!-- Dark mode -->
<div data-theme="dark">
....
</div>
<!-- Light mode -->
<div data-theme="light">
....
</div>
defaultThemeMode
variable can be set to
system
,
dark
or
light
:
resources/views/partials/theme-mode/_init.blade.php