@@ -5,7 +5,6 @@ import Color as Color
55import Data.Maybe (Maybe(..), fromMaybe)
66import Data.Tuple.Nested ((/\))
77import Effect (Effect)
8−import Framer.Motion as Motion
98import MDX (MDX)
109import MDXProvider (MdxProviderProps)
1110import Milkis.Impl (FetchImpl)
@@ -48,8 +47,9 @@ mkLayout fetchImpl = do
4847 -- mdxProviderComponent <- mkMdxProviderComponent (apiCompiler fetchImpl)
4948 reactComponentWithChildren "MDXLayout" \{ children, siteInfo, mdxProviderComponent } -> React.do
5049 darkOrLightMode /\ setDarkOrLightMode <- useState' Nothing
50+ togglePosition /\ setTogglePosition <- useState' ToggleIsLeft
5151 let
52− maybeTogglePosition =
52+ themeToMaybeTogglePosition =
5353 darkOrLightMode
5454 <#> case _ of
5555 DarkMode -> ToggleIsRight
@@ -67,7 +67,7 @@ mkLayout fetchImpl = do
6767 case _ of
6868 ToggleIsLeft -> setDarkOrLightMode (Just LightMode)
6969 ToggleIsRight -> setDarkOrLightMode (Just DarkMode)
70− , togglePosition: fromMaybe ToggleIsLeft maybeTogglePosition
70+ , togglePosition: themeToMaybeTogglePosition # fromMaybe togglePosition
7171 , left:
7272 Block.icon
7373 Y.</> do
@@ -119,6 +119,10 @@ mkLayout fetchImpl = do
119119 pure
120120 $ element Container.component
121121 { themeVariant: darkOrLightMode
122+ , onPreferredSystemThemeChange:
123+ case _ of
124+ LightMode -> setTogglePosition ToggleIsLeft
125+ DarkMode -> setTogglePosition ToggleIsRight
122126 , content:
123127 Y.styled Block.stack
124128 { className: "blog-content"