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

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

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

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

還是讓我們進入正題吧

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

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

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

• Figma Plugin
• CSS 複寫
  • Figma Dark Theme - Microsoft Edge Addons

第一種 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 貴，是可以丟點錢進去啦，平平都是進水溝

（完）