buefy navbar-menu (mobile burger) background color not working

Question

I'm trying to create a navbar using buefy. I want the navbar background color to have the primary-dark color from bulma. So I changed the sass variable primary to the original bulma primary color, which works.

To give it the primary dark color, I give it type has-background-primary-dark, doing only this make hovering on navbar-items weird, so I also gave it type is-primary. Which now does what I want.

However now when the page enters mobile view and displays the navbar-menu burger, and I click to extend the menu, the background color of the menu does not inherit the color from the navbar itself, thus it turns out white. I can style this using css, but I cannot figure out how to style the hover function.

Code:

<template>
  <div id="app">
    <b-navbar :fixed-top="true" type="has-background-primary-dark is-primary">
      <template #brand>
        <b-navbar-item tag="router-link" :to="{ path: '/'}">
          Madklub
        </b-navbar-item>
      </template>
      <template #end>
        <b-navbar-item class="is-white" tag="router-link" :to="{ path: '/about'}">
          Log ind
        </b-navbar-item>
        <b-navbar-item class="is-white" tag="router-link" :to="{ path: '/about'}">
          Registrer
        </b-navbar-item>
      </template>
    </b-navbar>

    <section class="is-primary hero is-fullheight">
      <div class="hero-body">
        <section class="section">
          <router-view/>
        </section>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMobileMenu: false
    }
  }
}
</script>

<style lang="scss">
// Import Bulma's core
@import "~bulma/sass/utilities/_all";

// Set your colors
$primary: hsl(171, 100%, 41%);
$primary-light: findLightColor($primary);
$primary-dark: findDarkColor($primary);
$primary-invert: findColorInvert($primary);

// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: mergeColorMaps(
    (
        "primary": (
            $primary,
            $primary-invert,
            $primary-light,
            $primary-dark,
        ),
    ),
    $custom-colors
);


// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";
</style>

Image:

How would I go about either making sure that the menu inherits the same color properties as the navbar itself, or style the menu to have the same color and hover color as the menu itself?