SwiftUI - Darkmode extensions you create is what Safari browser doesn't have | Apple iOS Xcode YouTube Seminar #15

Swift5.1.3 Xcode11.3.1 SwiftUI

- Install darkmode extensions into your app
- Adjust the color of dark settings
- good for your eyes and power of iPhone

You can customize the settings of Dark Mode  on web browser.

* Here is the highlight of YouTube tutorial.

OEL (organic electro-luminescence) was thought to save some power of iPhone more than LCD (Liquid Crystal Display). But, several recent reports showed it is opposite actually.

How about your iPhone? To tell the truth, I had iPhone6s and iPhoneX and iPhone6s seems to be longer lasting than iPhoneX.

Anyway, it is worth looking at how to save the power of iPhone. Darkmode is one of the ways to prevent unnecessary power consuming.

Besides, it is good for your eyes. Dark color is so gentle not only for power but also for your sight.

So, let me tell you how to create darkmode on web browser for these purposes.

First, let's see how the ordinary function work on SwiftUI. You need to use the following property.

.environment(\.colorScheme, .dark)

Please put this on NavigationView. It's so simple to create darkmode in your app. To compare it with ordinary mode, please change it like this.

.environment(\.colorScheme, .light)

You can confirm the difference with this.

But, as for the web browser, it will not work because we have to use WebView which does not work with the function of darkmode.

Please refer to my previous YouTube seminar #4 to handle WebView. I will skip the detailed explanation.

struct WebView : UIViewRepresentable {

var url: URL

func makeUIView(context: Context) -> WKWebView {
return WKWebView()

func updateUIView(_ uiView: WKWebView, context: Context) {
let request = URLRequest(url: url)


You can assign the url of favorite web page to the variable as you want. Next, you need set the follwoing rectangle.


Yes, it is the point of dark mode. Does it sound simple? For darkmode, you have to think the following two things: color and contrast.

You should change them depending on the web site you visit. If you can add some function to control them dynamically, it will be more convenient. Add more functions as you want with my code.

Let me show you the code as a whole.

@State var urlString:String = "https://catch-questions.com/english"
@State var opDoub = 0.0
@State var iFbool = false

var body: some View {

VStack {

Text("Dark Mode OK")
Button(action: {

if self.iFbool == true {
self.opDoub = 0.3
} else {
self.opDoub = 0.0

}) {
Text("Change Light")


WebView(url: URL(string: urlString)!)



With the button action, Rectangle() will cover WebView() with a transparent dark sheet. You have to place the Rectangle() under WebView() in ZStack to make the darkmode possible.

To get the source code, check the comment of my YouTube

Back to Table List