Tengo un archivo css adicional que me gustaría cargar, una vez habilitado a través de un interruptor de palanca. & Inversamente, permite que se desactive y vuelva al archivo .css predeterminado cuando se desactive.
Parece que tengo algunos problemas para agregar esto con éxito, ya que escribir java-script es un poco complicado para mí a veces. Así que hago un llamado a la comunidad para que ofrezca su opinión y cómo harían para agregar esta capacidad. ¡Gracias a todos de antemano por su tiempo y lectura!
Aquí está la URL del sitio: ( https://phpstack-726541-2423367.cloudwaysapps.com/ ) Puede ver el interruptor en la esquina superior derecha
Sería muy apreciado por la solución más simple posible a esto :)
???? Bootstrap toggle switch, so no custom or additonal css to include. The path for the intended css file is 'assets/css/dark-theme.css' <div class="custom-control custom-switch" style = "display: inline-block; padding: 0px 10px 0px 10px;"> <input type="checkbox" class="custom-control-input" id="customSwitch1"> <label class="custom-control-label" for="customSwitch1"></label> </div>Es posible que desee revisar esta respuesta: https://stackoverflow.com/a/63087710/7216508
Entiendo que está utilizando Bootstrap y, por lo tanto, es posible que el fragmento de código a continuación no esté listo para usar simplemente copiando y pegando. Pero espero que le dé una comprensión general de cómo se podría lograr esto.
En pocas palabras, puede asignar colores de tema en variables CSS y anular sus valores según la selección del usuario. En su caso, es posible que desee fusionar los dos archivos CSS y refactorizar un poco la estructura.
document.querySelector('.switch').addEventListener('click', () => { document.body.classList.toggle('dark'); }); :root { --bg-nav: #333; --bg-body: #f0f0f0; --text-nav: #fff; --text-body: #202020; } body { margin: 0; min-height: 100vh; position: relative; display: flex; flex-direction: column; background-color: var(--bg-body); color: var(--text-body); } body.dark { --bg-nav: #112200; --bg-body: #333; --text-nav: #fff; --text-body: #fff; } main { flex: 1; padding: 15px; } header, footer { background-color: var(--bg-nav); color: var(--text-nav); padding: 10px; } <header>Header Nav</header> <main> <h1>Test Page</h1> <p>Here is a sample page</p> <button class="switch">Switch theme</button> </main> <footer>Footer Nav</footer>