I want to change the look of the menu bar

[mahmoudnabil 0]

I want to change the look of the menu bar
I want to change the shape of the menu bar to the black color in a consistent manner, as I tried to change it more than once, but I find some difficulties.
Thanks in advance

 

I want to change the background color to black and the menu to white

 

 

[mahmoudnabil 0]

Why is there no response

[visproduction 122]

I use these Styles.  There might be a shorter way to list them.  This is for the admin area only.

.mainDrawer.focuscontainer-y.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-docked.drawer-open > div.navDrawerItemsContainer.itemsContainer.vertical-list, .mainDrawer.focuscontainer-y.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-docked.drawer-open > div > div > button, .mainDrawer.focuscontainer-y.scrollY.hiddenScrollY-hover.scrollY-mini.drawer-docked.drawer-open > div.navDrawerItemsContainer.itemsContainer.vertical-list > button, .dialogContainer > div > div.actionSheetScroller.emby-scroller.scrollY > div > button, .paperList, .visualCardBox {
    background-color: #83a588;
}

.listItem-content {
    width: 101%;
}

The pull out left menu drawer on the Home page is controlled from inside /modules/listview/listview.css

I have not tried to change this menu.  I did notice that when you start changing these menus, the other notification menus and pull down menus elsewhere change, as well.  So, when you try this, double check all the other pull down menus to work how you like them.

Hope that helps.

 

Edited September 21, 2021 by visproduction

[Happy2Play 8217]

The theme inverts icon colors so changing a light theme will create visual issues with dark icons on dark backdrop.

div.drawer-docked {
    background: #2f2e30;}

.backgroundContainer, .dialog, html {
    background-color: #242125;
}

As mentioned you will get adverse side effects.

One of the reasons with split theming for non-premiere.

It will require doing it with every server update but overwrite the light theme files with the dark theme files in the theme folder.

C:\Users\Media\AppData\Roaming\Emby-Server\system\dashboard-ui\modules\themes (path is platform prevalent)