Как сделать основное меню белым

Для этого указываем в глобальном CSS: 

/* white menu */
html body #accordionSidebar{background: #fff !important;}
.sidebar-dark .nav-item .nav-link{color: #222 !important;}
.sidebar-dark .nav-item .nav-link i {
    color: #222 !important;
}
.sidebar-dark .nav-item .nav-link:active i, .sidebar-dark .nav-item .nav-link:focus i, .sidebar-dark .nav-item .nav-link:hover i {
    color: #000 !important;
}
.sidebar-dark .nav-item .nav-link[data-toggle=collapse]::after{
color: #222 !important;
}

.sidebar-heading{ color: #444 !important;}
.sidebar-dark hr.sidebar-divider {
    border-top: 1px solid #444 !important;
}
body .sidebar-dark .sidebar-brand{color: purple !important;}
/* end white menu */

Если нужно на мобильном оставить цветной вариант, то используем media запросы.

@media (min-width: 768px) {
    
}