Documentation v8.0.36

Preview Downloads Purchase

Quick Setup

Metronic supports full Dark Mode that you can preview here and easiliy setup following the below instructions.

Run gulp task with --dark-modeflag in theme/tools/folder to generate the Dark Mode of CSS files.
```
gulp --dark-mode --demo1
```
For Webpack user, use below command.
```
npm run build --dark-mode --demo1
```

Switch CSS files to their Dark Mode. For example style.dark.bundle.cssand plugins.dark.bundle.cssare generated in assets folder:

<!--begin::Global Stylesheets Bundle(used by all pages)-->
<link href="assets/plugins/global/plugins.dark.bundle.css" rel="stylesheet" type="text/css" />
<link href="assets/css/style.dark.bundle.css" rel="stylesheet" type="text/css" />
<!--end::Global Stylesheets Bundle-->

Add dark-modeclass name to the <body>tag. Keep other bodyclass names.
```
<body class="dark-mode ...">

</body>
```

Use Javascript API methods KTApp.setThemeMode(mode String, callback Function)to set the theme mode dynamically without refreshing the page:

KTApp.setThemeMode("dark", function() {
    console.log("changed to dark mode");
}); // set dark mode

KTApp.setThemeMode("light", function() {
    console.log("changed to light mode");
}); // set light mode

Some images have special dark versions that can be flipped by just appending -darkprefix to the file name:

<img src="assets/media/illustrations/sketchy-1/1.png"/>

to:

<img src="assets/media/illustrations/sketchy-1/1-dark.png"/>

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v8.0.36

Quick Setup

Explore

Metronic Licenses

Metronic Demos

Learn & Get Inspired

Support at devs.keenthemes.com

Getting Started

Base

Forms

Editors

Charts

General

Icons

Documentation v8.0.36

No result found

Quick Setup

Explore

Metronic Licenses

Metronic Demos

Learn & Get Inspired

Support at devs.keenthemes.com