<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script> (function() { if (!('localStorage' in window)) return; var nightMode = localStorage.getItem('sskNightMode'); if (nightMode) { document.documentElement.classList.add('night-mode'); document.documentElement.style.colorScheme = 'dark'; } else { document.documentElement.classList.add('light-mode'); document.documentElement.style.colorScheme = 'light'; } })(); </script> <div> <input type="checkbox" class="mode-checkbox" id="mode-checkbox" aria-label="Đổi chế độ sáng tối"> <label for="mode-checkbox" class="mode-checkbox-label curr-light" id="mode-toggle"> <svg xmlns="http://www.w3.org/2000/svg" fill="#f1c40f" viewBox="0 0 29 29" width="18" height="18" class="dark-mode-icon uk-svg"> <defs> <radialGradient id="a" cx=".5" cy=".5" r=".5" gradientUnits="objectBoundingBox"> <stop offset="0" stop-color="#f1c40f"></stop> <stop offset="1" stop-color="#f1c40f"></stop> </radialGradient> </defs> <path d="M14 2C9 2 3 7 3 15a13.7 13.7 0 0 0 14 14c8 0 13-6 13-11-11 7-23-5-16-16" transform="translate(-2 -1)" stroke="#f1c40f" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="url(#a)"></path> </svg> <svg fill="#f3c612" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" width="18" height="18" class="light-mode-icon uk-svg"> <path d="M23.4 14.1c2.95-1.38 2.82-6.06 5.75-5.88-4.12-2.74-4.02 3.1-9.09 1.24 1.11-3.07-2.29-6.29-.09-8.23-4.85.98-.64 5.04-5.55 7.3-1.39-2.96-6.07-2.83-5.89-5.76 -2.74 4.13 3.11 4.02 1.24 9.1-3.07-1.12-6.29 2.28-8.23.08.98 4.86 5.04.65 7.3 5.56 -2.96 1.38-2.83 6.07-5.76 5.88 4.13 2.74 4.02-3.1 9.1-1.23 -1.11 3.06 2.29 6.28.08 8.22 4.86-.98.65-5.04 5.56-7.3 1.38 2.96 6.07 2.83 5.88 5.76 2.74-4.12-3.1-4.02-1.23-9.09 3.07 1.1 6.29-2.29 8.23-.09-.98-4.85-5.04-.64-7.3-5.55z"></path> </svg> <span class="ball"></span> </label> </div>

.mode-checkbox { opacity: 0; position: absolute; z-index: 999; cursor: pointer; } .mode-checkbox-label { width: 60px; height: 30px; border-radius: 50px; position: relative; padding: 0 5px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; overflow: hidden; } .curr-dark { background: linear-gradient(to right, #2c3e50, #2980b9); } .curr-dark:before { content: ''; position: absolute; width: 10px; height: 10px; top: 2px; left: 15px; background: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="%23fff" xmlns="http://www.w3.org/2000/svg"><path d="M7.45 2.71a1.13 1.13 0 0 1 2.1 0l1.16 2.95q.18.45.63.63l2.95 1.16c.95.38.95 1.72 0 2.1l-2.95 1.16q-.45.18-.63.63L9.55 14.3c-.38.95-1.72.95-2.1 0L6.3 11.34a1.1 1.1 0 0 0-.63-.63L2.7 9.55a1.13 1.13 0 0 1 0-2.1L5.66 6.3q.45-.18.63-.63zm9.47 10.69a.62.62 0 0 1 1.16 0l.9 2.28q.1.24.34.34l2.29.9c.52.21.52.95 0 1.16l-2.29.9a.6.6 0 0 0-.34.34l-.9 2.29a.62.62 0 0 1-1.16 0l-.9-2.29a.6.6 0 0 0-.34-.34l-2.29-.9a.62.62 0 0 1 0-1.16l2.29-.9a.6.6 0 0 0 .34-.34z" /></svg>'); animation: fade-stars 3s ease infinite; pointer-events: none; z-index: 0; } @keyframes fade-stars { 0% { opacity: 1;} 50% { opacity: 0.3; } 100% { opacity: 1; } } .curr-light { background: linear-gradient(to left, #0052d4, #65c7f7, #9cecfb); } .curr-light:after { content: ''; position: absolute; width: 32px; height: 32px; top: 8px; left: -32px; background: url('data:image/svg+xml,<svg viewBox="0 -4 32 32" fill="%23fff" xmlns="http://www.w3.org/2000/svg"><path d="M23.07 5.03A9 9 0 0 0 6.03 8.35 8.1 8.1 0 0 0 0 16c0 4.26 3.54 7.75 8 8h15c4.97 0 9-4.25 9-9.5a9.5 9.5 0 0 0-8.93-9.47" fill-rule="evenodd"/></svg>'); animation: chillin-cloud 10s ease-in infinite; pointer-events: none; z-index: 0; } @keyframes chillin-cloud { 0% { left: -32px; } 100% { left: 54px; } } .light-mode-icon { color: #f3c612; } .dark-mode-icon { color: #f1c40f; } .mode-checkbox-label .ball { background-color: #fff; width: 25px; height: 25px; position: absolute; left: 2px; top: 3px; border-radius: 50%; transition: transform 0.2s linear; z-index: 0; } .mode-checkbox:checked + .mode-checkbox-label .ball { transform: translateX(28px); } #night-mode { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: inherit; } .night-mode { background-color: #121212; color: #f0f0f0; } .night-mode a { color: #9cff00; }

document.addEventListener('DOMContentLoaded', function () { const checkbox = document.getElementById('mode-checkbox'); const label = document.getElementById('mode-toggle'); const html = document.documentElement; // Gán class dựa trên localStorage hoặc prefers-color-scheme const storedTheme = localStorage.getItem('sskNightMode'); const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; if (storedTheme || (!storedTheme && systemPrefersDark)) { checkbox.checked = true; html.classList.add('night-mode'); // html.classList.remove('light-mode'); label.classList.remove('curr-light'); label.classList.add('curr-dark'); } else { checkbox.checked = false; // html.classList.add('light-mode'); html.classList.remove('night-mode'); label.classList.remove('curr-dark'); label.classList.add('curr-light'); } checkbox.addEventListener('change', function () { const isDark = this.checked; if (isDark) { html.classList.add('night-mode'); // html.classList.remove('light-mode'); label.classList.remove('curr-light'); label.classList.add('curr-dark'); localStorage.setItem('sskNightMode', true); } else { html.classList.remove('night-mode'); // html.classList.add('light-mode'); label.classList.remove('curr-dark'); label.classList.add('curr-light'); localStorage.setItem('sskNightMode', false); } }); });