---
image: https://hackmd.io/_uploads/BJUDGCAaK.png
---

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


昨天在推特看到有篇 [Figma 暗黑模式](https://twitter.com/joeyabanks/status/1485652780576608261) 的貼文。

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

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

## 還是讓我們進入正題吧

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

這樣一個優質設計軟體竟然沒有暗黑模式，著實令人遺憾。推特下面有推文提到 [Dark Figma](https://darkfigma.com/) 這個軟體可以把你的 Figma 暗黑化，不過需要兩歐元，又沒有開源，[_沒有開源的程式碼，我可是不用的噢_](https://www.youtube.com/watch?v=scuO8jftdqw)。

身為免費仔，趕忙在 GitHub 上搜尋 「[figma dark](https://github.com/search?q=figma+dark)」關鍵字，發現其實過去滿多前人都有實作過了，有兩種方法：

* [Figma Plugin](https://github.com/PaperTiger/figma-dark-ui/issues/21)
* [CSS 複寫](https://github.com/Mart1M/FigmaDarkUINative/blob/main/assets/css/content.css)
* [Figma Dark Theme - Microsoft Edge Addons](https://microsoftedge.microsoft.com/addons/detail/figma-dark-theme/pniljokeankpoomopaaekblacciihnpp)

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

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

## [就說，這裡沒有要教如何解包 Electron App，要講幾次](https://www.youtube.com/watch?v=3UvgV71ZnfY&feature=emb_title)

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](https://yukai.dev/blog/2016/11/12/patching-trello-desktop-electron-app)，想了想過了幾年我還是在幹同樣的事啊......

## 竟然還有另一個 figmadark.com

還要價 4 USD，看[推特評論](https://twitter.com/YarikBright/status/1419581179087527937)滿來路不明的，還好像 bug 一堆跑不起來，大家自己評估一下啊，反正這麼便宜，也沒比 NFT 貴，是可以丟點錢進去啦，~~平平都是進水溝~~

（完）