qt 创建自定义颜色_为明暗模式创建自定义颜色

qt 创建自定义颜色

Since the release of iOS 13, Dark Mode has been a feature that a majority of users have been waiting for (Not sure why, but hey, better late than never).

自iOS 13发行以来，黑暗模式一直是大多数用户一直在等待的功能(不知道为什么，但是，迟到总比没有好。)

As iOS Engineers, we’d definitely want our apps to have Dark Mode supported. Sure we would use .systemBackground, or other .systemColors that’s already built in. But what about if you have a custom color that is not listed in the default UIColor’s list? No worries, I’ll show you how to create custom color assets for Dark Mode via programmatically & storyboards.

作为iOS工程师，我们绝对希望我们的应用程序支持深色模式。 当然，我们将使用.systemBackground或其他已内置的.systemColors 。但是，如果您的自定义颜色未在默认UIColor列表中列出，该怎么办？ 不用担心，我将向您展示如何通过编程和情节提要为Dark Mode创建自定义颜色资产。

在资产文件夹中创建颜色资产 (Creating Color Assets in the Assets Folder)

Before we jump into code and applying color assets in storyboards, let’s (obviously) create a color asset in the Assets Folder

在进入代码并将颜色资产应用于情节提要之前，让我们(显然)在“资产”文件夹中创建颜色资产

Assets Folder

资产文件夹

To do that, right click anywhere in the Assets Folder and you will see an option called “New Color Set”. From there, you will see a default color made for you. Make sure you have your inspector tab open and head to “Appearances” and then click “Any, Dark”.

为此，右键单击Assets文件夹中的任何位置，您将看到一个名为“ New Color Set”的选项。 从那里，您将看到为您制作的默认颜色。 确保打开检查器选项卡，然后转到“外观” ，然后单击“任何，黑暗” 。

Click the button in Appearances section!

单击外观部分中的按钮！

Let’s get a custom color for our the background of our screen. By clicking “Any Appearance”, you’ll see at the bottom right that there is a color section, click color panel and choose the custom color that you want to use for “Light Mode”.

让我们为屏幕背景获取自定义颜色。 通过单击“任何外观” ，您将在右下角看到一个颜色部分，单击颜色面板，然后选择要用于“照明模式”的自定义颜色。

Click that “Show Color Panel” yo 🤙🏽

单击“显示颜色面板”哟🤙🏽

Repeat the same steps for “Dark Appearance”. So now, it should look something like this:

对“深色外观”重复相同的步骤。 所以现在，它应该看起来像这样：

These are the names of my color assets. Name it whatever you want

这些是我的色彩资产的名称。 随心所欲命名

One more thing. Make sure that you rename the color asset that you just created. You will see why in just a moment.

还有一件事。 确保重命名刚创建的颜色资产。 您很快就会看到原因。

将其应用于情节提要 (Applying it to Storyboards)

Sweet! Color Assets are made! Let’s use them in Storyboards now.

甜！ 颜色资产已制成！ 现在让我们在情节提要中使用它们。

We go to the background tab where we can change the color of the View’s background. Now that we created those custom color assets, those colors will now be at the very top where it is under “Named Colors”. Click on the appropriate color you wish to choose and BOOM. You’re done!

我们转到背景选项卡，在这里我们可以更改视图背景的颜色。 现在我们创建了这些自定义颜色资产，这些颜色现在将位于“命名颜色”下的最顶部。 单击您想要选择的适当颜色，然后单击“增大”。 你完成了！

以编程方式设置自定义颜色资产 (Setting custom color assets Programmatically)

Since we have already created those color assets, half of the work is already done. How I am going to create UIColor variables is by creating a “Constants” file and have all of my custom assets placed there. You are welcome to follow this example or do it however you please.

由于我们已经创建了这些色彩资产，因此一半的工作已经完成。 我将如何创建UIColor变量，方法是创建一个“常量”文件，并将所有自定义资产放置在该文件中。 欢迎您按照此示例操作，也可以根据需要进行操作。

Creating an Enum called “CustomColor” with their properties

创建一个名为“ CustomColor”的枚举及其属性

Calling a custom color for the view’s background programmatically

以编程方式为视图的背景调用自定义颜色

你完成了！ (You’re done!)

Simple right? I hope this article helps you understand how to create custom color assets for your current or future projects!

简单吧？ 我希望本文能帮助您了解如何为当前或将来的项目创建自定义颜色资产！

Happy Coding 😌

快乐编码😌

https://gist.github.com/georrgee/dd6b81f5c39602b6c2d8e3a52ec9df41 https://gist.github.com/georrgee/dd6b81f5c39602b6c2d8e3a52ec9df41

翻译自: https://medium.com/@georrgee/creating-custom-colors-for-light-dark-mode-36eb5c99c123

qt 创建自定义颜色