Change default theme

[therustmonk]

I couldn't find any guide how to attach a new theme. I can change defaultTheme in https://github.com/gdotdesign/elm-ui/blob/development/source/Ui/Styles/Theme.elm directly, but I don't think it's a right way. How to change it simpler?

Also we should add this information to the documentation.

[gdotdesign]

Unfortunately there is no proper way of changing the theme. I'm experimenting with some methods, I'll let you know when I have something to share.

[therustmonk]

For theming in my projects I use var expression. It works in this fashion:

:root { --bg-color: white; --fg-color: black; }
.theme-noon { --bg-color: grey; --fg-color: blue; }
.theme-dark { --bg-color: black; --fg-color: green; }

component { display: block; background: var(--bg-color); color: var(--fg-color); }

The advantage of this approach is that you can mix themes in one layout using classes:

view =
    div [ class "component theme-dark" ]
        [ div [ class "component" ] [ text "This block uses Dark theme" ]
        , div [ class "component theme-noon" ] [ text "This block uses Noon theme" ]
        ]

What about to use this approach? It is compatible with all modern browsers and makes possible to change theme on-the-fly without redundancy of parameters trailing.

[gdotdesign]

This is one of the paths I'm experimenting with in this branch: https://github.com/gdotdesign/elm-ui/compare/theming-experiments It works as expected, the problem is that CSS variables according to can i use are not supported in IE or Edge: http://caniuse.com/#feat=css-variables

The other path is to use https://github.com/gdotdesign/elm-html-styles which also can be good. You can check some of the components already converted here: https://github.com/gdotdesign/elm-ui/compare/html-styles.

I like the second one more, but I'm still evaluating it in an other project.

[MartinKavik]

Hi, I've just discovered Tachyons.io. (Why it can be useful: github.com/dwyl/learn-tachyons + github.com/dwyl/technology-stack).

And I've written a basic prototype of a button component based on elm-ui repo: github.com/MartinKavik/tachyons-elm-ui-example = my experiment with theming components for maybe some inspiration.