Hugo中有很多theme可以選擇，但不一定你所喜歡的主題是有dark mode，此篇嘗試如何加入dark mode 在你自己的頁面中。

不需修改前端程式的方式實現

我們可以通過修改前端CSS的方式來實現dark mode 的效果，不過這篇我想要嘗試的是不用撰寫程式也能有一樣的效果。

從chrome plug-in 中找到dark mode功能，然後將其加入到我們的網頁中


html, body {
  color: #dcdcdc;
  background-color: #292929;
}

html *:not(input) {
  color: #dcdcdc !important;
}

a[ping]:link,
:link:not(cite) {
  color: #8db2e5 !important;
}

html a:visited {
  color: #d248ea !important;
}

html cite,
html cite a:link,
html cite a:visited {
  color: #92de92 !important;
}

/* inline styles */

[style*='background: #'], [style*='background:#'],
[style*='background: rgb'], [style*='background:rgb'],
[style*='background: var('], [style*='background:var('],
[style*='background-color: #'], [style*='background-color:#'],
[style*='background-color: rgb'], [style*='background-color:rgb'],
[style*='background-color: var('], [style*='background-color:var('] {
  background-color: #292929 !important;
}

Refernce: