git.iko.soy/rowtype-yoga/psfp
on master help sign in
Theme switching
f2e3678Mark Eibes
blog/src/components/PSLayout.purs+7−3
compare with master
unifiedsplit
@@ -5,7 +5,6 @@ import Color as Color
5import Data.Maybe (Maybe(..), fromMaybe)
5import Data.Maybe (Maybe(..), fromMaybe)
6import Data.Tuple.Nested ((/\))
6import Data.Tuple.Nested ((/\))
7import Effect (Effect)
7import Effect (Effect)
8−import Framer.Motion as Motion
9import MDX (MDX)
8import MDX (MDX)
10import MDXProvider (MdxProviderProps)
9import MDXProvider (MdxProviderProps)
11import Milkis.Impl (FetchImpl)
10import Milkis.Impl (FetchImpl)
@@ -48,8 +47,9 @@ mkLayout fetchImpl = do
48 -- mdxProviderComponent <- mkMdxProviderComponent (apiCompiler fetchImpl)
47 -- mdxProviderComponent <- mkMdxProviderComponent (apiCompiler fetchImpl)
49 reactComponentWithChildren "MDXLayout" \{ children, siteInfo, mdxProviderComponent } -> React.do
48 reactComponentWithChildren "MDXLayout" \{ children, siteInfo, mdxProviderComponent } -> React.do
50 darkOrLightMode /\ setDarkOrLightMode <- useState' Nothing
49 darkOrLightMode /\ setDarkOrLightMode <- useState' Nothing
50+ togglePosition /\ setTogglePosition <- useState' ToggleIsLeft
51 let
51 let
52− maybeTogglePosition =
52+ themeToMaybeTogglePosition =
53 darkOrLightMode
53 darkOrLightMode
54 <#> case _ of
54 <#> case _ of
55 DarkMode -> ToggleIsRight
55 DarkMode -> ToggleIsRight
@@ -67,7 +67,7 @@ mkLayout fetchImpl = do
67 case _ of
67 case _ of
68 ToggleIsLeft -> setDarkOrLightMode (Just LightMode)
68 ToggleIsLeft -> setDarkOrLightMode (Just LightMode)
69 ToggleIsRight -> setDarkOrLightMode (Just DarkMode)
69 ToggleIsRight -> setDarkOrLightMode (Just DarkMode)
70− , togglePosition: fromMaybe ToggleIsLeft maybeTogglePosition
70+ , togglePosition: themeToMaybeTogglePosition # fromMaybe togglePosition
71 , left:
71 , left:
72 Block.icon
72 Block.icon
73 Y.</> do
73 Y.</> do
@@ -119,6 +119,10 @@ mkLayout fetchImpl = do
119 pure
119 pure
120 $ element Container.component
120 $ element Container.component
121 { themeVariant: darkOrLightMode
121 { themeVariant: darkOrLightMode
122+ , onPreferredSystemThemeChange:
123+ case _ of
124+ LightMode -> setTogglePosition ToggleIsLeft
125+ DarkMode -> setTogglePosition ToggleIsRight
122 , content:
126 , content:
123 Y.styled Block.stack
127 Y.styled Block.stack
124 { className: "blog-content"
128 { className: "blog-content"