現在這個部落格支援 Dark Mode 了！看看網站的右上角，應該會有個太陽或月亮的圖示，點擊就可以切換。我本身對前端並不熟悉，這次的 Dark Mode 全靠 Chatgpt 協助完成，前前後後也花了兩個多小時，過程中也有許多驚喜與反思，這篇文章就來記錄一下整個流程及一些心得。

 

完全不會改，直接問！

我想幫 silhouette-hugo 這個 project 加上暗色模式，請一步一步告訴我該怎麼做

　　這是我在 Chatgpt 上問的第一個問題，直接把專案名稱給丟上去，看他會不會幫我搜 XD。Chatgpt 給了幾個步驟，大致上包含：

  • 第一步：確認主題支援自訂 CSS
  • 第二步：讓這個 CSS 被引入
  • 第三步：新增切換暗色模式的按鈕

　　…以下省略，雖然有大致上的流程，但詳細要改什麼並不清楚，不符合我"全部複製貼上"的需求。於是繼續問：

請一步一步幫我改
https://github.com/mattbutton/silhouette-hugo
repo 如上，幫我找

　　沒錯！我就是這麼廢，直接把網址丟給他，讓他幫我找，收到了幾個回饋：

  • 第一步：新增自訂 CSS
    • 他回了一個簡單的 CSS 範例，我直接依照他指定的路徑，新增了一個 dark.css
  • 第二步：讓這個 CSS 被引入
    • 沒有精準告訴我要改哪裡，但大致上是給我一段 code，說要放在 <head> 的 <link rel="stylesheet"> 那段下面
    • 搜尋了一下就照貼
  • 第三步：新增切換暗色模式的按鈕
    • 這邊給了我一段 JavaScript 的 code，說要放在 你覺得可以放按鈕的位置

　　菜雞如我怎麼可能知道要放哪裡？又跟他來來回回搞了一陣子，例如有些檔案找不到，repo 如上，幫我找，沒有 footer.html 這個檔案，請幫我找出要放按鈕的檔案，等等的問題，然後他的回答大概是這樣：

檔案位置：
layouts/partials/head.html（✅ 確實存在）
...

　　聽你在放屁！ 這檔案根本不存在！到這邊我知道限制了，所以我自己大概找了個適當的位置 (就是你現在看到的右上角)，然後把他給的 code 貼上去。此時第一個可以運行的版本出現了

 

完整的 Dark Mode CSS

　　由於目前的 CSS 只有一個簡單的範例，例如按鈕、內文顏色等等的都沒有改到，繼續問 …

這是 light mode 的 css，幫我改一個 dark mode

body {
    background-color: #fafafa !important;
    padding-top: 42px;
    ...以下整包複製貼上

　　廢柴當然不自己改 code，直接整包給他叫他改。這裡傳了一個完整的 CSS 下載連結，包含了按鈕、內文、背景等顏色調整，連同 padding 等其他設定在內。但同時也有一些錯誤，普遍上是 { 配對的問題，來來回回請他修了幾次搞不定。雖然對我來說問題不大，但不太符合我的 “懶人需求”，也許現在的 Chatgpt-4o 只能這樣了。後續我自己再修了一下可以運行。

　　直到這邊其實我並不算滿意，因為我的程式碼實際上變成了兩個很相似的 CSS，分別是 dark.css 和原本的 styles.css，如果我要調 padding、margin、字型等等的話，兩邊都要改，是程式碼壞味道，於是我們開始進入下一階段的重構。

 

重構，讓 CSS 變乾淨

幫我調整程式碼，讓 light mode 跟 dark mode 都是獨立的 css，
並且只有關於顏色的設定 (也許用變數儲存?)，
然後另外一個 css 是關於字體大小等其他 css 設定

　　這裡 Chatgpt 給了我一個我很滿意的答案，大致上如下

✅ 目標結構：
/css/
  ├── base.css         ← 字體、排版、間距等共用樣式
  ├── light.css        ← light mode 的顏色變數
  ├── dark.css         ← dark mode 的顏色變數

🎨 base.css（不含任何顏色設定）：
以下程式碼省略...

　　過程中其實我有查了一些其他 repo 也是類似這樣的結構，所以這裡的方案讓我感到蠻驚豔的。後面其實還有一些錯誤，主要來自於我的 css 放在 assets 內，然後他給的路徑是放在 static 內，進而導致了一點問題，也是陸續來回了幾次，例如 為什麼我測試時沒有反應?、貼 console error 給 chatgpt、我放 assets/css 不行嗎?、一樣不行 GG、移除 localStorage 部分 等等，來回了幾次以後終於完成。

 

最後的結果與心得

　　就是你現在所看到的樣子，除了內文顏色我稍微調亮一點以外，其他我完全沒有調整，而且我也很滿意這個配色。後續有再調整一點東西，例如我把 Disqus 換成 Giscus 等等，這些大多是由 Chatgpt 提供指令我照做，至於為何我要換掉 Disqus 則是我自己下的決定，這邊就不贅述了。

　　過程中給了我蠻多驚喜，雖然仍有錯誤，但約略 8 成的工作可以完成，剩下的部分以我微薄的前端知識可以補足。

　　軟體工程師的未來會是什麼？可能就像是被機械化大量取代的農夫，對我們來說，也許架構設計、制定決策、邏輯批判思考會是未來的工作重點。我相信最終還是人類在做決策，就如同機器不會幫農夫決定該種什麼、農田該如何規劃，而這些正是未來的我們需要學習的關鍵，當然也包括如何掌握 AI 工具的使用。