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

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

១-សូម​ចូល​ទៅ​កាន់​គណនី​ប្លុក​របស់​អ្នក​
២-ចូល​ទៅ​កាន់ 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 ជា​ភាសា​កូដ CSS ដើម្បី​ធ្វើ​ឲ្យ​ធាតុ​ណា​មួយ​ទៅ​ជា​ពណ៌​ងងឹត​ហើយ​ .your-class ឬ #your-id វា​មាន​ភាព​ខុស​គ្នា​ទៅ​តាម​ស្បែក​ប្លុក​នីមួយៗ​
ឧទាហរណ៍​៖
- body{background-color:#212121}
- .post-title{color:black}
- #main-content{background-color:#333333}
៤-ចម្លង​កូដ​ខាង​ក្រោម​ដាក់​ពី​ខាង​លើ </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​៕