Unable to make dark mode default
I am unable to make dark mode as default. I have tried adding data-bs-theme-mode="dark" to the html tag, however that doesn't seem to change anything. I have also set the defaultThemeMode = "dark".
All instructions on page https://preview.keenthemes.com/html/metronic/docs/getting-started/dark-mode have been followed, but light mode is always selected by default. I can confirm that the user is able to switch back and forth, so I know dark mode works. I just can't seem to get it to be selected by default.
Thank you,
Bill
Replies (11)
Hi,
If you need to setup the dark mode as default you can just use set it in the global theme init script var defaultThemeMode = "dark";.
You need to reset the theme mode as permanent mode you can set data-bs-theme-mode="dark" attribute to the html tag as explained here.
Regards.
I have done both of those things as I mention in my original comment.
Hi,
Are you using the latest Metronic 8.1.8 version? Please note that the dark mode support requires the latest Metronic and Bootstrap versions.
Also, would it be possible to check your page from a test server?
Regards.
Yes, I am on version 8.1.8. Unfortunately my site is not available online yet as I am developing locally .
Here is the header section of my site:
<!DOCTYPE html>
<html lang="en" theme-mode="dark" data-bs-theme-mode="dark">
<!--begin::Head-->
<head><base href=""/>
<title>r3dlabs</title>
<meta charset="utf-8" />
<meta name="description" content="r3dlabs provides free and premium stream channel tools and team event management" />
<meta name="keywords" content="stream, streamer, raid, raid train, train, twitch, youtube, kick, chatbot, chat" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="r3dlabs stream tools and raid event management" />
<meta property="og:url" content="https://r3dlabs.com" />
<meta property="og:site_name" content="r3dlabs stream tools" />
<link rel="canonical" href="https://r3dlabs.com" />
<link rel="shortcut icon" href="/assets/media/logos/favicon.ico" />
<!--begin::Fonts(mandatory for all pages)-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700" />
<!--end::Fonts-->
<!--begin::Vendor Stylesheets(used for this page only)-->
<link href="/assets/plugins/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
<link href="/assets/plugins/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css" />
<link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
<link href="/assets/plugins/custom/croppie/croppie.css" rel="stylesheet" type="text/css" />
<!--end::Vendor Stylesheets-->
<!--begin::Global Stylesheets Bundle(mandatory for all pages)-->
<link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" />
<link href="/assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
<!--end::Global Stylesheets Bundle-->
</head>
<!--end::Head-->
<!--begin::Body-->
<body data-bs-theme-mode="dark" class="header-fixed header-tablet-and-mobile-fixed toolbar-enabled">
<!--begin::Theme mode setup on page load-->
<!--end::Theme mode setup on page load-->Hi,
Please try to use data-bs-theme-mode="dark" on the HTML tag and remove it from the body tag. Also remove theme-mode="dark" from the HTML tag.
Regards.
Hi,
That didn't make a difference. Here is the code now - still showing "light" for default.
<!DOCTYPE html>
<html lang="en" data-bs-theme-mode="dark">
<!--begin::Head-->
<head><base href=""/>
<title>r3dlabs</title>
<meta charset="utf-8" />
<meta name="description" content="r3dlabs provides free and premium stream channel tools and team event management" />
<meta name="keywords" content="stream, streamer, raid, raid train, train, twitch, youtube, kick, chatbot, chat" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="r3dlabs stream tools and raid event management" />
<meta property="og:url" content="https://r3dlabs.com" />
<meta property="og:site_name" content="r3dlabs stream tools" />
<link rel="canonical" href="https://r3dlabs.com" />
<link rel="shortcut icon" href="/assets/media/logos/favicon.ico" />
<!--begin::Fonts(mandatory for all pages)-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700" />
<!--end::Fonts-->
<!--begin::Vendor Stylesheets(used for this page only)-->
<link href="/assets/plugins/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
<link href="/assets/plugins/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css" />
<link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
<link href="/assets/plugins/custom/croppie/croppie.css" rel="stylesheet" type="text/css" />
<!--end::Vendor Stylesheets-->
<!--begin::Global Stylesheets Bundle(mandatory for all pages)-->
<link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" />
<link href="/assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
<!--end::Global Stylesheets Bundle-->
</head>
<!--end::Head-->
<!--begin::Body-->
<body class="header-fixed header-tablet-and-mobile-fixed toolbar-enabled">
<!--begin::Theme mode setup on page load-->
<!--end::Theme mode setup on page load-->
<!--begin::Main-->
<!--begin::Root-->
<div class="d-flex flex-column flex-root">Hi,
Sorry, we could not understand what could be your issue as the issue you reported is not common and none of the users reported such a bug.
Could you please redownload the latest Metronic v8.1.8 and try to set the default theme mode as shown below:
<html l data-bs-theme-mode="dark" >
</html>The above code should work if you use the original HTML templates. Please make sure you included all css/js scripts as per the original template HTML code.
Regards.
Hi Sean,
I finally have an environment deployed to the web. Can you please take a look and let me know what I'm doing wrong?
You can find it at https://dev-bill.r3dlabs.com/
thanks,
Bill
In the Vue version of the latest Metronic, the html attribute is called data-bs-theme, not data-bs-theme-mode
Hi Marcell, that doesn't seem to have made a difference.
Hi,
Can you try the followings:
1) Remove src/js/layout/theme-mode.js from the source and recompile the assets folder with a gulp. Then recompile your assets folder with Gulp.
2) Add data-bs-theme-mode="dark", data-bs-theme="dark" and data-theme="dark" to the HTML tag.
Regards.
