How to toggle base css with darkmode css conditionally and using variables in vuejs?

I have created a _darkmode.scss file to apply dark mode globally on my laravel+vuejs application.

I do not know how to replace/toggle it with base css i.e app.css which is generated using webpack mix function.

I have a toggle switch in nav bar, on @change event this file (_darkmode.scss) should be included / excluded.

mix
  .js("resources/assets/js/app.js", `${publicPath}/js`)
  .sass("resources/assets/sass/app.scss", `${publicPath}/css`)
  .extract(toExtract)
  .setPublicPath(publicPath)
  .setResourceRoot("../")
  .browserSync({
    proxy: "http://localhost:8000",
    port: 8080,
    files: [`${publicPath}/*`]
  });

if (mix.inProduction()) {
  mix.version();
}

This is my app.scss file where I import other styles

@import "variables";

// Bootstrap
@import "~bootstrap/scss/bootstrap";

@import "~font-awesome/scss/font-awesome";
@import url("https://fonts.googleapis.com/css?family=Poppins:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");

@import "~vue-loaders/dist/vue-loaders.css";
@import "~toastr/build/toastr.css";
@import "~vue-multiselect/dist/vue-multiselect.min.css";
@import "~vue-wysiwyg/dist/vueWysiwyg.css";
@import "~emojionearea/dist/emojionearea.min.css";
@import "~nprogress/nprogress.css";

@import "base/all";
@import "element/all";
@import "layout/all";

Kindly help me with it.