git.iko.soy/rowtype-yoga/ry-blocks
on main help sign in
Reading back the theme
6eb6f3aMark Eibes
src/Yoga/Block/Container/Style.jsnew file+2
compare with main
unifiedsplit
@@ -0,0 +1,2 @@
1+exports.getComputedStyleImpl = (el, window) => window.getComputedStyle(el)
2+exports.getPropertyValueImpl = (propName, computedStyle) => computedStyle.getPropertyValue(propName)
src/Yoga/Block/Container/Style.purs+44−1
@@ -3,15 +3,23 @@ module Yoga.Block.Container.Style where
3import Yoga.Prelude.Style
3import Yoga.Prelude.Style
4import Color as Color
4import Color as Color
5import Data.Symbol (class IsSymbol, SProxy, reflectSymbol)
5import Data.Symbol (class IsSymbol, SProxy, reflectSymbol)
6+import Effect.Uncurried (EffectFn2, runEffectFn2)
6import Foreign.Object (Object)
7import Foreign.Object (Object)
7import Foreign.Object as Object
8import Foreign.Object as Object
8import Heterogeneous.Mapping (class HMapWithIndex, class MappingWithIndex, hmap, hmapWithIndex)
9import Heterogeneous.Mapping (class HMapWithIndex, class MappingWithIndex, hmap, hmapWithIndex)
9import Unsafe.Coerce (unsafeCoerce)
10import 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)
10
16
11data DarkOrLightMode
17data DarkOrLightMode
12 = DarkMode
18 = DarkMode
13 | LightMode
19 | LightMode
14
20
21+derive instance eqDarkOrLightMode ∷ Eq DarkOrLightMode
22+
15lightModeStyle ∷ Style
23lightModeStyle ∷ Style
16lightModeStyle = unsafeCoerce lightModeVariables
24lightModeStyle = unsafeCoerce lightModeVariables
17
25
@@ -27,6 +35,35 @@ lightMode = mkGlobal (Just LightMode)
27global ∷ Style
35global ∷ Style
28global = mkGlobal Nothing
36global = mkGlobal Nothing
29
37
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+
30mkGlobal ∷ Maybe DarkOrLightMode -> Style
67mkGlobal ∷ Maybe DarkOrLightMode -> Style
31mkGlobal maybeMode =
68mkGlobal maybeMode =
32 css
69 css
@@ -40,7 +77,12 @@ mkGlobal maybeMode =
40 , transition: str "background,color 0.33s ease-in"
77 , transition: str "background,color 0.33s ease-in"
41 }
78 }
42 , ":root":
79 , ":root":
80+ nested
81+ $ css
82+ { "@media (prefers-color-scheme: dark)":
83+ nest { "--theme-variant": str "dark" }
84+ }
43− nested $ variables
85+ <> variables
44 <> fontVariables { main: "Inter", mono: "Victor Mono, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console" }
86 <> fontVariables { main: "Inter", mono: "Victor Mono, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console" }
45 , html:
87 , html:
46 nested
88 nested
@@ -358,6 +400,7 @@ variables =
358 , "--s3": str "calc(var(--s2) * var(--ratio))"
400 , "--s3": str "calc(var(--s2) * var(--ratio))"
359 , "--s4": str "calc(var(--s3) * var(--ratio))"
401 , "--s4": str "calc(var(--s3) * var(--ratio))"
360 , "--s5": str "calc(var(--s4) * var(--ratio))"
402 , "--s5": str "calc(var(--s4) * var(--ratio))"
403+ , "--theme-variant": str "light"
361 }
404 }
362
405
363fontVariables ∷ { main ∷ String, mono ∷ String } -> Style
406fontVariables ∷ { main ∷ String, mono ∷ String } -> Style