雖然搭建博客的小文根本沒寫完，但我還是決定先水一篇主題粉刷記錄：
blowfish主題的配色方案自定義。
· 本人代碼基礎約等於零，全靠ChatGPT和直覺。
· 文中附送兩種配色方案。
· 再附送twikoo評論區顏色修改方式———
必要的一種折騰？ #
應該會有博客同樣使用blowfish主題的朋友和我有類似的想法。
blowfish主題本身是個功能豐富也支持大量自定義的 hugo 主題，但 官方提供的快速上手配色方案 實在是不太好看，儘管默認配色也算簡潔清爽，但離我喜歡的綠色&紫色調還是差太遠。
還是自己動手吧。
弄不懂也沒關係 #
官網的說明其實寫明，將博客文件夾中config/_default/params.toml的colorScheme指定為對應的css文件名稱即可。如果主題是MyScheme.css，那麼這裡就應該寫colorScheme = "MyScheme"。
那麼我們來看看默認的 blowfish 主題配色方案文件打開是個什麼樣子呢：
/* Blowfish scheme */
:root {
--color-neutral: 255, 255, 255;
/* Gray */
--color-neutral-50: 248, 250, 252;
--color-neutral-100: 241, 245, 249;
--color-neutral-200: 226, 232, 240;
--color-neutral-300: 203, 213, 225;
--color-neutral-400: 148, 163, 184;
--color-neutral-500: 100, 116, 139;
--color-neutral-600: 71, 85, 105;
--color-neutral-700: 51, 65, 85;
--color-neutral-800: 30, 41, 59;
--color-neutral-900: 15, 23, 42;
/* Blue */
--color-primary-50: 239, 246, 255;
--color-primary-100: 219, 234, 254;
--color-primary-200: 191, 219, 254;
--color-primary-300: 147, 197, 253;
--color-primary-400: 96, 165, 250;
--color-primary-500: 59, 130, 246;
--color-primary-600: 37, 99, 235;
--color-primary-700: 29, 78, 216;
--color-primary-800: 30, 64, 175;
--color-primary-900: 30, 58, 138;
/* Cyan */
--color-secondary-50: 236, 254, 255;
--color-secondary-100: 207, 250, 254;
--color-secondary-200: 165, 243, 252;
--color-secondary-300: 103, 232, 249;
--color-secondary-400: 34, 211, 238;
--color-secondary-500: 6, 182, 212;
--color-secondary-600: 8, 145, 178;
--color-secondary-700: 14, 116, 144;
--color-secondary-800: 21, 94, 117;
--color-secondary-900: 22, 78, 99;
}
…我不知道第一次看到這個文件的朋友是什麼感覺，反正我挺暈乎的。
主題作者在配色方案一節進行了說明：blowfish是基於3個基準色進行配色，也就是上方的--color-neutral-500、--color-primary-500、--color-secondary-500。
後接 50/100/200/300… 這些不同數字則是代表了3個基準色的不同色調偏移，對應的值則是 rgb 值。
在實際操作過程中我個人感覺 tailwind CSS 的代碼是通過預先分類、預定義的反覆使用來構建樣式的，一不小心就很容易弄混。但一旦設定完成，這些預先設定好的顏色就可以運用於整個頁面的各個角落。
比如下圖，就可以看到：
使用fugu來生成配色方案 #
大概了解了上面這些代碼的作用之後，就可以打開作者為該主題顏色配置所寫的工具fugu了：
TBD
（可以的話我是真的不想再用他了，好累）
按照頁面說明git clone到本地，在終端機中進入 fugu 目錄，安裝依賴（npm install）。文件夾中可以看到有個文件叫 index.js，這就是稍後要執行的內容。
暫停插入注意事項 #
如果讀者朋友也像我一樣將博客部署在 github pages 上，那麼在 clone fugu 的時候最好不要將它放到博客文件夾，否則在 git push 的時候會報錯。fugu 是一個獨立的 Git 倉庫（它自帶 .git 文件夾），博客本身也是一個 Git 倉庫，這樣就會出現兩個結果：
· 博客倉庫內包含了另一個 Git 倉庫（fugu）
· Git 被視為子模塊（submodule），影響 git push
我當時報錯真的很崩潰，總之盡量不要放博客文件夾，另外放其他地方就好，反正我們只需要他生成的那個 css 文件…
繼續操作 #
接著輸入node index.js generate 你喜歡的三個hex值執行fugu就好了。
貼一個轉換網站：十六進制轉RGB 可以在這個網頁上輸入自己想要的顏色並進行轉換。
比如按照作者的示例輸入 index.js generate 161032 FAFF81 FFC53A之後，下面嘩嘩嘩嘩就會跑一串剛才那樣的代碼出來，同時在 fugu 的文件夾下面也會生成一個 output.css 如下：
:root { --color-neutral: 255, 255, 255;
--color-neutral-50: 214,208,240;
--color-neutral-100: 163,150,222;
--color-neutral-200: 112,93,203;
--color-neutral-300: 73,53,166;
--color-neutral-400: 47,35,108;
--color-neutral-500: 22,16,50;
--color-neutral-600: 8,6,19;
--color-neutral-700: 0,0,0;
--color-neutral-800: 0,0,0;
--color-neutral-900: 0,0,0;
--color-primary-50: 255,255,255;
--color-primary-100: 255,255,255;
--color-primary-200: 255,255,255;
--color-primary-300: 255,255,255;
--color-primary-400: 253,255,206;
--color-primary-500: 250,255,129;
--color-primary-600: 248,255,88;
--color-primary-700: 247,255,47;
--color-primary-800: 245,255,7;
--color-primary-900: 212,221,0;
--color-secondary-50: 255,255,255;
--color-secondary-100: 255,255,255;
--color-secondary-200: 255,255,255;
--color-secondary-300: 255,242,211;
--color-secondary-400: 255,220,135;
--color-secondary-500: 255,197,58;
--color-secondary-600: 255,185,17;
--color-secondary-700: 231,163,0;
--color-secondary-800: 191,134,0;
--color-secondary-900: 150,106,0;
}
沒錯，這就是可以拿來用的配色方案了！
給他取個名字叫theme，把這個複製到你博客文件夾下的assets/css/schemes文件夾中，接著在你的config/_default/params.toml中改成colorScheme = "theme"你的主題就用上這個配色了。
配色靈感哪裡找 #
如果要一個個配色來選實在是太痛苦了，這時候就需要運用一些在線配色找點靈感。這裡貼一下我個人比較喜歡的幾個配色工具網站：
Color Hunt
Adobe Color
Coolors
可以按照自己的喜好自由配色，設計自己的方案。當然，fugu跑出來的顏色方案總會有一些不盡如人意的地方（比如顏色對比太過強烈，深色背景時看不清代碼塊背景色等，這時候就需要打開F12看看對應的區域顏色代碼是什麼，再單獨進行顏色調整。調整好之後放進配色方案 css 文件中即可。
附送兩個配色方案！ #
因為本人很喜歡綠色&紫色，所以調整出來深綠和紫色配色方案（紫色也是我目前在用的配色方案）各一個，有喜歡的朋友可以自取 :D
鼠標移動到色塊上會顯示色號喔，請自行複製^^（感謝 ChatGPT 老師誨人不倦…）
我的配色方案已調整過了，和 fugu 跑出來的版本還是有一些不同
如果想即刻使用，複製下方的代碼並存儲為喜歡的名字放在css文件夾就好）
Darkgreen #
代碼見下：
:root { --color-neutral: 255, 255, 255;
--color-neutral-50: 245,245,245;
--color-neutral-100: 255,255,255;
--color-neutral-200: 237,241,234;
--color-neutral-300: 198,211,187;
--color-neutral-400: 159,180,141;
--color-neutral-500: 120,148,97;
--color-neutral-600: 100,123,81;
--color-neutral-700: 80,99,65;
--color-neutral-800: 60,74,49;
--color-neutral-900: 40,49,32;
--color-primary-50: 255,255,255;
--color-primary-100: 232,237,225;
--color-primary-200: 194,209,177;
--color-primary-300: 157,180,129;
--color-primary-400: 119,146,86;
--color-primary-500: 80,98,58;
--color-primary-600: 141,156,123;
--color-primary-700: 38,47,28;
--color-primary-800: 17,21,12;
--color-primary-900: 0,0,0;
--color-secondary-50: 248,251,248;
--color-secondary-100: 198,224,198;
--color-secondary-200: 149,197,149;
--color-secondary-300: 99,170,99;
--color-secondary-400: 68,124,68;
--color-secondary-500: 41,75,41;
--color-secondary-600: 27,49,27;
--color-secondary-700: 12,22,12;
--color-secondary-800: 0,0,0;
--color-secondary-900: 0,0,0;
}
Purple #
代碼見下：
:root { --color-neutral: 255, 255, 255;
--color-neutral-50: 241, 242, 252;
--color-neutral-100: 230, 230, 249;
--color-neutral-200: 211, 210, 243;
--color-neutral-300: 185, 182, 235;
--color-neutral-400: 161, 152, 225;
--color-neutral-500: 144, 126, 214;
--color-neutral-600: 128, 100, 199;
--color-neutral-700: 85, 66, 133;
--color-neutral-800: 75, 62, 113;
--color-neutral-900: 45, 36, 66;
--color-primary-50: 254, 245, 254;
--color-primary-100: 253, 234, 253;
--color-primary-200: 249, 213, 249;
--color-primary-300: 241, 162, 237;
--color-primary-400: 236, 134, 230;
--color-primary-500: 222, 87, 213;
--color-primary-600: 193, 56, 181;
--color-primary-700: 160, 43, 148;
--color-primary-800: 131, 37, 119;
--color-primary-900: 108, 35, 97;
--color-secondary-50: 239, 248, 255;
--color-secondary-100: 220, 238, 253;
--color-secondary-200: 192, 226, 253;
--color-secondary-300: 149, 209, 251;
--color-secondary-400: 98, 183, 248;
--color-secondary-500: 78, 161, 244;
--color-secondary-600: 40, 123, 232;
--color-secondary-700: 32, 101, 213;
--color-secondary-800: 32, 82, 173;
--color-secondary-900: 32, 72, 136;
}
統一Twikoo評論區配色 #
既然改了主題配色，Twikoo評論區不改一下怎麼能行！
於是根據我的個人經驗和ChatGPT老師的幫助，把Twikoo評論區的字符和icon顏色都修改了（但沒有改評論按鈕，因為不一定每個人都喜歡改按鈕顏色）
如需使用，把這部分添加到custom.css後方即可～示例效果見下方我的評論區。
啊，寫得好亂啊，我不管了！
/* 修改 Twikoo 相关颜色 */
/* 浅色模式 */
html:not(.dark) {
--icon-color: rgb(var(--color-neutral-500));
--comment-text-color: rgb(var(--color-neutral-800)); /* 用户名、时间 */
--comment-content-color: rgb(var(--color-neutral-700)); /* 评论正文 */
--reply-text-color: rgb(var(--color-neutral-500)); /* 回复的评论内容 */
--input-bg-color: rgb(var(--color-neutral-50)); /* 输入框背景色 */
--input-border-color: rgb(var(--color-neutral-300)); /* 输入框边框 */
--input-text-color: rgb(var(--color-neutral-700)); /* 输入框文字 */
--input-placeholder-color: rgb(var(--color-neutral-400)); /* 输入框占位符 */
}
/* 深色模式 */
html.dark {
--icon-color: rgb(var(--color-neutral-200));
--comment-text-color: rgb(var(--color-neutral-200)); /* 用户名、时间 */
--comment-content-color: rgb(var(--color-neutral-500)); /* 评论正文 */
--reply-text-color: rgb(var(--color-neutral-500)); /* 回复的评论内容 */
--input-bg-color: rgb(var(--color-neutral-800)); /* 输入框背景色 */
--input-border-color: rgb(var(--color-neutral-600)); /* 输入框边框 */
--input-text-color: rgb(var(--color-neutral-50)); /* 输入框文字 */
--input-placeholder-color: rgb(var(--color-neutral-400)); /* 输入框占位符 */
}
/* 让 Twikoo 的图标及footer颜色随主题变换 */
.tk-icon.__comments,
.tk-action-icon,
.tk-action-link,
.twikoo .tk-footer,
.twikoo .tk-footer a,
.twikoo .tk-footer svg {
color: var(--icon-color)!important;
fill: var(--icon-color);
}
/* 让 Twikoo 的 SVG 继承颜色 */
.twikoo svg {
fill: currentColor !important;
}
/* 设置评论区的文字颜色（用户名、时间） */
.twikoo .tk-meta {
color: var(--comment-text-color);
}
/* 设置评论正文的颜色 */
.twikoo .tk-content,
.twikoo .tk-content-expand span,
.twikoo .tk-content-expand p {
color: var(--comment-content-color);
}
/* 让输入框颜色随主题变化 */
.twikoo .el-input__inner,
.twikoo .el-textarea__inner {
background-color: var(--input-bg-color) !important;
border: 1px solid var(--input-border-color) !important;
color: var(--input-text-color) !important;
}
/* 修改输入框的占位符颜色 */
.twikoo .el-input__inner::placeholder,
.twikoo .el-textarea__inner::placeholder {
color: var(--input-placeholder-color) !important;
opacity: 0.6;
}
差不多就是這樣，如果有大佬發現代碼有錯或者可以優化請不吝指教><