The Dracula menu is on the left.

$(document).ready(function () {
    $('#test').BootSideMenu({
        side: 'left',
        theme:'dracula'
    });
});

If you need to create a theme like this... here is the way:

Create and embed (after the BootSideMenu.css inclusion) a css file, contains something like this:

.customtheme{
    background-color: #404040;
    color:#CAE682;
}

.customtheme .toggler{
    background-color: #404040;
}

.customtheme a,
.customtheme a:hover,
.customtheme a:visited {
    color: #EFEFAF;
}

.customtheme.bootsidemenu-left,
.customtheme.bootsidemenu-right,
.customtheme.bootsidemenu-left > .toggler,
.customtheme.bootsidemenu-right > .toggler{
    border-color: #44475a;
}

.customtheme .list-group-item.active,
.customtheme .list-group-item.active:focus,
.customtheme .list-group-item.active:hover
.customtheme .item.active:focus {
    color:#44475a;
    background-color: #DFBE95;
    border-color: #DFBE95;
}

.customtheme a.list-group-item{
    color:#CAE682;
}

.customtheme a.list-group-item:focus,
.customtheme a.list-group-item:hover,
.customtheme button.list-group-item:focus,
.customtheme button.list-group-item:hover {
    color: #44475a;
    text-decoration: none;
    background-color: #DFBE95;
    border-color: #DFBE95;
}
                    

After that, use your 'customtheme' name into theme: option.

In the next example you can see how to control the menu remotely.