dtwrks / elm-book / ElmBook.ThemeOptions

Use the attributes provided by this module to customize your book through ElmBook.withThemeOptions.

Take a look at the "Theming" guide for some examples.

Header

subtitle : String -> ElmBook.Internal.ThemeOptions.ThemeOptions html -> ElmBook.Internal.ThemeOptions.ThemeOptions html

Define a custom subtitle for your book. This will appear below the title.

logo : html -> ElmBook.Internal.ThemeOptions.ThemeOptions html -> ElmBook.Internal.ThemeOptions.ThemeOptions html

Provide a custom logo for your book.

header : html -> ElmBook.Internal.ThemeOptions.ThemeOptions html -> ElmBook.Internal.ThemeOptions.ThemeOptions html

Provide a completely custom header to your book. This will replace the whole area where usually the logo, title and subtitle appears.

Color palette

background : String -> ElmBook.Internal.ThemeOptions.ThemeOptions html -> ElmBook.Internal.ThemeOptions.ThemeOptions html

Customize the background color of your book. Any valid value for the background CSS property will work.

backgroundGradient : String -> String -> ElmBook.Internal.ThemeOptions.ThemeOptions html -> ElmBook.Internal.ThemeOptions.ThemeOptions html

Customize the background of your book using a gradient by providing the start and end color. This is just a helper since the same thing can be achieved by using the background attribute.

accent : String -> ElmBook.Internal.ThemeOptions.ThemeOptions html -> ElmBook.Internal.ThemeOptions.ThemeOptions html

Customize the accent color of your book. This will change the color for a few different elements that sit on top of your background like the title and default logo.

navBackground : String -> ElmBook.Internal.ThemeOptions.ThemeOptions html -> ElmBook.Internal.ThemeOptions.ThemeOptions html

Customize the nav background color of your book. This will affect both the background on hovered and active nav items as well as the background of the search field.

navAccent : String -> ElmBook.Internal.ThemeOptions.ThemeOptions html -> ElmBook.Internal.ThemeOptions.ThemeOptions html

Customize the nav accent color of your book. This will affect the default text color for nav items.

navAccentHighlight : String -> ElmBook.Internal.ThemeOptions.ThemeOptions html -> ElmBook.Internal.ThemeOptions.ThemeOptions html

Customize the nav accent highlight color of your book. This will affect the color of active nav items.

Dark Mode

preferDarkMode : ElmBook.Internal.ThemeOptions.ThemeOptions html -> ElmBook.Internal.ThemeOptions.ThemeOptions html

Makes your book always start as dark mode.

Global CSS

globals : List html -> ElmBook.Internal.ThemeOptions.ThemeOptions html -> ElmBook.Internal.ThemeOptions.ThemeOptions html

Add global elements to your book. This can be helpful for things like CSS resets.

For instance, if you're using elm-tailwind-modules, this would be really helpful:

import Css.Global exposing (global)
import Tailwind.Utilities exposing (globalStyles)

book "MyApp"
    |> withThemeOptions [
        globals [ global globalStyles ]
    ]

Routing

routePrefix : String -> ElmBook.Internal.ThemeOptions.ThemeOptions html -> ElmBook.Internal.ThemeOptions.ThemeOptions html

Use this to set the route prefix for your ElmBook's urls. This is useful if you're not hosting it on your root path.

useHashBasedNavigation : ElmBook.Internal.ThemeOptions.ThemeOptions html -> ElmBook.Internal.ThemeOptions.ThemeOptions html

By default ElmBook expects you to host it at the root of a SPA style server.

However, if you'd like to use ElmBook on other situations – like on a subfolder, or a static server without these redirection settings, or even in elm-reactor. You can use the hash based navigation as everything should work as expected.

Types


type alias ThemeOption html =
ElmBook.Internal.ThemeOptions.ThemeOptions html -> ElmBook.Internal.ThemeOptions.ThemeOptions html