 |
| thumbnail |
目標 Common
- 利用第三方library實現Dark Theme深色主題，不用另外寫深色主題的CSS
- 將使用者設定的主題儲存在其local本地端，方便使用者後續瀏覽Blogger，不用每次切換Blogger網頁還要更改一次主題設定
- 缺點是可能有部分iframe的部落格插件會無法改變CSS樣式
- FB及Blogger留言板
- Blogger訂閱/追蹤者
 |
| 沒有套用主題的插件/元件 |
本網站環境
- Google Blogger
- Botstrap：4.6.0
- jQuery：3.6.0
- Font Awesome：4.7.0
HTML
將該元件加到網頁中適當的位置，不同的位置其相對應的CSS也會不同，請自行修改CSS
<div class='ind-darkmode'>
<input class='ind-check' id='ind-darkmode' title='Mode Dark' type='checkbox' />
<label class='ind-icon' for='ind-darkmode'>
<i class="ind-openmode fa fa-moon-o" aria-hidden="true"> 深色模式</i>
<i class="ind-closemode fa fa-sun-o" aria-hidden="true"> 普通模式</i>
</label>
</div>CSS
請自行調整CSS以適配自己的網站
若網頁有RWD，還需考量不同尺寸的螢幕，其CSS的配置方式
若網頁有RWD，還需考量不同尺寸的螢幕，其CSS的配置方式
記得撰寫完成後，再壓縮一下，https://www.toptal.com/developers/cssminifier 🔗
將這段程式放在網頁的<head></head>中
/* Button Dark Mode */
.ind-darkmode i {
color: #fff;
font-size: 22px
}.ind-icon {
cursor: pointer;
display: block;
padding: 8px;
background-position: center;
transition: .5s linear
}
.ind-icon:hover i {
color: #ef476f
}
.ind-check,
.ind-darkmode .ind-check:checked~.ind-icon .ind-openmode,
.ind-darkmode .ind-icon .ind-closemode {
display: none
}
.ind-darkmode .ind-check:checked~.ind-icon .ind-closemode,
.ind-darkmode .ind-icon .ind-openmode {
display: block
}JavaScript
利用LocalStorage將使用者設定的主題儲存在其local本地端
方便使用者後續瀏覽Blogger，不用每次切換Blogger網頁還要更改一次主題設定
記得撰寫完成後，再壓縮一下，https://www.toptal.com/developers/javascript-minifier 🔗
將這段程式放在網頁的</body>前
 |
| 各種網頁暫存方式，圖片來源 🔗 |
$(document).ready(function() {
$("#ind-darkmode").on("click", function() {
"nightmode" != localStorage.toggled ?
(DarkReader.setFetchMethod(window.fetch), DarkReader.enable(), localStorage.toggled = "nightmode") :
(DarkReader.disable(), localStorage.toggled = "")
}),
"nightmode" != localStorage.toggled ?
(DarkReader.disable(), $("#ind-darkmode").prop("checked", 0)) :
(DarkReader.setFetchMethod(window.fetch), DarkReader.enable(), $("#ind-darkmode").prop("checked", 1))
})結果 Results
本站Blogger模板：Blog Platform 2.2.1 🔗
 |
| 電腦版 |
 |
| 手機版 |
目前遇到的問題 Problems
雖然網頁主控台有錯誤訊息，但目前並不影響使用者操作
TypeError: Failed to fetch
沒有留言:
張貼留言