Last active
January 10, 2023 06:54
-
-
Save hmlongco/c8e7b1fb1d1d4de7e7b550895868e499 to your computer and use it in GitHub Desktop.
Themes for SwiftUI
This file contains hidden or 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
struct Colors { | |
let primary: Color | |
} | |
struct Fonts { | |
let body: Font | |
} | |
class Theme: ObservableObject { | |
let color: Colors | |
let font: Fonts | |
init(color: Colors, font: Fonts) { | |
self.color = color | |
self.font = font | |
} | |
} | |
extension Theme { | |
static let standard = Theme( | |
color: Colors(primary: .blue), | |
font: Fonts(body: .body) | |
) | |
static let alternate = Theme( | |
color: Colors(primary: .red), | |
font: Fonts(body: .body) | |
) | |
} | |
class ThemeManager: ObservableObject { | |
@Published var current: Theme = .standard | |
} | |
struct ContentView: View { | |
@StateObject var themes = ThemeManager() | |
var body: some View { | |
NavigationView { | |
AccountListLoadingView() | |
// allow theme management | |
.environmentObject(themes) | |
// allow easy access to current theme | |
.environmentObject(themes.current) | |
} | |
} | |
} | |
struct PrimaryLabelStyle: ViewModifier { | |
@EnvironmentObject var theme: Theme | |
func body(content: Content) -> some View { | |
content | |
.font(theme.font.body) | |
.foregroundColor(theme.color.primary) | |
} | |
} | |
struct AccountListCellView: View { | |
let account: Account | |
var body: some View { | |
Text(account.id) | |
.modifier(PrimaryLabelStyle()) | |
} | |
} | |
struct AccountListCellView_Previews: PreviewProvider { | |
static var previews: some View { | |
Group { | |
AccountListCellView(account: Account()) | |
.environmentObject(Theme.standard) | |
AccountListCellView(account: Account()) | |
.environmentObject(Theme.alternate) | |
} | |
} | |
} | |
struct SomeView: View { | |
@EnvironmentObject var themes: ThemeManager | |
var body: some View { | |
Button { | |
themes.current = .alternate | |
} label: { | |
Text("Switch Theme") | |
} | |
} | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment