[Vuejs]-How to change the background color of the sidebar in vuesax and make it take the height of the screen?

firt of all you need to run this command.
(npm i stylus stylus-loader –save-dev)
then in your vue component where you are using sidebar put the below code after script tag.

    <style lang="stylus">
       .parentx-static
          overflow hidden
          height 100%
          position fixed

       .sidebarx
         height 100%

       .vs-sidebar.vs-sidebar-staticPosition
         background-color #181818

       .header-sidebar
          background-color: #000000;
          margin-left: -5%;
          margin-top: -8%;
          display flex
          align-items center
          justify-content center
          flex-direction column
          width 114%
          h4
           display flex
           align-items center
           justify-content center
           width 100%
           > button
             margin-left 10px
        .footer-sidebar
          display flex
          align-items center
          justify-content space-between
          width 100%
          > button
            border 0px solid rgba(0,0,0,0) !important
            border-left 1px solid rgba(0,0,0,.07) !important
            border-radius 0px !important
    </style>

you may also put the css in separate file if you include your separate css file.
Note: Only RGB and HEX color are acceptable.
for more information please see the link below.
Link: https://lusaxweb.github.io/vuesax/theme/#colors-defaults

here you can see some default sidebars.
https://lusaxweb.github.io/vuesax/components/sideBar.html#default