Is Multi Color theme setup is possible in Vue Demo | Metronic 8
Hi Team ,
Is seting up Different color theme of Metronic is possible on load time .
I want to load different color for different client App .
Suppose a client A login to App then Whole app appear with blue,
If Client B login to APP , then whole app appear with pink theme..
and so on ..
Replies (1)
Hi,
By default, Metronic supports two theme modes: dark and light. If you want to add a custom mode with unique colors, you can achieve this by using a custom selector with the data-bs-theme attribute.
We switch between dark and light modes based on the value of data-bs-theme attribute on the body element, where "dark" represents dark mode, and "light" represents light mode. To create a custom mode, you can override Bootstrap variables within a selector like [data-bs-theme="blue"] as shown below:
[data-bs-theme="blue"] {
--bs-body-color: var(--bs-white);
--bs-body-color-rgb: #{to-rgb($white)};
--bs-body-bg: var(--bs-blue);
--bs-body-bg-rgb: #{to-rgb($blue)};
--bs-tertiary-bg: #{$blue-600};
.dropdown-menu {
--bs-dropdown-bg: #{mix($blue-500, $blue-600)};
--bs-dropdown-link-active-bg: #{$blue-700};
}
.btn-secondary {
--bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
--bs-btn-border-color: #{rgba($white, .25)};
--bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
--bs-btn-hover-border-color: #{rgba($white, .25)};
--bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
--bs-btn-active-border-color: #{rgba($white, .5)};
--bs-btn-focus-border-color: #{rgba($white, .5)};
--bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
}
}The code below demonstrates how you can set the mode, you can use this code conditionally to set the mode depending on client.
document.documentElement.setAttribute("data-bs-theme", "dark");
document.documentElement.setAttribute("data-bs-theme", "light");
document.documentElement.setAttribute("data-bs-theme", "blue");For more information on color modes, you can refer to Bootstrap's official documentation.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
