讓 LaunchBar 在深色模式下看起來更原生的技巧
macOS Mojave 釋出以來,深色模式(Dark Mode)便成了天下大勢。一眾軟體,無論知名與否,紛紛新增了深色模式的主題介面以與之相適配。一時間是否支援深色模式成為了評價一個 macOS 軟體合格與否的一把重要標尺。LaunchBar 自然不能逆流而行,在當前版本 6.10 也新增了一個深色主題。

但對於某些強迫症病友來講,卻可能會受到以下兩個問題的困擾:
- 深色主題無法隨系統設定自動切換;
- 某些深色動作圖示在深色主題下既不美觀,也不易識別。
本文介紹了隨系統主題自動切換 LaunchBar 主題、以及優化深色主題下的 LaunchBar 動作圖示顯示效果的技巧,詣在使 LaunchBar 在深色模式下達到更好的外觀效果。
自動切換 LaunchBar 主題
在少數派文章《 4 種方法,一鍵開啟 macOS Mojave 的黑暗模式 》中,@涔C 介紹了一種用 AppleScript 切換 macOS 顯示主題的方法:
tell application "System Events" tell appearance preferences set dark mode to not dark mode end tell end tell
這段程式碼的含義在他的這篇文章中亦作了詳細的解釋,它可以應用在 Automator、Alfred、Keyboard Maestro 中。當然也可以應用於 LaunchBar 中。相信不少 LaunchBar 使用者已經制作或下載了一個類似這樣的動作。

但切換系統主題時,LaunchBar 本身並不能自動隨之切換成深色/淺色主題,相反,需要手動設定,不能跟隨系統主題自動切換。這是因為,當前 LaunchBar 的淺色和深色主題是兩個獨立的主題。在 LaunchBar 的更新日誌中,開發商許諾會在後續的升級中提供 一個 在兩種系統主題下具有不同顯示效果的主題,以實現其隨系統主題切換的自動切換。

目前,我們可以通過另一種方法來完成這個功能。
:arrow_double_down: 點此下載切換 macOS 主題的動作
只需要把上面提到的程式碼稍作擴充套件:
tell application "System Events" tell appearance preferences set dark mode to not dark mode set it_is_dark to dark mode end tell end tell if it_is_dark = true then tell application "System Events" to set picture of every desktop to "/Library/Desktop Pictures/Mojave Night.jpg" do shell script "defaults write at.obdev.LaunchBar Theme at.obdev.LaunchBar.theme.Dark" else tell application "System Events" to set picture of every desktop to "/Library/Desktop Pictures/Mojave.heic" do shell script "defaults write at.obdev.LaunchBar Theme at.obdev.LaunchBar.theme.Default" end if
先解釋一下其中新增的語句:
-
set it_is_dark to dark mode
表示用it_is_dark
這個變數來讀取在 系統是否處於深色模式 。 -
if it_is_dark = true
表示判斷這個變數是否為 真 。 - 如果為真,則表示系統處於深色模式,此時執行 Shell 命令
defaults write at.obdev.LaunchBar Theme at.obdev.LaunchBar.theme.Dark
來把 LaunchBar 的主題調整為 Dark 。 -
else
表示如果為假,則表示系統處於淺色模式,此時執行 Shell 命令defaults write at.obdev.LaunchBar Theme at.obdev.LaunchBar.theme.Default
來把 LaunchBar 的主題調整為 Default 。 -
tell application "System Events" to set picture of every desktop to "path/to/image"
則表示將切換為相應的桌布:在深色模式下切換至靜態的 Mojave Night.jpg ,在淺色模式下切換至動態的 Mojave.heic 。(如果不希望同時更換桌布,則可以把這兩句刪掉。)
這樣,在切換系統主題的同時,也會相應切換 LaunchBar 的主題,如下圖所示:

為 LaunchBar 動作挑選更精緻的圖示
如本文開頭所述,當我們經常切換 LaunchBar 主題的時候,會遇到的一個問題是,某些自制的或下載的第三方動作的圖示往往不能同時和明暗兩種主題很好地搭配起來。如下圖中所示的轉換匯率的動作,使用的是 Emoji 符號「:currency_exchange:」來作為其圖示,在深色模式下就很難識別了。

而我們可以發現,LaunchBar 原生動作或各類專案的單色圖示則是可以與主題的明暗相適應的:

如上圖中,當處於淺色模式時,齒輪圖示顯示為深灰色,當切換到深色模式時,這個圖示就相應地變成白色,看起來非常和諧。
自制動作或第三方動作的圖示是不是也可以實現上面的變化呢?答案當然是肯定的。如本文最開始的兩幅截圖中,這個 Switch to Light/Dark Mode 動作的圖示就實現了這樣的變化。
使用 Font Awesome Icons 作為動作圖示
在第七章《動作》中介紹了四種為自制動作設定圖示的方法,其中第一個就是使用 LaunchBar 整合的 Font Awesome Icons 。
Font Awesome 是一套豐富的圖示字型庫,包含免費的基礎版和收費的專業版。

LaunchBar 可以直接呼叫其中的免費圖示作為動作圖示。在 LaunchBar 中輸入縮寫如 FONT
找到 Font Awesome Icons ,按 回車
或 →
方向鍵就可以看到 Font Awesome 中所有的免費圖示:

再進一步通過二級檢索在這些圖示中進一步篩選,找到合適的圖示。如第七章中所述,如針對隱藏桌面檔案的動作,我們可以選擇一個被劃掉的眼睛作為圖示,輸入 EYE
就可以找到它。在它上面按 →
方向鍵,在圖示的各項資訊中選擇第二項 font-awesome:fa-eye-slash ,即這個圖示的 Icon Identifier (即 圖示標識 ,在此行右邊顯示)。

按 ⌘Command-C
把這串字元複製下來。在 Action Editor 中選擇了這個動作之後,選擇 General 標籤頁上的第一項 Action Icon ,在其中貼上這個圖示標識,則動作的圖示就設定完成了:

這個方法美中不足的一點在於,當前版本的 LaunchBar 整合的是第 4 代版本的 Font Awesome。在 LaunchBar 6.8 中新增了 Font Awesome 的整合之後就未再更新過其圖示庫,其中只包含了 786 個圖示,所能表達的含義有限,有時會找不到能代表動作功能的圖示。
而當前 Font Awesome 官方的最新版本是 5.7.2,免費圖示多達 1500 個,大大拓展了使用範圍。我們如何將最新版本的 Font Awesome 圖示應用在 LaunchBar 的自制動作呢?
使用圖片作為動作圖示
本文開始提到的 Switch to Light/Dark Mode 動作的圖示是當前版本的 Font Awesome 中的一個圖示,我覺得這個陰陽魚圖案可以非常貼切地表達出明暗模式切換的功能。但這個圖標出現在最新版的 Font Awesome 中,並沒有被包含在 LaunchBar 提供的 Font Awesome 版本中。下面詳細介紹一下這個圖示的獲取和處理過程。
1. 下載向量圖片
首先先在 Font Awesome 官網上搜索並找到這個圖示的頁面,點選下圖中標註出的圖示來下載它。

此時下載下來的是一個 svg 檔案,即一個向量圖形,我們可以通過 Safari 等瀏覽器來檢視它(別忘了可以用 LaunchBar 直接把它 Instant Send 到 Safari)。
小貼示:什麼是向量圖形
向量圖形是計算機中直接用點、直線或者多邊形等基於數學方程的幾何圖元來表示的影象,可以無限縮放而不影響影象質量。 svg 是常見的向量圖片檔案格式。常見的 png、jpg、bmp 檔案則是與之相對應的點陣圖檔案,是通過畫素來表示影象內容。
2. 轉換成點陣圖檔案
LaunchBar 中並不支援將 svg 檔案作為動作圖示來使用,我們需要先把這個圖片轉換為一個 png 格式的圖片檔案。
經過反覆測試,用命令列程式 rsvg-convert
可以很方便地完成這一功能。
首先,我們在終端(Terminal)中通過Homebrew 來安裝這個程式,輸入下列命令並回車以完成安裝:
brew install librsvg
安裝完成之後,就可以直接使用如下命令對 svg 檔案進行轉換:
rsvg-convert -w 256 ~/Downloads/yin-yang-solid.svg -o ~/Downloads/yin-yang-solid.png
上面的命令中:
-w 256 ~/Downloads/yin-yang-solid.svg -o ~/Downloads/yin-yang-solid.png
此時就可以把這個圖片作為 Switch to Light/Dark Mode 動作的圖示了。參照第七章《動作》所述,在 Action Editor 中將此圖片放入 Switch to Light/Dark Mode 動作的 Resources 資料夾中,接著再把該動作圖示的名稱設定為圖片名稱。

3. 把圖片變為「模版圖示」
此時我們遇到了之前提到的問題——在深色模式下圖示與主題不協調:

圖示的黑色部分和背景差別太小,既不易識別,也不夠美觀。如何讓圖示自動適應背景呢?非常簡單。只要在圖片的檔名結尾加上 Template
,LaunchBar 在讀取這張圖片作為動作圖示時就會把它當成一個 模版圖示 。
LaunchBar 中所謂的模版圖示,是指這張圖片分為兩個部分,透明部分和不透明部分,不透明部分再根據 LaunchBar 的顯示主題進行顯示。如果 LaunchBar 採用的是淺色的 Default 主題,不透明部分則顯示為深色;如果是深色的 Dark 主題,則顯示為淺色。
我們把剛才放入該動作的 Resources 資料夾中的 yin-yang-solid.png 檔案更名為 yin-yang-solid -Template .png ,它就變成了一個「模版圖示」了(其中 Template
前加上的橫槓 -
僅是為了分隔原檔名和 Template
,便於閱讀,去掉它也可以)。
這樣,使用圖片作為圖示就和使用 Font Awesome 圖示的顯示效果一致了。
這個轉換 svg 圖片並重命名的過程當然也可以打包製成一個 LaunchBar 動作。如下圖所示,把 svg 快速傳送至 LaunchBar 後呼叫此動作 Convert to PNG 即可生成一個對應的 png 檔案,且在檔名後加上了 -Template
字樣:

:arrow_double_down: 點此下載 Convert to PNG 動作
這個動作是通過 Python 呼叫 rsvg-convert
實現的。程式碼內容請檢視此動作檔案中的指令碼檔案 default.py 。
4. 把圖示長寬比調整為 1:1
但此時仍然存在一個小 bug。當選用的圖片圖示的長寬不一致時,這個圖示會拉伸為一個正方形,導致圖示變形。如下圖中綠色鍵頭所示,這個圖示被拉高了。顯然,這個變形會在圖示長寬比嚴重不滿足 1:1 時尤為嚴重。

上圖中的熱心網友向 LaunchBar 官推反映了這個問題,它也許下一版本中得到修復。目前,我們可以通過各種製圖軟體把得到的非方形圖片處理成方形以避免這個問題。

這當然也可以通過 LaunchBar 來實現。如下圖所示,開始時這個 png 檔案的尺寸為 256×205(見彈出的 QuickLook 視窗的標題欄),快速傳送至 LaunchBar 後呼叫此動作 Transform to Square Icon 即可將其尺寸調整為 256×256 的正方形:

:arrow_double_down: 點此下載 Transform to Square Icon 動作
這個動作是通過 AppleScript 實現的,程式碼內容非常簡單,如果感興趣亦不妨在此動作檔案中開啟其指令碼檔案 default.scpt 進行檢視。
從哪裡獲取圖示資源?
除了 Font Awesome 以外,還有很多站點提供風格統一的向量圖示,如:
- Material Design :Google 出品的一套常用圖示;
- Iconfont :阿里巴巴向量圖示庫;
- Icofont ;
- ……
如果你也有經常訪問某些精緻的向量圖示資源網站,歡迎在評論區留言分享。
結語
本文介紹了一些有趣的小技巧,以優化深色模式下 LaunchBar 外觀的細節效果。這在一定程度上緩解
(縱容)
了某些強迫症人士
(比如上面提到的熱心網友)
的症狀。同時其中也分享了一些簡單有效的小工具,如:
-
通過 AppleScript 實現如下功能:
- 切換系統主題
- 呼叫 Shell 語句切換 LaunchBar 主題
- 切換桌面桌布
-
通過
rsvg-convert
轉換 svg 向量圖檔案。
希望大家能從中得到一些小的收穫。