Open therustmonk opened 7 years ago
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.
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.
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.
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.
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.