Skip to content

p1-c02-🔛-dark-mode-test

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

p1-c02-🔛-dark-mode-test

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
DarkModeTest.xcodeproj
DarkModeTest.xcodeproj
 
 
DarkModeTest
DarkModeTest
 
 
README.md
README.md
 
 

README.md

C02 - 🔛 Dark Mode Test

Dark mode test with custom typeface display.

Notes

Custom Font

First, follow this article from Apple to add the font file to your XCode project, and then register it with iOS.

Use the typeface like this:

Text("foobar")
  .font(Font.custom("Condiment-Regular", size: 98))

HEX Color to UIColor

F3 in hexadecimal equals 0.95 in Double.

Example: #F3F1EC in HEX is UIColor(red:0.95, green:0.95, blue:0.93, alpha:1.0) in Swift.

Tips:

Using a tool like this, or Google hex to rgba to find a tool.

Background Color

Use ZStack with color first show like a background.

ZStack {
  Color.init(UIColor(red:0.95, green:0.95, blue:0.93, alpha:1.0))
    .edgesIgnoringSafeArea(.all)
}

.edgesIgnoringSafeArea(.all) means ignore safe area.

Dynamic Colors

Adding dynamic colors in Assets.xcassets is recommend, fast and works great. Follow this article from Apple or this article.

Steps:

  1. Open Assets.xcassets
  2. Right-click the blank area of assets catalog then select New Color Set to create a new color set
  3. Select it then open Attribute Inspector (⌘⌥4), and set its appearance from None to Any, Dark
  4. Select the appearance then define color you want. Set its input method from Floating point (0.0–1.0) to 8-bit Hexadecimal in Attribute Inspector if you want use HEX like #FFFFFF.

Use the Any Appearance variant to specify the color value to use on older systems that do not support Dark Mode.

Changing in Different Appearance

I want to show "Light" in light appearance, and "Dark" in dark appearance.

Getting the \.colorScheme environment with: @Environment(\.colorScheme) var colorScheme: ColorScheme, then use it: Text(colorScheme == .light ? "Light" : "Dark").

Full code:

@Environment(\.colorScheme) var  colorScheme: ColorScheme

var body: some View {
  Text(colorScheme  == .light ? "Light " : "Dark ")
    .font(colorScheme == .light ?  Font.custom("Condiment-Regular", size: 98) : Font.custom("Superclarendon", size: 78))
}

References