JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
<input class="form-check-input p-2" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked onclick="myFunction()" />
<hr />
<button type="button" class="btn btn-primary" data-bs-theme-value="light" aria-pressed="false"> Light </button>
<button type="button" class="btn btn-primary" data-bs-theme-value="dark" aria-pressed="false"> Dark </button>
<hr />
<p>
This is a sample text
</p>

JavaScript

function myFunction() {
	var element = document.body;
  element.dataset.bsTheme =
  element.dataset.bsTheme == "dark" ? "light" : "dark";
}