Background color not changing in Loading Page with respect to dark-mode

I’m using the Metronic 8 Demo4 React version.
I have implemented functionality of dark mode in the web app. Now I'm trying to change the background color of the loading page to 'black' when the mode is in on dark-mode and back to 'white' when the mode is on the light-mode. I am using an id called 'splash-screen' to style.

The issue is that until the dark-mode button is toggled, the background color is working fine in light mode but once the mode is in the dark mode, the background color of the Loading Page is not switching back to white when entering the light mode. It's always rendering with black background whenever the app is loading irrespective of the mode. This is happening only in the Loading Page. Could I please get a solution to this?

This is the code in index.html file -

<body id="kt_body" class="page-loading dark-mode">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root" class="d-flex flex-column flex-root"></div>
<div id="splash-screen" class="splash-screen">
<img src="%PUBLIC_URL%/media/logos/logo-2.svg" alt="Metronic logo" class="h-30px" />
<span>Loading...</span>
</div>
<div id="root-modals"></div>
</body>


This is the CSS -

.dark-mode #splash-screen{
background-color: black;
}

#splash-screen {
background-color: #fff;
}

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (9)

Hi,

Which Metornic version are you using?

It is how the splash screen should work by default, we had an issue with it in Metronic versions > 8.1.6, if you are using an older version of Metornic you can update the theme mode setup code in your index.html. Replace script tag from index.html with script tag shown below.

<script>
if (document.documentElement) {
var defaultThemeMode = "system";

var themeMode = localStorage.getItem("kt_theme_mode_value");
if (!themeMode) {
if (defaultThemeMode === "system") {
themeMode =
window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
} else {
themeMode = defaultThemeMode;
}
}

document.documentElement.setAttribute("data-theme", themeMode);
}
</script>

Regards,
Lauris Stepanovs,
Keenthemes Support Team

I'm using v8.0.38.

Hi,

Did you update script tag in public/index.html?

Regards,
Lauris Stepanovs,
Keenthemes Support Team

I did, but its not working. I have implemented the dark mode using a npm package called 'use-dark-mode'.

import React from "react";
import useDarkMode from "use-dark-mode";
const lightTheme = "light-mode";
const darkTheme = "dark-mode";

export const useTheme = () => {
const darkMode = useDarkMode();
const [theme, setTheme] = React.useState(darkTheme);
React.useEffect(() => {
setTheme(darkMode?.value ? darkTheme : lightTheme);
}, [darkMode.value]);

return theme;
};

I'm passing this theme to the classname in the outermost div in the jsx elements in AppRoutes component.

const AppRoutes = () => {

const { currentUser } = useAuth();
const theme = useTheme();

return (<BrowserRouter basename={PUBLIC_URL}>
<div className={theme}>
<Routes>
<Route element={<App />}>
<Route path='error/*' element={<ErrorsPage />}/>
<Route path='logout' element={<Logout />}/>
{currentUser ? (<>
<Route path='/*' element={<PrivateRoutes />}/>
<Route index element={<Navigate to='/dashboard'/>}/>
</>) : (<>
<Route path='auth/*' element={<AuthPage />}/>
<Route path='*' element={<Navigate to='/auth'/>}/>
</>)}
</Route>
</Routes>
</div>
</BrowserRouter>);

Hi,

Do you have the same issue on our preview page?
https://preview.keenthemes.com/metronic8/react/demo1/

If you have problems only with static splash-screen then most likely the issue is related to script tag in public/index.html.

Here is an updated script tag, this one should work correctly for react if you didn't change name of the mode local storage key.

<script>
if (document.documentElement) {
var defaultThemeMode = "system";

var hasKTName = document.body.hasAttribute("data-kt-name");
var lsKey = "kt_" + (hasKTName ? name + "_" : "") + "theme_mode_value"
var themeMode = localStorage.getItem(lsKey);
if (!themeMode) {
if (defaultThemeMode === "system") {
themeMode =
window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
} else {
themeMode = defaultThemeMode;
}
}

document.documentElement.setAttribute("data-theme", themeMode);
}
</script>

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi,

The loading page is working fine in this:
https://preview.keenthemes.com/metronic8/react/demo1/

Tried with this new script tag code, still not working. Do we need to import something to index.html file?

Hi,

Are your index.html and splash-screnn.css similar to the one we are using in the latest Metronic version?

You can just fully copy these two files and replace them in your public folder.

Also, please check your console for errors.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

I have been doing all the dark mode styling in the splash-screen.css file. So I guess, the content in the html and css files are not fully similar.

I'm using v8.0.38, could you provide me with the latest code of the these 2 files?

Hi,

Sorry for the late reply.

Here are the latest index.html and splash-screen.css.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Metronic React Demo 1" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700">
<title>Metronic Theme | Keenthemes</title>
<link rel="shortcut icon" href="%PUBLIC_URL%/media/logos/favicon.ico" />
<link rel="stylesheet" href="%PUBLIC_URL%/splash-screen.css" />
</head>

<body class="page-loading splash-screen mat-typography">
<noscript>You need to enable JavaScript to run this app.</noscript>
<!--begin::Theme mode setup on page load-->
<script>
if (document.documentElement) {
var defaultThemeMode = "system";

var themeMode = localStorage.getItem("kt_theme_mode_value");
if (!themeMode) {
if (defaultThemeMode === "system") {
themeMode =
window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
} else {
themeMode = defaultThemeMode;
}
}

document.documentElement.setAttribute("data-theme", themeMode);
}
</script>
<!--end::Theme mode setup on page load-->

<div ></div>
<div class="splash-screen">
<img src="%PUBLIC_URL%/media/logos/default-small.svg" alt="Metronic logo" />
<span>Loading ...</span>
</div>
<div ></div>
</body>

</html>

splash-screen.css

body {
margin: 0;
padding: 0;
}

.splash-screen {
position: absolute;
z-index: 1000;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family: Helvetica, 'sans-serif';
background-color: #f2f3f8;
color: #5E6278;
line-height: 1;
font-size: 14px;
font-weight: 400;
}

.splash-screen span {
color: #5E6278;
transition: none !important;
text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}

.splash-screen img {
margin-left: calc(100vw - 100%);
margin-bottom: 30px;
height: 30px !important;
}

[data-theme="dark"] .splash-screen {
background-color: #151521;
color: #92929F;
}

[data-theme="dark"] .splash-screen span {
color: #92929F;
}

You can refer to these files in the latest Metronic version.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(