改造成果：
以下改造過程依賴於 Chrome 擴充元件 Stylus
用 Habitica 一個多月了，它幫我建立了不少好習慣，最有感的莫過於多喝水 xdd
但我對它的 web 界面一直有點「可以更好的感覺」，主要是這三點：
- 本身沒有深色模式，開 Dark Reader 又覺得太黑
- 上方有很大區塊是遊戲性的圖像，在公司使用每次進到網頁都要往下滾
- 我還有拿它來存放一些 MEMO，但 MEMO 一長有時候要去按習慣就要滾滾輪幾圈
針對以上三個問題，我在 UserStyles.org Archive 找了三個主題套用並做了些修改已達到期望的改造
# 摺疊細項：Shrink Your Habitica Tasks - font and buttons edt
最先安裝的是摺疊卡片細節的樣式，但經過 Habitica 幾次更新，裝好會發現它的加減號跟底下圓圈跑掉蠻多的，我是改了這個規則讓它看起來稍微沒那麼嚴重
.task-control { | |
width: 25px !important; | |
height: 25px !important; | |
} |
這類型的主題蠻多的，但我覺得這個字體不會太小，就選擇它了
# 深色模式基底：Helix's Habitica Dark V2
其實我一開始打算直接用的，但我發現經過 Habitica 幾次更新，css 一些規則後方的號碼也跑掉失效了，所以找出來維修了一下，後來來了興致，順便改成自己喜歡的配色
/* 版號修正 + 這邊我有改顏色 */ | |
.task-content[data-v-2058e83e] { | |
/* Background of Individual Tasks */ | |
background-color: #2e2e57; | |
box-shadow: 0px 0px 5px #00002A; | |
} | |
.tasks-list[data-v-361a67a2] { | |
/* Background of Tasks */ | |
background-color: #1f2141; | |
border: 1px solid #000; | |
box-shadow: 0px 0px 5px #00002A; | |
} | |
.filter.active[data-v-361a67a2] { | |
/* Tab Links on Tasks */ | |
color: #c0b0dc !important; | |
border-bottom: 2px solid #fff; | |
} | |
.filter[data-v-361a67a2]:hover { | |
/* Task Filters Text */ | |
color: #c0b0dc !important; | |
} | |
/* 個人偏好額外加或改的 */ | |
* { | |
color: #d7d1ff; | |
} | |
body { | |
background-color: #1f203c; | |
} | |
a,a:hover, a:not([href]):not([tabindex]) { | |
cursor: pointer; | |
color: #998ee3; | |
} | |
pre code { | |
font-size: inherit; | |
color: #84acff; | |
word-break: normal; | |
} | |
.markdown h4 { | |
font-family: Roboto Condensed,sans-serif; | |
font-size: 14px; | |
line-height: 1.43; | |
color: #d7d1ff; | |
} | |
.right-control[data-v-2058e83e]{ | |
background-color: #1b1f4a; | |
border: 1px solid #1b1f4a; | |
} | |
.left-control[data-v-2058e83e]{ | |
background-color: #1b1f4a; | |
border: 1px solid #1b1f4a; | |
} | |
.svg-icon svg, .svg-icon svg path { | |
-webkit-transition: none; | |
transition: none; | |
color: #2e2e45; | |
} | |
.task-disabled-habit-control-inner:not(:focus) { | |
border: 1px solid #2e2e45!important; | |
} |
而且我個人覺得它原本的色調跟我想改的配色明度沒有差太多，所以文字等內容不用做過多調整就能正常顯示（所以後來沒有再考慮裝其它黑灰底的深色主題來修改）
# 隱藏過多遊戲性圖像：Habitica Streamlined Header
一開始我想說要用那種完全隱藏的，但我意識到這樣可能看不到血量容易死掉，所以找到這個（加上很多經過更新後都故障了，前面已經改了兩套 CSS，有點倦了）
它可以保有血條／經驗值／魔力值資訊，但又不會看起來太像遊戲 'w'
以上就是今天的樣式改造過程啦，不過改完以後商店或組隊之類的地方配色變得很奇怪 XDD，就看個人斟酌啦，我是比較在意工作版那邊的樣式（毆）
既然介面變得更喜歡了，今後也要努力養成好習慣 'w'/
