啟用 Figma 桌面版的自訂 CSS 功能,以及暗黑模式 | Daily Oops!
Daily Oops

Daily Oops!

January 26, 2022

啟用 Figma 桌面版的自訂 CSS 功能,以及暗黑模式

昨天在推特看到有篇 Figma 暗黑模式 的貼文。

身為一個程式開發者,暗黑模式乃生存之必要。吃飯工具來說,編輯器、終端機、手機 App,都應當開啟暗黑模式,若無,則應直接移除該軟體,這是最基本的。什麼,你說移除就沒有替代品了?那就自己寫一個啊!

再廣一點來到日用品層面,舉凡桌面、電競椅、牆面、地板、寢具,通通只能選黑色,並記得配上 LED 多段變色燈作為裝飾。穿著上,黑衣、黑褲、黑外套、黑帽,加上在白天也看不清路的墨鏡,最後再用異材質加上特殊廓形做出造型感。做到如此程度,才可以自稱為一位真正的程式開發者。(REAL Programmer, aka)

還是讓我們進入正題吧

Figma 是我經常使用的向量設計工具,優點是全 web 跨平臺,更支援多人即時協作(同時看到大家的遊標搖來晃去),重點是還免費。你甚至能自己製作並發佈擴充功能,擴充功能 API 還是 React,對前端開發者相當友善。儘管我並沒有自己實作就是了…(扶額(歪頭

這樣一個優質設計軟體竟然沒有暗黑模式,著實令人遺憾。推特下面有推文提到 Dark Figma 這個軟體可以把你的 Figma 暗黑化,不過需要兩歐元,又沒有開源,沒有開源的程式碼,我可是不用的噢

身為免費仔,趕忙在 GitHub 上搜尋 「figma dark」關鍵字,發現其實過去滿多前人都有實作過了,有兩種方法:

第一種 Figma Plugin 方式已經失效,但 CSS 複寫的方式用網頁版本的 Figma 測試後,效果也不是很好,只能改操作元件,對於畫布(canvas)的背景完全沒有影響。看了看 Dark Figma 的截圖,畫布背景也被改成了暗色,完成度相當高啊。

對於免費仔來說,是可忍,孰不可忍,而且 Dark Figma 改的不是瀏覽器而是 Figma 桌面版,桌面版的 Figma 是 Electron 做的…看來有跡可循…!

就說,這裡沒有要教如何解包 Electron App,要講幾次

npm i -g asar
cd /Applications/Figma\ Beta.app/Contents/Resources/
asar e app.asar app

令人非常開心的,Figma 的並沒有對 Electron 原始碼做模糊處裡,看起來過個 babel 就直接輸出了。翻了翻原始碼就看到 CSS_INJECTION 這個關鍵字,用 VSCode Goto Definition 點了幾下來到這段程式碼附近:

const CSS_INJECTION = (() => {
if (build_1.default.channel !== 'stable' && user_settings_1.default.cssInjection) {
try {
return fs.readFileSync(user_settings_1.default.cssInjection.path, 'utf8');
}
catch (_a) { }
}
return null;
})();

看了一下用法:

if (typeof json.cssInjection === 'object' &&
typeof json.cssInjection.path === 'string' &&
typeof json.cssInjection.backgroundColor === 'string') {
settings.cssInjection = {
path: json.cssInjection.path,
backgroundColor: json.cssInjection.backgroundColor,
};
}

還有:

case 'beta':
return {
name: 'Figma Beta',
channel: 'beta',
protocol: 'figma-beta',
settingsFile: '.figma_desktop_beta_settings.json',
profileDirectory: 'DesktopBeta',
updaterBaseURL: `https://desktop.figma.com/${updaterPlatform}/beta`,
};

喵嗚~~

結論

編輯家目錄底下的 .figma_desktop_beta_settings.json 並貼上以下內容:

{
"cssInjection": {
"path": "/path/to/style.css",
"backgroundColor": "#111111"
}
}

css 就從 GitHub 上挑一個下載或自己改吧。

因為改出來的效果還是不盡理想,和當做寫完作業對答案一樣,我還是花了 2 歐買了 Figma Dark…然後發現他就是這樣做的啊,那幹嘛還包一個 Electron App 做這個寫入 JSON 的動作 (╯°Д°)╯ ┻━┻ (Any application that can be written in Electron, will eventually be written in Electron.)

沒關係啦我這篇用中文寫的,作者應該看不到的啦,沒有要斷你財路啦,哼。

最後同場加映 Trello Electron 桌面版 Patch,想了想過了幾年我還是在幹同樣的事啊…

竟然還有另一個 figmadark.com

還要價 4 USD,看推特評論滿來路不明的,還好像 bug 一堆跑不起來,大家自己評估一下啊,反正這麼便宜,也沒比 NFT 貴,是可以丟點錢進去啦,平平都是進水溝

(完)

本篇文章驕傲的使用 HackMD 發佈