Skip to content

Instantly share code, notes, and snippets.

@mortenjust
Created January 22, 2023 20:48
Show Gist options
  • Save mortenjust/4fe57bf0312066f6c47eb9668bfedcd0 to your computer and use it in GitHub Desktop.
Save mortenjust/4fe57bf0312066f6c47eb9668bfedcd0 to your computer and use it in GitHub Desktop.
//
// DarkModeMasker.swift
// SwiftUI Demos
//
// Created by Morten Just on 1/22/23.
// https://twitter.com/joshguospace/status/1617101052192649216?s=12
import SwiftUI
import Charts
struct DarkModeMasker: View {
@State var name = ""
@State var sales = [Int]()
@State var dates = [Int]()
@State var isLight = false
func DataPoint(_ data: String, label: String) -> some View {
VStack {
Text(data).font(.largeTitle)
Text(label)
}
}
@State var overToggle = false
func ModeToggle() -> some View {
HStack {
Spacer()
Toggle(isOn: $isLight) {
Text("Light")
}
.toggleStyle(.switch)
.padding()
}
}
func MainView(_ isDark : Bool) -> some View {
VStack {
ModeToggle()
VStack {
let g = LinearGradient(
colors: isDark ? [.orange, .yellow] : [.teal, .blue], startPoint: .top, endPoint: .bottom)
Text("Sales").font(.largeTitle.bold())
.frame(maxWidth: .infinity, alignment: .leading)
Chart {
ForEach(dates, id: \.self) {
AreaMark(x: .value("Date", $0), y: .value("Sales", sales[$0]))
.foregroundStyle(g)
.interpolationMethod(.catmullRom)
}
}
HStack(spacing: 35) {
DataPoint("$393", label: "Avg.")
DataPoint("$29", label: "Per min")
DataPoint("$529", label: "Max")
DataPoint("$9", label: "Min")
}
}
.padding(30)
.frame(maxWidth: 400)
.background { Color.primary.opacity(0.04)}
.cornerRadius(10)
.padding(30)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background {
Rectangle().fill(Color(nsColor: .windowBackgroundColor))
}
.colorScheme(isDark ? .dark : .light)
}
@State var sliderX : CGFloat = 0
var body: some View {
VStack {
ZStack {
GeometryReader { reader in
let w = reader.size.width
MainView(true)
MainView(false)
.mask {
ZStack {
// slider mask
HStack {
Rectangle()
.frame(width: sliderX)
Spacer()
}
// circle mask
Circle()
.position(x: w, y:0)
.scaleEffect(isLight ? 4 : 0, anchor: .topTrailing)
}
}
VStack {
Spacer()
// slider
Capsule()
.position(x: sliderX)
.frame(width: 15, height: 10)
.gesture(DragGesture()
.onChanged({ value in
sliderX = max(0, value.location.x)
})
)
Spacer()
}
}
}
}
.animation(.default, value: isLight)
.ignoresSafeArea()
.onTapGesture {
isLight.toggle()
}
.onAppear {
sales = (0...32).map { Int.random(in: 10...50) + $0 * 2 }
dates = (0...30).map { $0 }
}
}
}
struct DarkModeMasker_Previews: PreviewProvider {
static var previews: some View {
DarkModeMasker()
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment