让 LaunchBar 在深色模式下看起来更原生的技巧

栏目: 后端 · 前端 · 发布时间: 5年前

内容简介:macOS Mojave 发布以来,深色模式(Dark Mode)便成了天下大势。一众软件,无论知名与否,纷纷新增了深色模式的主题界面以与之相适配。一时间是否支持深色模式成为了评价一个 macOS 软件合格与否的一把重要标尺。LaunchBar 自然不能逆流而行,在当前版本 6.10 也新增了一个深色主题。但对于某些强迫症病友来讲,却可能会受到以下两个问题的困扰:本文介绍了随系统主题自动切换 LaunchBar 主题、以及优化深色主题下的 LaunchBar 动作图标显示效果的技巧,诣在使 LaunchBa

macOS Mojave 发布以来,深色模式(Dark Mode)便成了天下大势。一众软件,无论知名与否,纷纷新增了深色模式的主题界面以与之相适配。一时间是否支持深色模式成为了评价一个 macOS 软件合格与否的一把重要标尺。LaunchBar 自然不能逆流而行,在当前版本 6.10 也新增了一个深色主题。

让 LaunchBar 在深色模式下看起来更原生的技巧
LaunchBar 的深色模式

但对于某些强迫症病友来讲,却可能会受到以下两个问题的困扰:

  • 深色主题无法随系统设置自动切换;
  • 某些深色动作图标在深色主题下既不美观,也不易识别。

本文介绍了随系统主题自动切换 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 本身并不能自动随之切换成深色/浅色主题,相反,需要手动设置,不能跟随系统主题自动切换。这是因为,当前 LaunchBar 的浅色和深色主题是两个独立的主题。在 LaunchBar 的更新日志中,开发商许诺会在后续的升级中提供 一个 在两种系统主题下具有不同显示效果的主题,以实现其随系统主题切换的自动切换。

让 LaunchBar 在深色模式下看起来更原生的技巧
LaunchBar 6.10 更新日志

目前,我们可以通过另一种方法来完成这个功能。

: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 自身主题

为 LaunchBar 动作挑选更精致的图标

如本文开头所述,当我们经常切换 LaunchBar 主题的时候,会遇到的一个问题是,某些自制的或下载的第三方动作的图标往往不能同时和明暗两种主题很好地搭配起来。如下图中所示的转换汇率的动作,使用的是 Emoji 符号「:currency_exchange:」来作为其图标,在深色模式下就很难识别了。

让 LaunchBar 在深色模式下看起来更原生的技巧
深色模式下的动作图标难以识别

而我们可以发现,LaunchBar 原生动作或各类项目的单色图标则是可以与主题的明暗相适应的:

让 LaunchBar 在深色模式下看起来更原生的技巧
LaunchBar 原生项目图标

如上图中,当处于浅色模式时,齿轮图标显示为深灰色,当切换到深色模式时,这个图标就相应地变成白色,看起来非常和谐。

自制动作或第三方动作的图标是不是也可以实现上面的变化呢?答案当然是肯定的。如本文最开始的两幅截图中,这个 Switch to Light/Dark Mode 动作的图标就实现了这样的变化。

使用 Font Awesome Icons 作为动作图标

在第七章《动作》中介绍了四种为自制动作设置图标的方法,其中第一个就是使用 LaunchBar 集成的 Font Awesome Icons

Font Awesome 是一套丰富的图标字体库,包含免费的基础版和收费的专业版。

让 LaunchBar 在深色模式下看起来更原生的技巧
Font Awesome 主页

LaunchBar 可以直接调用其中的免费图标作为动作图标。在 LaunchBar 中输入缩写如 FONT 找到 Font Awesome Icons ,按 回车 方向键就可以看到 Font Awesome 中所有的免费图标:

让 LaunchBar 在深色模式下看起来更原生的技巧
Font Awesome Icons 动作

再进一步通过二级检索在这些图标中进一步筛选,找到合适的图标。如第七章中所述,如针对隐藏桌面文件的动作,我们可以选择一个被划掉的眼睛作为图标,输入 EYE 就可以找到它。在它上面按 方向键,在图标的各项信息中选择第二项 font-awesome:fa-eye-slash ,即这个图标的 Icon Identifier (即 图标标识 ,在此行右边显示)。

让 LaunchBar 在深色模式下看起来更原生的技巧
搜索 Font Awesome 图标

⌘Command-C 把这串字符复制下来。在 Action Editor 中选择了这个动作之后,选择 General 标签页上的第一项 Action Icon ,在其中粘贴这个图标标识,则动作的图标就设置完成了:

让 LaunchBar 在深色模式下看起来更原生的技巧
把 Font Awesome 设置为动作图标

这个方法美中不足的一点在于,当前版本的 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 官网上搜索并找到这个图标的页面,点击下图中标注出的图标来下载它。

让 LaunchBar 在深色模式下看起来更原生的技巧
下载 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 文件夹中,接着再把该动作图标的名称设置为图片名称。

让 LaunchBar 在深色模式下看起来更原生的技巧
把图片设置为动作图标

3. 把图片变为「模版图标」

此时我们遇到了之前提到的问题——在深色模式下图标与主题不协调:

让 LaunchBar 在深色模式下看起来更原生的技巧
深色主题下图标不协调

图标的黑色部分和背景差别太小,既不易识别,也不够美观。如何让图标自动适应背景呢?非常简单。只要在图片的文件名结尾加上 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 字样:

让 LaunchBar 在深色模式下看起来更原生的技巧
Convert to PNG 动作

:arrow_double_down: 点此下载 Convert to PNG 动作

这个动作是通过 Python 调用 rsvg-convert 实现的。代码内容请查看此动作文件中的脚本文件 default.py

4. 把图标长宽比调整为 1:1

但此时仍然存在一个小 bug。当选用的图片图标的长宽不一致时,这个图标会拉伸为一个正方形,导致图标变形。如下图中绿色键头所示,这个图标被拉高了。显然,这个变形会在图标长宽比严重不满足 1:1 时尤为严重。

让 LaunchBar 在深色模式下看起来更原生的技巧
图标变形

上图中的热心网友向 LaunchBar 官推反映了这个问题,它也许下一版本中得到修复。目前,我们可以通过各种制图软件把得到的非方形图片处理成方形以避免这个问题。

让 LaunchBar 在深色模式下看起来更原生的技巧
把图片处理成方形

这当然也可以通过 LaunchBar 来实现。如下图所示,开始时这个 png 文件的尺寸为 256×205(见弹出的 QuickLook 窗口的标题栏),快速发送至 LaunchBar 后调用此动作 Transform to Square Icon 即可将其尺寸调整为 256×256 的正方形:

让 LaunchBar 在深色模式下看起来更原生的技巧
Transform to Square Icon 动作

:arrow_double_down: 点此下载 Transform to Square Icon 动作

这个动作是通过 AppleScript 实现的,代码内容非常简单,如果感兴趣亦不妨在此动作文件中打开其脚本文件 default.scpt 进行查看。

从哪里获取图标资源?

除了 Font Awesome 以外,还有很多站点提供风格统一的矢量图标,如:

如果你也有经常访问某些精致的矢量图标资源网站,欢迎在评论区留言分享。

结语

本文介绍了一些有趣的小技巧,以优化深色模式下 LaunchBar 外观的细节效果。这在一定程度上缓解 (纵容) 了某些强迫症人士 (比如上面提到的热心网友) 的症状。同时其中也分享了一些简单有效的小工具,如:

  • 通过 AppleScript 实现如下功能:

    • 切换系统主题
    • 调用 Shell 语句切换 LaunchBar 主题
    • 切换桌面壁纸
  • 通过 rsvg-convert 转换 svg 矢量图文件。

希望大家能从中得到一些小的收获。


以上所述就是小编给大家介绍的《让 LaunchBar 在深色模式下看起来更原生的技巧》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

高效前端:Web高效编程与优化实践

高效前端:Web高效编程与优化实践

李银城 著 / 机械工业出版社 / 2018-3-15 / 89.00元

这不是一本单纯讲解前端编程技巧的书,而是一本注重思想提升和内功修炼的书。 全书以问题为导向,精选了前端开发中的34个疑难问题,从分析问题的原因入手,逐步给出解决方案,并分析各种方案的优劣,最后针对每个问题总结出高效编程的最佳实践和各种性能优化的方法。 全书共7章,内容从逻辑上大致可以分为两大类: 第一类,偏向实践,围绕HTML、CSS、JavaScript等传统前端技术,以及PW......一起来看看 《高效前端:Web高效编程与优化实践》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

MD5 加密
MD5 加密

MD5 加密工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器