របៀបដាក់ប៊ូតុង Dark Mode និង Light Mode

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

១-សូមចូលទៅកាន់គណនីប្លក់របស់អ្នក
២-ចូលទៅកាន់ Theme បន្ទាប់មក Edit HTML
៣-ចម្លងកូដខាងក្រោមដាក់ពីខាងក្រោម <head> 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"/>
៤-ចម្លងកូដខាងក្រោមដាក់ពីខាងក្រោម <body> 
<span id='dark-button'></span>
៥-ចម្លងកូដខាងក្រោមដាក់ពីខាងលើ </body> 
<script type='text/javascript'>
//<![CDATA[
// Local Storage Dark Mode
var _0x2f0e=["innerHTML","addEventListener","click","preventDefault","classList","toggle","dark-version","setItem","removeItem","localStorage","getItem","myDarkMode","documentElement"," dark-version","querySelector","#dark-button"];(function(a,b){(function(b){for(;--b;)a.push(a.shift())})(++b)})(_0x2f0e,169);var _0x2b5b=function(a){a-=0;var b=_0x2f0e[a];return b};(function(a,b){if(_0x2b5b("0x0")in a){var c=localStorage[_0x2b5b("0x1")](_0x2b5b("0x2"));c&&(b[_0x2b5b("0x3")].className+=_0x2b5b("0x4"))}})(window,document);(function(a,b){if("localStorage"in a){var c=b[_0x2b5b("0x5")](_0x2b5b("0x6"));if(c){c[_0x2b5b("0x7")]+="<li id=\"dark-mode\"><a class=\"mydark\" href=\"javascript:;\"><i class="far fa-moon"></i></a></li>";var d=b[_0x2b5b("0x5")]("#dark-mode");d&&d[_0x2b5b("0x8")](_0x2b5b("0x9"),function(a){return a[_0x2b5b("0xa")](),b[_0x2b5b("0x3")][_0x2b5b("0xb")][_0x2b5b("0xc")](_0x2b5b("0xd")),b.documentElement[_0x2b5b("0xb")].contains(_0x2b5b("0xd"))?void localStorage[_0x2b5b("0xe")](_0x2b5b("0x2"),!0):void localStorage[_0x2b5b("0xf")](_0x2b5b("0x2"))},!1)}}})(window,document);
//]]>
</script>
៦-ចម្លងកូដខាងក្រោមដាក់ពីខាងលើ </head> 
<style type='text/css'>
.mydark{background:#2196F3;font-size:13px;font-weight:700;color:#fff;display:inline-block;height:30px;line-height:30px;padding:0 8px;box-sizing:border-box;border-radius:99em 0 0 99em;transition:all 0.5s}
.mydark:hover{background:#111;color:#fff}
#dark-button{position:fixed;top:200px;right:0;background-color:#fff;z-index:9999;list-style:none;box-sizing:border-box;padding:5px;border:1px solid rgba(155,155,155,0.32);border-radius:99em 0 0 99em}
@media screen and (max-width: 980px) {#dark-button{display:none}}
/* Dark Mode Settings
-------------------- */
.dark-version #dark-button{background-color:#000000}
.dark-version .mydark{background:#59cb38 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzIcQvqZBqroZeiMpyaaxykmTOPt3RnsFpQSchlIYX8r7ohb84IJ5bvVjAHdeAU2HqLhGJwY2v51VwKNzETkCAHsMUSBEkA5_TmVBlSFOtF3pdKKjAglWveM0vPdk0oaCKTGxzOJKUlqSe/s1600/blink.jpg) repeat scroll 0;}
.dark-version body{background:#121212;color:#fff}
.dark-version .class{}
.dark-version #id{}
</style>
សម្គាល់៖ ផ្លាស់ប្តូរ .class និង #id ដែលមាននៅក្នុងស្បែកប្លក់របស់អ្នក
៧-ចុចពាក្យ Save Theme។

Comments

Post a Comment