Creating or overriding semantic-ui themes

[localjo]

I'm trying to customize the semantic-ui theme, beyond just haphazardly adding CSS overrides in /src/css/styles.css, and I'm not sure how to do it.

I want to add new components that extend the existing semantic-ui components, and modify the styles of existing semantic ui components. I'm trying to figure out the best way to do that with this starter.

I noticed there's a /src/css/themes folder, but I'm not sure how to use that to create a new theme. I tried to follow the instructions on https://react.semantic-ui.com/theming but those are mostly intended for create-react-app, and I couldn't quite get things working in this starter.

Do you have any recommendations for the right way of approaching theming with this starter?

[fabien0102]

Hi, I didn't touch this Gatsby and semantic-ui since a long time but let's try to remember!

You need to take the LESS version of semantic-ui, and build it somehow! The result will be CSS files, so if you output this into the project and import it, everything shod follow 😀

Two options for the "build it somehow":

• the "clean way" (but harder ^^) : webpack
• the "dirty way" : use gulp or whatever semantic-ui give you and commit the resulting CSS
• the "another dirty way" : put the semantic-ui build as "pre-build" in your package.json (but you will not have hotreload and not sure about the dev server 😄)

Note: I'm stuck in an hospital without access to a computer, so I'm doing my best to give you directions with my memories 😘 Note bis: the "right approach" is probably webpack, but it always depends of your project/context. If a "hack" describe above works for you, this can be good to go! (And you can always iterate later 😉)

Just in case, check if a semantic-ui plugin exists for Gatsby 😉

[localjo]

Thanks. I think removing the minified semantic-ui CSS and installing semantic-ui-less and importing the stylesheet from that, and adding a LESS webpack loader so webpack doesn't complain should work. I got that far, but the styles still weren't being included in the page, so I'm probably forgetting one more step.

I decided to switch to a more bare-bones starter for now, but I wanted to mention how far I got, just in case anyone else is trying to do this.

Thanks for you response. Sorry to hear you're in the hospital. Get well soon!

[fabien0102]

@localjo you may have a look to this starter for inspiration https://www.gatsbyjs.org/starters/whoisryosuke/semantic-ui-docs-gatsby/

Apparently a gastby sass plugin exists 😉