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