Dark Mode Toggler Example

DARK THEME TOGGLERS EXAMPLE
Common code between both implementations:
Click on buttons to see/expand the code

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

Done with CSS variables:

:root {
    --bg-color: #6c757d;
    --text-color : black;
}

[data-theme="dark"] {
    --bg-color: #212529;
    --text-color: white;
}

body {
    color: var(--text-color);
    background-color: var(--bg-color);
}

.pointer * {
    cursor: pointer;
    user-select: none;
}

Or the same can be achieved this way:

body {
    color: white;
    background-color: #6c757d;
}

[data-theme="dark"] body {
    color: black;
    background-color: #212529;
}

.pointer * {
    cursor: pointer;
    user-select: none;
}

This script is recommended to be on the HTML head so the theme can be stablish before the page loads, this avoids the page flashing when the theme changes on slow connections or CPUs

Include the script via jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/gh/Haruki1707/ThemeToggler/theme.toggler.min.js" crossorigin="anonymous"></script>

Or instead check the code:

// getColorPreference: true (default)
// defaultTheme: 'light' (default)

// Default value of 'getColorPreference' by defining 'modifyGetColorPreference' with another value
// Same applies to 'defaultTheme', it can be modified by defining 'modifyDefaultTheme'
// This 'modify' variables declaration must be before the load of this script

let getColorPreference =  typeof modifyGetColorPreference !== 'undefined' ? modifyGetColorPreference : true;
let defaultTheme =  typeof modifyDefaultTheme !== 'undefined' ? modifyDefaultTheme : 'light';

// Gets last saved theme on local storage, if null sets the theme based on system preference
let theme = localStorage.getItem('data-theme') || (getColorPreference ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? 'dark' : 'light') : defaultTheme);

const setTheme = (newTheme) => {
    theme = newTheme; // sets newTheme to theme
    localStorage.setItem("data-theme", newTheme) // saves newTheme to local storage
    document.documentElement.setAttribute("data-theme", newTheme) // sets newTheme to data-theme
}

// Sets the theme
setTheme(theme);

document.onreadystatechange = () => {
    // Gets the element based on ID, adds 'checked' attribute if theme is dark and adds onchange event listener
    const themeToggler = document.getElementById("themeToggler");
    themeToggler.checked = theme == 'dark' ? true : false;
    themeToggler.onchange = (event) => setTheme(theme != 'light' ? 'light' : 'dark');
};

Dark theme

Required code for bootstrap switch implementation:

<div class="form-check form-switch pointer">
    <input class="form-check-input" type="checkbox" role="switch" id="themeToggler">
    <label class="form-check-label" for="themeToggler">Dark theme</label>
</div>

Dark theme
Required code for custom switch implementation:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">

<label class="pointer d-flex align-items-center justify-content-center">
    <div class="themeToggler-switch d-flex align-items-center justify-content-center">
        <input type="checkbox" class="d-none" id="themeToggler">
        <i class="bi bi-circle-fill text-light themeToggler-circle"></i>
        <i class="bi bi-brightness-high text-dark themeToggler-icon"></i>
        <i class="bi bi-moon-fill text-light themeToggler-icon"></i>
    </div>
    <span class="themeToggler-text">Dark theme</span>
</label>

Include the style via jsDelivr CDN (already includes the 'pointer' class):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Haruki1707/ThemeToggler/theme.toggler.min.css" crossorigin="anonymous">

Or instead check the code:

:root{
    /*This variables can be modified to customize the themeToggler */
    --themeToggler-bg-color: #0c0b13;
    --themeToggler-text-color: black;
}

[data-theme="dark"] {
    --themeToggler-bg-color: #9c9ca3;
    --themeToggler-text-color: white;
}

[class*=" themeToggler-"]::before {
    display: block !important;
}

.themeToggler-switch {
    width: 64px;
    height: 30px;
    padding: 6px;
    font-size: 20px;
    position: relative;
    border-radius: 60px;
    transition: all 0.5s;
    background-color: var(--themeToggler-bg-color);
}

.themeToggler-circle {
    font-size: 24px;
    position: absolute;
    transition: all 0.5s;
    transform: translateX(-16px);
}

.themeToggler-icon {
    padding: 6px;
    font-size: 20px;
}

.themeToggler-text {
    padding-left: 5px;
    transition: all 0.5s;
    color: var(--themeToggler-text-color);
}

[data-theme="dark"] .themeToggler-circle {
    transform: translateX(16px);
}