@@ -3,15 +3,23 @@ module Yoga.Block.Container.Style where
33import Yoga.Prelude.Style
44import Color as Color
55import Data.Symbol (class IsSymbol, SProxy, reflectSymbol)
6+import Effect.Uncurried (EffectFn2, runEffectFn2)
67import Foreign.Object (Object)
78import Foreign.Object as Object
89import Heterogeneous.Mapping (class HMapWithIndex, class MappingWithIndex, hmap, hmapWithIndex)
910import Unsafe.Coerce (unsafeCoerce)
11+import Web.DOM (Element)
12+import Web.DOM.Document (documentElement)
13+import Web.HTML (Window, window)
14+import Web.HTML.HTMLDocument as HTMLDocument
15+import Web.HTML.Window (document)
1016
1117data DarkOrLightMode
1218 = DarkMode
1319 | LightMode
1420
21+derive instance eqDarkOrLightMode ∷ Eq DarkOrLightMode
22+
1523lightModeStyle ∷ Style
1624lightModeStyle = unsafeCoerce lightModeVariables
1725
@@ -27,6 +35,35 @@ lightMode = mkGlobal (Just LightMode)
2735global ∷ Style
2836global = mkGlobal Nothing
2937
38+foreign import data ComputedStyle ∷ Type
39+
40+foreign import getComputedStyleImpl ∷ EffectFn2 Element Window ComputedStyle
41+
42+getComputedStyle ∷ Element -> Window -> Effect ComputedStyle
43+getComputedStyle = runEffectFn2 getComputedStyleImpl
44+
45+foreign import getPropertyValueImpl ∷ EffectFn2 String ComputedStyle String -- Not sure it always returns a string
46+
47+getPropertyValue ∷ String -> ComputedStyle -> Effect String
48+getPropertyValue = runEffectFn2 getPropertyValueImpl
49+
50+getDarkOrLightMode ∷ Effect (Maybe DarkOrLightMode)
51+getDarkOrLightMode =
52+ runMaybeT do
53+ win <- window # lift
54+ htmlDoc <- document win # lift
55+ let doc = HTMLDocument.toDocument htmlDoc
56+ docElem ∷ Element <- documentElement doc # MaybeT
57+ computedStyle <- getComputedStyle docElem win # lift
58+ pv <- getPropertyValue "--theme-variant" computedStyle # lift
59+ if pv == "dark" then
60+ DarkMode # pure
61+ else
62+ if pv == "light" then
63+ LightMode # pure
64+ else
65+ Nothing # pure # MaybeT
66+
3067mkGlobal ∷ Maybe DarkOrLightMode -> Style
3168mkGlobal maybeMode =
3269 css
@@ -40,7 +77,12 @@ mkGlobal maybeMode =
4077 , transition: str "background,color 0.33s ease-in"
4178 }
4279 , ":root":
43− nested $ variables
80+ nested
81+ $ css
82+ { "@media (prefers-color-scheme: dark)":
83+ nest { "--theme-variant": str "dark" }
84+ }
85+ <> variables
4486 <> fontVariables { main: "Inter", mono: "Victor Mono, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console" }
4587 , html:
4688 nested
@@ -358,6 +400,7 @@ variables =
358400 , "--s3": str "calc(var(--s2) * var(--ratio))"
359401 , "--s4": str "calc(var(--s3) * var(--ratio))"
360402 , "--s5": str "calc(var(--s4) * var(--ratio))"
403+ , "--theme-variant": str "light"
361404 }
362405
363406fontVariables ∷ { main ∷ String, mono ∷ String } -> Style