Dark Components

If want to showcase your UI components and their dark mode variants in all their glory, take a look at the onDarkModeChange helper. Try changing the dark/light mode and look at the component below:

There is something hidden in the dark…

Here is how it works:

    type alias SharedState =
        { darkMode : Bool
        }


    initialState : SharedState
    initialState =
        { darkMode = False
        }


    book : Book SharedState
    book "MyApp"
        |> withStatefulOptions
            [ ElmBook.StatefulOptions.initialState
                initialState
            , ElmBook.StatefulOptions.onDarkModeChange
                (\darkMode state ->
                    { state | darkMode = darkMode }
                )
            ]
        |> withChapters []


    darkModeChapter : Chapter SharedState
    darkModeChapter =
        chapter "Dark Mode"
            |> renderStatefulComponent (
                \{ darkMode } ->
                    if darkMode then
                        text "You found me!"
                    else
                        text "There is something hidden in the dark…"
            )