Code chuyển đổi màu sáng/tối cho blogger

Chào các bạn, hôm nay mình sẽ hướng dẫn các bạn cách tạo nút chuyển đổi giao diện chế độ sáng / tối cho blogspot

HƯỚNG DẪN CÁCH LÀM:

Bước 1: Thêm đoạn code này vào menu của blog bạn

<!-- Dark -->
<div class='settings'>
<ul>
<li class='settings-sub-parent' tab-index='0'>
<div class='settings-menu'>
<a class='dark-mode-btn'href='#dark-mode'>
<i class='fa fa-cog'/>
</a></div><ulclass='settings-sub-menu'>
<div class='setting-arrow'>
</div>
<li>
<span class='setting-label'>Giao diện tối</span>
<div id='change-theme-btn'>
<input id='change-theme-btn' name=''type='checkbox'value=''/>
<div class='toggle'>
<label for='toggle-change-theme'><i/>
</label>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
<!-- End Dark -->

Bước 2: Tìm thẻ </body> và thêm đoạn js này lên trên nó

<scripttype='text/javascript'>
//<![CDATA[
// Dark mode
document.getElementById('change-theme-btn').addEventListener('click', function () {
var darkThemeEnabled = document.body.classList.toggle('mode-dark');
localStorage.setItem('dark-theme-enabled', darkThemeEnabled);
});
jQuery(document).ready(function ($) {
$(function () {
$("a.dark-mode-btn").click(function (e) {
e.preventDefault();
});
});
});
//]]>
</script>

Bước 3: Thêm đoạn css này lên thẻ ]]></b:skin>

/* Setting */
.settings{display:inline-block;position:relative}
.settings .settings-menu{display:block;cursor:pointer}
.settings-sub-menu{background:#fff;padding:10px;border:1px solid #e3e3e3;-webkit-box-shadow:0 13px 40pxrgba(0,0,0,.15);box-shadow:0 13px 40pxrgba(0,0,0,.15);border-radius:6px}
#icon-settings{height:14px!important;width:14px!important;fill:#690;transform:translate(0,10%)}
.setting-label{font-size:16px;color:#2a2a2a;margin-right:50px;font-weight:600}
.settings{float:right;z-index:2}
.settings-sub-parent.settings-sub-menu{width:200px!important;right:2px!important}
ul.settings-sub-menu{padding:15px!important}
div#change-theme-btn{display:inline-block}
input[type=checkbox]{display:none}
.toggle{position:absolute;margin:auto;width:41px;height:25px;top:18px;right:10px}
.toggle label,.toggle i{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;background:#fff}
.togglelabel{width:42px;height:24px;border-radius:35px;border:2pxsolid #e5e5e5;-webkit-transition:all .3s ease;-o-transition:all .3sease;transition:all .3sease;cursor:pointer}
.togglei{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:40px;-webkit-box-shadow:0 2px 5pxrgba(0,0,0,.4);box-shadow:0 2px 5pxrgba(0,0,0,.4);background:#fff;-webkit-transition:all .3s cubic-bezier(.275,-.45,.725,1.45);-o-transition:all .3scubic-bezier(.275,-.45,.725,1.45);transition:all .3scubic-bezier(.275,-.45,.725,1.45)}
input[type=checkbox]:active+.toggle i{width:35px}
.mode-darkinput[type=checkbox]:active+.toggle label,.mode-darkinput[type=checkbox]+.toggle label{border:12pxsolid #4cd964}
.mode-darkinput[type=checkbox]+.toggle i{left:21px}
.mode-darkinput[type=checkbox]:active+.togglelabel{border:16px solid #e5e5e5}
.mode-darkinput[type=checkbox]:active+.toggle i{left:14px}
.mode-dark .setting-label{color:#e2e2e2}
.mode-dark .setting-arrow:after{background:#2e2d2d}
.mode-dark .settings-sub-menu{background:#2b2b2b;border:1px solid #2b2b2b}
.mode-dark #wpcomm .wc-comment-datea{color:#999}
@media only screen and (max-width:767px) {
.mode-dark .standard-post-special_wrapper{background:#1c1c1c}
}
.settings-sub-menu{visibility:hidden;opacity:0;position:absolute;top:100%;width:100%;z-index:-1;-webkit-transition:all 0.3s ease-in-out 0s,visibility 0slinear 0.3s,z-index 0slinear 0.01s;-o-transition:all 0.3s ease-in-out 0s,visibility 0slinear 0.3s,z-index 0slinear 0.01s;transition:all 0.3sease-in-out 0s,visibility 0s linear 0.3s,z-index 0slinear 0.01s}.settings-sub-parent:focus.settings-sub-menu,.settings-sub-parent:hover .settings-sub-menu{visibility:visible;opacity:1;z-index:1;-webkit-transform:translateY(10%);-ms-transform:translateY(10%);transform:translateY(10%);-webkit-transition-delay:0s,0s,0.3s;-o-transition-delay:0s,0s,0.3s;transition-delay:0s,0s,0.3s}.setting-arrow{top:-13px;-webkit-box-shadow:-1px -1px 1px-1px rgba(0,0,0,0.6);box-shadow:-1px -1px 1px -1pxrgba(0,0,0,0.6);-webkit-transform:rotate(45deg) translate(6px,6px);-ms-transform:rotate(45deg) translate(6px,6px);transform:rotate(45deg) translate(6px,6px);right:9px;position:absolute;-webkit-transition:all 0.3s ease-in-out 0s;-o-transition:all 0.3s ease-in-out 0s;transition:all 0.3s ease-in-out 0s}.setting-arrow::after{content:'';display:block;width:11px;height:11px;background:#fff;-webkit-transition:all 0.3s ease-in-out 0s;-o-transition:all 0.3s ease-in-out 0s;transition:all 0.3s ease-in-out 0s}
ul.settings-sub-menuli{float:inherit!important;position:initial!important}
/* Dark */
body.mode-dark{background-color:#1c1c1c!important;color:#888!important}
.mode-dark .code-muon-chuyen-mau a,.mode-dark#code-muon-chuyen-maua{color:#fff!important}
.mode-dark .code-muon-chuyen-nen,.mode-dark#code-muon-chuyen-nen{background:#333!important}
/* End Dark */

Lưu ý:
.mode-dark .code-muon-chuyen-mau a hay .mode-dark #code-muon-chuyen-mau abạn thay thành code muốn chuyển màu
VD: .mode-dark a
Tương tự, .mode-dark .code-muon-chuyen-nen hay .mode-dark #code-muon-chuyen-nenbạn thay thành code muốn chuyển màu nền
VD: .mode-dark .header-middle
Bước 4: Thêm đoạn js này lên <body> để nó lưu lại cookie

<script type="text/javascript">
//<![CDATA[
JSON.parse(localStorage.getItem("dark-theme-enabled"))&&document.body.classList.add("mode-dark");
//]]>
</script>

Chúc bạn thành công!!!