Dark Mode: Using Default Colors and System Colors

darkmode.swift

//
//  ContentView.swift
//  Dark Mode
//
//  Created by Amos Gyamfi on 13.6.2020.
//  Copyright © 2020 Amos Gyamfi. All rights reserved.
//

import SwiftUI

struct ContentView: View {
    
@State private var showStrokeProgress = false
@State private var showButton = true
@State private var showText = false
    
    var body: some View {
        ZStack {
            
            Color(.systemBackground)
                .edgesIgnoringSafeArea(.all)
           
            Text("Dark Mode")  // Update to default dynamic color
                .font(.largeTitle)
                .offset(y: -UIScreen.main.bounds.height/3)
            
            HStack {
                Rectangle()
                    .frame(width: 63, height: 63)
                    .cornerRadius(14)
                    .foregroundColor(Color(.quaternarySystemFill))  // Update to dynamic system color
                    .overlay(
                        Image(systemName: "camera.viewfinder")
                        .foregroundColor(Color(.systemIndigo)))
                        .font(.largeTitle)
                    
                VStack(alignment: .leading) {
                    Text("Camera View")  // Update to default dynamic color
                        .font(.title)
                    
                    Text("The widest camera view ")  // Update to default dynamic color
                        .font(.subheadline)
                    
                }.frame(width: 170, height: 63)
               
                Spacer()
                
                ZStack {
                    Circle()  // Inactive
                        .stroke(lineWidth: 3)
                        .frame(width: 30, height: 30)
                        .foregroundColor(Color(.systemGray6))
                    
                    Rectangle()
                        .frame(width: 12, height: 12)
                        .foregroundColor(Color(.systemIndigo))
                        .cornerRadius(2)
                    
                    Circle()
                        .trim(from: showStrokeProgress ? 0 : 1, to: 1)
                        .stroke(style: StrokeStyle(lineWidth: 3, lineCap: .round, lineJoin: .round))
                        .frame(width: 30, height: 30)
                        .foregroundColor(Color(.systemIndigo))
                        .rotationEffect(.degrees(90))
                        .rotation3DEffect(.degrees(180), axis: (x: 1, y: 0, z: 0))
                        
                        // Cubic-Bezier(0.55, 0, 1, 0.45) = EaseInCirc. Easing equation for a circular (sqrt(1-t^2)) ease-in, accelerating from zero velocity.
                        .animation(Animation.timingCurve(0.55, 0, 1, 0.45).speed(0.025))
                        .onAppear() {
                            self.showStrokeProgress.toggle()
                    }
                    
                    Rectangle() // Button
                        .frame(width: 68, height: 34)
                        .foregroundColor(Color(.systemIndigo))
                        .cornerRadius(30)
                        .scaleEffect(showButton ? 0 : 1, anchor: .center)
                        .animation(Animation.easeInOut(duration: 0.5).delay(14))
                        .onAppear() {
                            self.showButton.toggle()
                    }
                    
                    Text("OPEN")  // Text
                        //.foregroundColor(Color(.white))
                        .opacity(showText ? 1 : 0)
                        .animation(Animation.easeInOut(duration: 0.5).delay(14))
                        .onAppear() {
                            self.showText.toggle()
                    }
                }
            }.padding()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .colorScheme(.dark)
          
           
    }
}