Semantic-ui-react: Theme support

Created on 3 Aug 2016 · 7Comments · Source: Semantic-Org/Semantic-UI-React

Does this library intend to support semantic-ui theming? I'm currently using https://github.com/Semantic-Org/Semantic-UI-CSS and dropping it into a react project. But the biggest limitation is lack of theme support. However, I don't want to add all of SemanticUI in my react project either. Could stardust help with this?

question

Source

morenoh149

Most helpful comment

documentation for this usecase would be amazing. Thanks for the reply.

morenoh149 on 4 Aug 2016

👍5

All 7 comments

Yep, we use multiple themes with Stardust here at TechnologyAdvice. Stardust replaces SUI markup and jQuery plugins with React components. You can use any SUI css theme you like on top.

levithomason on 3 Aug 2016

I should note, we are also using semantic-ui-css for the doc site. You can take a look in docs/app/index.ejs to see where we included it. Also, our package.json where we are installing it for use in the docs.

Let me know if I missed anything and I'll re-open this issue. Cheers!

levithomason on 3 Aug 2016

documentation for this usecase would be amazing. Thanks for the reply.

morenoh149 on 4 Aug 2016

👍5

Hm, perhaps I'm misunderstanding. I am under the impression this is already documented in the README.md under Usage. After creating your theme, just include it's css in the <head> of your index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try Stardust</title>

  <!-- SUI CSS -->
  <link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css" rel="stylesheet">
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

Just use any SUI theme css in place of the one included there ^. Let me know if I've misunderstood something.

levithomason on 4 Aug 2016

I was expecting an analogue to site.variables or theme.config I could supply to stardust or include in the <head> to achieve theming. http://semantic-ui.com/usage/theming.html

morenoh149 on 4 Aug 2016

Ah, that would be rad. Unfortunately, this kind of theming is not reasonably possible with React components alone due to the cascading nature of CSS and the limited awareness of components in a render tree. Moreover, changing variables requires a costly build step and recompile of the LESS to generate the new stylesheets. Unfortunately, this is far too slow to perform on the fly.

I've toyed with the idea of components handling theming, though, since it is so novel. I've also built in browser theme compilers in the distant past, like bootstyle for bootstrap. IMO the tech just isn't quite here yet to properly handle this kind of thing live in an app.

The good news is that in the meantime, you can go about theming as you normally would with any SUI site and just include the final result CSS when you're done.

levithomason on 4 Aug 2016

👍3

Is this still the case? Meaning I have to just create a theme with semantic then just import the cdn ?