របៀបដាក់ប៊ូតុង Dark Mode ដោយប្រើ LocalStorage

​​   ដូចជាបាត់មុខខ្ញុំរយៈពេលយូរដែរហើយមែនទេ? បាទ!ពិតមែន ហើយដោយសារខ្ញុំជាប់រវល់នឹង ការសិក្សា។​ ប៉ុន្តែខ្ញុំ ក៏បានឆ្លៀតមកសរសេរគន្លឹះមួយដែលស្តីអំពីរបៀបដាក់ប៊ូតុង Dark Mode និង Light Mode ដែលមានន័យថា ពេលគេចុចទៅលើប៊ូតុងនោះវានឹងផ្លាស់ប្តូរប្លក់របស់អ្នកទៅជា ងងឹតឬភ្លឺ ហើយមិនតែប៉ុណ្ណោះវានឹងធ្វើការរក្សាទុកនៅ លើ Browser របស់អ្នកទៀតផង។

១-សូមចូលទៅកាន់គណនីប្លក់របស់អ្នក
២-ចូលទៅកាន់ Theme បន្ទាប់មក Edit HTML
៣-ចម្លងកូដខាងក្រោមដាក់ពីខាងលើ </head>

<style type='text/css'>
.switchbar{position:fixed;top:200px;right:0;width:65px;height:40px;background-color:#fff;z-index:9999;box-sizing:border-box;padding:0;border:1px solid rgba(155,155,155,0.32);border-right:0}
.dark-switch{display:none}
.dark-bar{position:absolute;overflow:hidden;font-size:11px;line-height:22px;cursor:pointer;width:50px;height:20px;top:10px;right:5px;background:#cccccc;border-radius:99em;transition:all 0.4s}
.dark-bar:before{content:'OFF';position:absolute;top:0;bottom:0;right:20px;width:30px;background:#111111;color:#fff;text-align:center;border-radius:99em;transition:all 0.4s}
.dark-switch:checked+.dark-bar:before{content:'ON';background-color:#2196F3;color:#fff;text-align:center;right:0}
/* Dark Mode Settings
-------------------- */
.dark-version .your-class{}
.dark-version #your-id{}
</style>

សម្គាល់៖ ផ្លាស់ប្តូរ .your-class និង #your-id ដែលមាននៅក្នុងស្បែកប្លក់របស់អ្នក
៤-ចម្លងកូដខាងក្រោមដាក់ពីខាងលើ </body>

<div class='switchbar' title='Dark Mode'>
<input class='dark-switch' id='dark-toggle' type='checkbox'/>
<label class='dark-bar' for='dark-toggle'/>
</div>

៥-ចម្លងកូដខាងក្រោមដាក់ពីខាងលើ </body>

<script type='text/javascript'>
//<![CDATA[
$(function(){$("#dark-toggle").on("change",function(){if($(this).is(":checked")){localStorage.setItem("dark-mode","true");$("body").addClass("dark-version")}else{localStorage.setItem("dark-mode","false");$("body").removeClass("dark-version")}});var getLocalStore=localStorage.getItem("dark-mode");if(null!=getLocalStore){if("true"==getLocalStore){$("#dark-toggle").prop("checked",true);$("body").addClass("dark-version")}else{$("#dark-toggle").prop("checked",false);$("body").removeClass("dark-version")}}});
//]]>
</script>

៦-ចុចពាក្យ Save Theme។