Scheduler - How to switch between dark and light themes

You can switch the CSS theme using the update() method:

dp.update({theme: "my_dark_theme"});

And back:

dp.update({theme: "my_light_theme"});

Both theme files need to be included in the page using <link>.

I have another issue when switching between light and dark themes. How can I keep the line and the hover effect when changing the background of the context menu? See please the attached video

I edited the picture for background-image of .menu_default_main. However, it gets covered by the value of background-color. I assume the same reason applies for the hover effect too?

.menu_default_main {
    border: 1px solid var(--scheduler-border-color) !important;
    background-color: var(--scheduler-base-background-color);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAABCAYAAADJsB7sAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOvAAADrwBlbxySQAAACl0RVh0Q3JlYXRpb24gVGltZQBwbyAxMCA1IDIwMTAgMjI6MzM6NTkgKzAxMDBs8u/iAAAAB3RJTUUH2gUKFCQHrI+FVAAAABNJREFUGFdj+E9nEBgYCST//wcAM6t1h3ShuFUAAAAASUVORK5CYII=) !important;
    background-repeat: repeat-y !important;
}

.menu_default_main,
.menu_default_main * {
    background-color: var(--scheduler-base-background-color) !important;
    color: var(--base-text-color) !important;
}