back ground color mode for content and footer not change - laravel 8.19 theme
Hi, i try everything in you demo background color changed but in when i download and execute your laravel code then background color of content and footer not changing, here is code where i think something is missing
// Toolbar
//
// Form controls
:is([data-kt-app-layout="light-sidebar"], [data-kt-app-layout="light-header"], [data-kt-app-layout="dark-header"]) {
.app-toolbar {
.form-select {
background-color: var(--#{$prefix}body-bg) !important;
}
}
}
// Desktop mode
@include media-breakpoint-up(lg) {
.app-toolbar {
[data-kt-app-layout="light-sidebar"] & {
border-top: 1px solid var(--#{$prefix}border-color);
}
body:not([data-kt-app-toolbar-fixed="true"]) & {
height: auto;
background-color: transparent;
border-top: 0;
border-bottom: 0;
box-shadow: none;
}
}
[data-kt-app-layout="light-header"] .app-footer {
border-top: 1px solid var(--#{$prefix}border-color);
body:not([data-kt-app-footer-fixed="true"]) & {
height: auto;
background-color: white;
border-top: 0;
border-bottom: 0;
box-shadow: none;
}
}
[data-kt-app-layout="dark-header"] .app-footer {
border-top: 1px solid var(--#{$prefix}border-color);
body:not([data-kt-app-footer-fixed="true"]) & {
height: auto;
background-color: black;
border-top: 0;
border-bottom: 0;
box-shadow: none;
}
}
}
// Tablet & mobile modes
@include media-breakpoint-down(lg) {
.app-toolbar {
body:not([data-kt-app-toolbar-fixed-mobile="true"]) & {
height: auto;
background-color: transparent;
border-top: 0;
border-bottom: 0;
box-shadow: none;
}
}
}
Replies (3)
Hi,
You can change the footer bg color via the SASS variables in src/sass/layout/_variables.custom.scss:
$app-footer-bg-color: transparent;
$app-footer-bg-color-dark: transparent;The content bg color you can change
src/sass/layout/_content.scssRegards.
Regards.
Dear Team here is the code for the content i want to get black color in the background when I select the dark and when I select the light it shows transparent I try but not working kindly suggest me
//
// Content
//
// Desktop mode
@include media-breakpoint-up(lg) {
.app-content {
[data-kt-app-toolbar-enabled="true"]:not([data-kt-app-toolbar-fixed="true"]) & {
padding-top: 0;
}
background-color: var(--#{$prefix}body-bg) !important;
}
}
// Tablet & mobile modes
@include media-breakpoint-down(lg) {
.app-content {
[data-kt-app-toolbar-enabled="true"]:not([data-kt-app-toolbar-fixed-mobile="true"]) & {
padding-top: 0;
}
background-color: var(--#{$prefix}body-bg) !important;
}
}
//
// Content
//
// Desktop mode
@include media-breakpoint-up(lg) {
.app-content {
[data-kt-app-toolbar-enabled="true"]:not([data-kt-app-toolbar-fixed="true"]) & {
padding-top: 0;
}
background-color: var(--#{$prefix}body-bg) !important;
}
}
// Tablet & mobile modes
@include media-breakpoint-down(lg) {
.app-content {
[data-kt-app-toolbar-enabled="true"]:not([data-kt-app-toolbar-fixed-mobile="true"]) & {
padding-top: 0;
}
background-color: var(--#{$prefix}body-bg) !important;
}
}
Hi,
Can you please try to use the Bootstrap mixing for the theme modes:
@include color-mode(dark) {
//Put your sass customization code for the dark mode only
}Regards.
