Use the attributes provided by this module to customize your book through ElmBook.withThemeOptions
.
Take a look at the "Theming" guide for some examples.
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.
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.
preferDarkMode : ElmBook.Internal.ThemeOptions.ThemeOptions html -> ElmBook.Internal.ThemeOptions.ThemeOptions html
Makes your book always start as dark mode.
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 ]
]
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.
ElmBook.Internal.ThemeOptions.ThemeOptions html -> ElmBook.Internal.ThemeOptions.ThemeOptions html