Add ColorScheme environment

Sources/TokamakCore/Tokens/ColorScheme.swift

@@ -0,0 +1,39 @@
+// Copyright 2020 Tokamak contributors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+public enum ColorScheme: CaseIterable {
+  case dark
+  case light
+}
+
+struct ColorSchemeKey: EnvironmentKey {
+  static let defaultValue: ColorScheme = .light
+}
+
+public extension EnvironmentValues {
+  var colorScheme: ColorScheme {
+    get {
+      self[ColorSchemeKey.self]
+    }
+    set {
+      self[ColorSchemeKey.self] = newValue
+    }
+  }
+}
+
+public extension View {
+  func colorScheme(_ colorScheme: ColorScheme) -> some View {
+    environment(\.colorScheme, colorScheme)
+  }
+}

Sources/TokamakCore/Views/View.swift

@@ -39,7 +39,7 @@ protocol GroupView: ParentView {}
  views is made in the reconciler in `TokamakCore` based on their `body` type, host views have body
  type `Never`. `ViewDeferredToRenderer` allows renderers to override that per-platform and render
  host views as composite by providing their own `deferredBody` implementation.
-*/
+ */
 public protocol ViewDeferredToRenderer {
   var deferredBody: AnyView { get }
 }

Sources/TokamakDOM/DOMRenderer.swift

@@ -59,15 +59,17 @@ public final class DOMRenderer: Renderer {
 
   public init<V: View>(_ view: V, _ ref: JSObjectRef) {
     rootRef = ref
-    rootRef.style = "display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; overflow: hidden;"
+    rootRef.style = .string(rootNodeStyles)
 
     let rootStyle = document.createElement!("style").object!
     rootStyle.innerHTML = .string(tokamakStyles)
     _ = head.appendChild!(rootStyle)
 
+    let environmentView = DOMEnvironment(scheme: .light, content: view)
+
     reconciler = StackReconciler(
-      view: view,
-      target: DOMNode(view, ref),
+      view: environmentView,
+      target: DOMNode(environmentView, ref),
       renderer: self
     ) { closure in
       let fn = JSClosure { _ in

Sources/TokamakDOM/Environment/DOMEnvironment.swift

@@ -0,0 +1,44 @@
+// Copyright 2020 Tokamak contributors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import JavaScriptKit
+import TokamakCore
+
+/// This is effectively a singleton, but a mounted `DOMEnvironment` is assumed to be a singleton
+/// too. It can't be declared as a property of `DOMEnvironment` as you can't modify it from within
+/// `body` callbacks.
+private var colorSchemeListener: JSClosure?
+
+struct DOMEnvironment<V: View>: View {
+  @State var scheme: ColorScheme
+
+  let content: V
+
+  private let matchMedia =
+    JSObjectRef.global.window.object!.matchMedia!("(prefers-color-scheme: dark)").object!
+
+  var body: some View {
+    content
+      .colorScheme(scheme)
+      .onAppear {
+        colorSchemeListener = JSClosure {
+          scheme = $0[0].object!.matches.boolean == true ? .dark : .light
+          return .undefined
+        }
+        _ = matchMedia.addEventListener!("change", colorSchemeListener!)
+      }.onDisappear {
+        _ = matchMedia.removeEventListener!("change", colorSchemeListener!)
+      }
+  }
+}

Sources/TokamakDOM/Resources/TokamakStyles.swift

@@ -25,3 +25,12 @@ let tokamakStyles = """
   height: 0;
 }
 """
+
+let rootNodeStyles = """
+display: flex;
+width: 100%;
+height: 100%;
+justify-content: center;
+align-items: center;
+overflow: hidden;
+"""

Sources/TokamakDOM/Tokens/Tokens.swift

@@ -16,6 +16,7 @@ import TokamakCore
 
 public typealias Font = TokamakCore.Font
 public typealias Color = TokamakCore.Color
+public typealias ColorScheme = TokamakCore.ColorScheme
 
 extension Color: CustomStringConvertible {
   public var description: String {

Sources/TokamakDemo/EnvironmentDemo.swift

@@ -18,13 +18,15 @@
 import TokamakDOM
 
 struct EnvironmentDemo: View {
+  @Environment(\.colorScheme) var scheme: ColorScheme
+
   @Environment(\.font) var font: Font?
 
   var body: some View {
     if let font = font {
-      return Text("\(font)")
+      return Text("ColorScheme is \(scheme), font is \(font)")
     } else {
-      return Text("`font` environment not set.")
+      return Text("ColorScheme is \(scheme), `font` environment not set.")
     }
   }
 }