Default dark mode
How do I set dark mode as the default? I'm following the example from https://keenthemes.com/metronic/tailwind/docs/customization/dark-mode. When I set dark mode, the page loads in dark mode but then switches to light mode.
Replies (3)
Hi
Use the full inline theme script from the dark mode guide (the block that sets defaultThemeMode and then resolves themeMode from, in order: localStorage.getItem('kt-theme'), else data-kt-theme-mode on <html>, else defaultThemeMode). Set const defaultThemeMode = 'dark' there. Replace the body-only classList.add('dark') snippet with this full script so behaviour matches what core.bundle.js expects.
Put that script at the very start of <body> (first thing after <body> opens), before your main content.
On <html>, include data-kt-theme="true" together with data-kt-theme-mode="dark", like the stock Metronic Tailwind HTML layout.
Clear or fix the stored preference: open DevTools → Application → Local Storage for your site and remove kt-theme, or set it to dark. If kt-theme was saved as light from earlier tests, it will always win until cleared.
Test in a private window (incognito) after the above so you are not seeing an old cached value.
Next Steps: If it still flips after the full script, data-kt-theme="true", and clearing kt-theme, say whether any other script toggles theme or writes localStorage, and we can narrow it down.
Hi
Sorry for the delay. Please check this doc:
https://keenthemes.com/metronic/tailwind/docs/customization/dark-mode
On <html>, set data-kt-theme-mode="dark" and, in the same inline script from the docs, set const defaultThemeMode = 'dark' (allowed values: light, dark, system).
After that, reload with cache/storage as needed so you are not still reading an old kt-theme value.
Hi,
Thank you for your reply. I think I'm doing something wrong. Here is my code:
<!DOCTYPE html>
<html class="h-full" data-kt-theme-mode="dark" dir="ltr" lang="{{ app.locale }}">
<head>
<meta charset="UTF-8">
<title>{% block title %}Test{% endblock %}</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
{% block stylesheets %}
<link href="{{ asset("metronic/vendors/keenicons/styles.bundle.css") }}" rel="stylesheet"/>
<link href="{{ asset("metronic/css/styles.css") }}" rel="stylesheet"/>
{% endblock %}
{% block javascripts %}
{% block importmap %}{{ importmap("app") }}{% endblock %}
{% endblock %}
</head>
<body class="antialiased flex h-full text-base text-foreground bg-background dark:bg-coal-500">
<script>
if (document.documentElement) {
document.documentElement.classList.add("dark");
}
</script>
{% block body %}{% endblock %}
<script src="{{ asset("metronic/js/core.bundle.js") }}"></script>
<script src="{{ asset("metronic/vendors/ktui/ktui.min.js") }}"></script>
</body>
</html>I recorded a short video showing the mode switching from dark to light.
www.dropbox.com/scl/fi/w0kx9w26vg4pfgtdg29en/dark_mode.mov?rlkey=bxrp8y42auvmxkkqtcqrntllc&e=2&st=7lambeo6&dl=0
