Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Sidebar color

How can we change the sidebar dark color ? I'm using Metronic 8.1.6 laravel starterkit

inspecting the sidebar this is the color it has:

[data-kt-app-layout=dark-sidebar] .app-sidebar {
background-color: #1e1e2d;
border-right: 0!important;

Where can i change it to another color? thank you

Text formatting options

Replies (1)

Hi Carlos,

To change the sidebar dark color in Metronic 8.1.6 Laravel Starterkit, follow these steps:

1. Open the file demo1/src/sass/layout/sidebar/_sidebar-dark.scss . This file contains the styles for the dark sidebar.

2. Look for the background-color property within this file. It should reference the $app-sidebar-dark-bg-color variable.

3. To change the color, navigate to demo1/src/sass/layout/_variables.custom.scss file. In this file, you will find the variable declaration section.

4. Locate the $app-sidebar-dark-bg-color variable and update its value to the desired color code. For example, if you want a blue background, you can set it to #0000FF .

5. Save the changes made to _variables.custom.scss .

6. Recompile the assets by running the command npm run dev . This will regenerate the CSS files with your updated styles.

After following these steps, the sidebar dark color should be changed to the new color you specified. Make sure to clear any cache or reload the page to see the changes.

If you have any further questions or need additional assistance, feel free to ask.


Text formatting options
Text formatting options