macbook 黑暗模式

I have my Mac set up to automatically switch between dark and light mode.

我将Mac设置为在暗和亮模式之间自动切换。

I started building a new website when at some point I realized I put a white image as favicon, and in light mode it was almost invisible!

我开始建立一个新的网站，当时我意识到我把白色图片当成了收藏夹图标，而在光线模式下，它几乎是不可见的！

So I started investigating possible ways to add a favicon in dark mode and a different one in light mode.

因此，我开始研究在黑暗模式下添加图标图标和在明亮模式下添加图标图标的可能方法。

Turns out there isn’t (yet) a way to do so for PNG/JPG bitmap images, but we can use an vector images trick for this.

事实证明，对于PNG / JPG位图图像，目前还没有一种方法，但是我们可以使用矢量图像的技巧。

We can embed CSS in an SVG image.

我们可以将CSS嵌入SVG图像中。

If the image is simple enough that we can identify a color and change it in dark mode, we can have a different color for the 2 modes.

如果图像足够简单，我们可以识别颜色并在暗模式下进行更改，则这两种模式可以使用不同的颜色。

I used this trick on (you can check how the favicon changes).

我在上使用了这个技巧(您可以检查favicon的变化)。

Here’s the SVG I used as favicon:

这是我用作网站图标的SVG：

The SVG image is very simple, it’s a half moon I designed in Figma and exported as SVG.

SVG图像非常简单，这是我在Figma中设计并导出为SVG的半月形。

Then I filled the path color with the #ccc color in light mode, and #fff in dark mode.

然后，我充满了路径颜色#ccc光模式颜色和#fff在黑暗模式。

I saved it as a .svg file and then used it as the .

我将其保存为.svg文件，然后将其用作的.svg夹 。

翻译自:

macbook 黑暗模式