I wasn't completely happy with Swift's built-in color palette. For instance, Color.green is a bit too bright for my taste. But I also wasn't looking forward to creating custom color palettes for my apps.

Luckily there is already a color palette to my liking that I've been using when developing websites: the Bootstrap color palette.

So I created Xcode color sets for all Bootstrap colors. Adding them to a Swift project is as easy as dragging the color sets into the Assets list in Xcode. And using them is equally simple, e.g. Color.bsGreen.

You can find the GitHub project and the source files here: https://github.com/leomakkinje/Bootstrap-Color-Sets-for-Xcode

As someone with a background in creative, thank you! I usually work with HEX codes and that seems to help.

Nice.

A few sugestations

1. Make the BSColor.xcassets so it can be drag straight in to project rather then in to the Assert.xcassets or make it aSwift Package so can import BSColor
2. Have the opposite to .primary color (EG White in Light mode, Black in Dark mode)
3. Have the color tint have the opposite in dark mode eg bsBlue100 has #CFE2FF in ANY and in DARK has #031633(bsBlue900) in DARK.

Hello @NigelGee,

Make the BSColor.xcassets

I did try that but I wasn't happy with the user experience. When dragging an asset catalog into a project, a window pops up where the user has to select for which targets the asset catalog should be enabled. I think this popup could be confusing for some folks, therefore I decided to not create a separate asset catalog. I prefer the current implementation because it's literally drag&drop without any potentially confusing popup windows.

make it aSwift Package

I also tried that, and didn't like that implementation either because the asset catalog will then reside in a separate Bundle which has to be addressed specifically in code by referring to Bundle.module. Or worse, use a monstrosity like this: let myColor = Color(UIColor(named: "theNameOfMyColorInAssets", in: .module, compatibleWith: nil)!)

Have the opposite to .primary color

I'm not sure I understand what you're referring to: the .bsPrimary color (which is basically .bsBlue) or another color? Regarding White in Light mode and Black in Dark Mode: that is exactly what .bsBodyBackground and .bsBodyForeground do.

Have the color tint have the opposite in dark mode

Another thing I indeed tried. But as it turns out there is a reason why the authors of Bootstrap have not implemented this (and therefore I also didn't implement it).

The thing is that the contrast between the Light Mode background color (white) and any xxx100 foreground color is not the same as the Dark Mode background color (.bsGray900) and the xxx900 foreground color (which would be the opposite of the xxx100 color).

More specific: .bsBodyBackground and a Text element in .bsBlue100 looks fine in Light Mode. In Dark Mode the Text element would have foreground color .bsBlue900 and the background would be .bsGray900. I tried that but it's almost impossible to read the contents of the Text element.

So maybe mathematical it makes sense to have xxx100 and xxx900 as counterparts (that's exactly what I thought at first) but seeing it on-screen made me realize it doesn't have the same visual effect.

Thank you for taking time to reply with your thoughts.

Make the BSColor.xcassets

When any file is drag into a project it all ways give this pop up so do not think any user would find it confusing. It just that Assert.xcassets becomes a bit of dumping ground and there can have alot of assert in there. Maybe two files one direct to Assert.xcassets and one that is BSColor.xcassets. I suppose I can make BSColor.xcassets and then transfer it to that one but more work to user!

make it aSwift Package

I thought maybe you can access the .xcassets if you did a import BSColor. I have not gone deeply into Swift Packages other then to make some code that I used all the time.

Have the opposite to .primary color

I saw that you .bsBodyForeground and .bsBodyBackground and was the flip of black/white. I think it was the Body that made me think it more for a body rather then text (would .bsForeground look better). Sorry I got confused with the naming.

Have the color tint have the opposite in dark mode

I understand the reason that you gave but if a choose .bsBlue100 I would have a subtle contrast to a white background in light mode however when changed to dark mode with the black background it would be prominent contrast. I made a color picker so that user could pick colors and spent a lot time making sure that color in light mode matched the visual effect in dark mode.

Maybe a set of colors that do this eg .bsBlueAdaptive100 but what would be great is that .bsBlue100.adaptive but that is a code.

Maybe a set of colors that do this eg .bsBlueAdaptive100

That is a great idea. I like it!

I made a color picker so that user could pick colors and spent a lot time making sure that color in light mode matched the visual effect in dark mode.

As mentioned in my first post I'm not looking forward to creating custom color palettes.

But please feel free to clone the repository, add the Adaptive versions and then do a pull request. Looking forward to it! :-)