Dorew - Thích Ngao Du

»
Dùng Dark mode js
Avatar
Ging 14.09.2020 / 22:33
<style>
.dark-toggle{cursor:pointer;display:inline-block;padding-left:20px}.dark-toggle-switch{display:inline-block;background:#ccc;border-radius:16px;width:48px;height:22px;position:relative;vertical-align:middle;transition:background .25s;top:-2px}.dark-toggle-switch:before,.dark-toggle-switch:after{content:""}.dark-toggle-switch:before{display:block;background:linear-gradient(to bottom,#fff 0%,#eee 100%);border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,0.25);width:14px;height:14px;position:absolute;top:4px;left:4px;transition:left .25s}.dark-toggle:hover .dark-toggle-switch:before{background:linear-gradient(to bottom,#fff 0%,#fff 100%);box-shadow:0 0 0 1px rgba(0,0,0,0.5)}.dark-toggle-checkbox:checked + .dark-toggle-switch{background:#4c4b52}.dark-toggle-checkbox:checked + .dark-toggle-switch:before{left:30px}.dark-toggle-checkbox{position:absolute;visibility:hidden}.dark-toggle-label{margin-left:5px;position:relative}
</style>
<label class="dark-toggle">
   <input id="dark-toggle" class="dark-toggle-checkbox" type="checkbox" onclick="darkmode.toggle();">
   <div class="dark-toggle-switch"></div>
   <span class="dark-toggle-label">Dark Mode</span>
</label>
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
<script>
const darkmode=new Darkmode();if(darkmode.isActivated()){document.getElementById("dark-toggle").checked=true}else{document.getElementById("dark-toggle").checked=false};
</script>


Từ khoá: Dùng, Dark, mode, js
2018 - 2020 Dorew