Last active
April 8, 2021 10:30
-
-
Save jordibruin/23e03782d23efe76ecabe1f61ddd1709 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
enum ThemeMode: CaseIterable { | |
case light | |
case dark | |
case system | |
var text: String { | |
switch self { | |
case .light: | |
return "Light" | |
case .dark: | |
return "Dark" | |
case .system: | |
return "System" | |
} | |
} | |
} | |
struct ThemeSelectView: View { | |
@State var darkModeEnabled = false | |
@State var selectedThemeMode: ThemeMode = .light | |
var body: some View { | |
NavigationView { | |
HStack { | |
Spacer() | |
ThemeSelectButton(selectedThemeMode: $selectedThemeMode, themeMode: .light) | |
Spacer() | |
ThemeSelectButton(selectedThemeMode: $selectedThemeMode, themeMode: .dark) | |
Spacer() | |
ThemeSelectButton(selectedThemeMode: $selectedThemeMode, themeMode: .system) | |
Spacer() | |
} | |
} | |
} | |
} | |
struct ThemeSelectButton: View { | |
@Binding var selectedThemeMode: ThemeMode | |
var themeMode: ThemeMode | |
var body: some View { | |
VStack(spacing: 4) { | |
Text("📱") | |
.font(.system(size: 100)) | |
.padding(.vertical, 4) | |
Text(themeMode.text) | |
Image(systemName: selectedThemeMode == themeMode ? "checkmark.circle.fill" : "checkmark.circle") | |
.foregroundColor(.blue) | |
} | |
.padding(2) | |
.background(LinearGradient(gradient: Gradient(colors: colors), startPoint: .topLeading, endPoint: .trailing)) | |
.cornerRadius(15) | |
.shadow(color: Color.black.opacity(selectedThemeMode == themeMode ? 0.5 : 0.2), radius: 10, x: 0, y: 0) | |
.onTapGesture { | |
selectedThemeMode = themeMode | |
} | |
.animation(.default) | |
} | |
var colors: [Color] { | |
switch themeMode { | |
case .system: | |
return [Color.black, Color.black, Color.orange, Color.orange] | |
case .light: | |
return [Color.orange.opacity(0.2)] | |
case .dark: | |
return [Color.gray.opacity(0.3)] | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment