Реагировать на переключение тем / css?

У меня есть приложение для реагирования, которое должно отображаться как в светлой, так и в темной теме.

Две темы, которые я использую, - это «темная загрузка» и «жесткая загрузка».

Вот как выглядит мой index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
import registerServiceWorker from './registerServiceWorker';

// import 'bootstrap/dist/css/bootstrap.min.css';

import './bootstrap-darkly.min.css';
import './lib/sb-admin/sb-admin.min.css';
import './lib/fontawesome-free/css/all.css';
import './index.css';

import 'jquery/dist/jquery';
import 'bootstrap/dist/js/bootstrap.bundle';

import './prototypes';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

Изменение строки «import './bootstrap-darkly.min.css';» чтобы "импортировать './bootstrap-flatly.min.css';" достигает желаемого результата изменения темы в приложении, но я бы хотел, чтобы это переключалось через пользовательский интерфейс.

Где и как правильно изменить это через пользовательский интерфейс? Как я могу изменить, какой CSS импортируется в вышеупомянутой строке через пользовательский интерфейс?

Я понимаю, что это, вероятно, лучше всего сделать через страницу настроек пользователя, но мне неясно, как сделать это изменение с помощью JS.