Logo Logo

Documentation v8.0.38

  • Getting Started
  • Dark Mode
Preview Downloads Purchase

Quick Setup

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

  1. 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
  2. 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-->
  3. Add dark-modeclass name to the <body>tag. Keep other bodyclass names. 
    <body class="dark-mode ...">
<!-- HTML content -->
</body>
  4. 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
  5. 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"/>