uncover-co / elm-theme-provider

Work with scoped themes based on CSS variables with light and dark modes.

elm-theme-provider

This package is used for creating "themes" based on CSS variables and propagating them through your application. It also provides strategies to deal with dark mode easily.

You can pick one of the themes from elm-theme-spec or you can define your own like so:

lightTheme : Theme
lightTheme =
    ThemeProvider.fromList 
        [ ( "background", "white"
        , ( "accent", "blue" )
        ]


darkTheme : Theme
darkTheme =
    ThemeProvider.fromList 
        [ ( "background", "black"
        , ( "accent", "blue" )
        ]


main : Html msg
main =
    div []
        [ -- provide both light and dark themes globally
          -- SystemStrategy will use the user's system settings
          ThemeProvider.globalProviderWithDarkMode
            { light = lightTheme
            , dark = darkTheme
            , strategy = ThemeProvider.SystemStrategy
            }

        -- section using the default light or dark theme
        , section [] [ .. ]

        -- section using an scoped theme
        , ThemeProvider.provider specialTheme [] [ .. ]
        ]