my name is Fernando and I've been working on a project where I've to import 2 css files and when the button is clicked, change theme of website. The bundle file runs manually and the page don´t refresh automatically. How can I fix it?

main.js file:

import 'core-js/stable';
import 'regenerator-runtime/runtime';
import './assets/css/dark.css';
import './assets/css/light.css';

import { FaEdit, FaWindowClose, FaPlus } from "react-icons/fa";

import Login from './modules/Login';

const login = new Login('.form-login');
const cadastro = new Login('.form-cadastro');

login.init();
cadastro.init();

index.ejs where are buttons: (it's working fine to change href of my head file)

<div id="theme" class="btn-group center" role="group">
        <button class="btn btn-outline-link" onclick="swapStyle('../../../frontend/assets/css/light.css')">Light
          Mode</button>
        <button class="btn btn-outline-link" onclick="swapStyle('../../../frontend/assets/css/dark.css')">Dark
          Mode</button>
        <script type="text/javascript">
          function swapStyle(sheet) {
            document.getElementById('mystylesheet').href = sheet;
          }
        </script>
      </div>

And finally, my webpack.config:

const path = require('path'); // CommonJS

module.exports = {
  mode: 'production',
  entry: './frontend/main.js',
  output: {
    path: path.resolve(__dirname, 'public', 'assets', 'js'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      exclude: /node_modules/,
      test: /\.js$/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/env']
        }
      }
    }, {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    }]
  },
  devtool: 'source-map'
};

How can I implement these theme changes at the moment when the button is clicked? Thanks a lot and if I forgot some relevant information, please tell me