A starter project that includes theme switching functionality with Stitches CSS-in-JS and Remix SSR.

  • By Ross Moody
  • Last update: Dec 22, 2022
  • Comments: 2

Welcome to Remix!

Development

From your terminal:

npm run dev

This starts your app in development mode, rebuilding assets on file changes.

Deployment

First, build your app for production:

npm run build

Then run the app in production mode:

npm start

Now you'll need to pick a host to deploy it to.

DIY

If you're familiar with deploying node applications, the built-in Remix app server is production-ready.

Make sure to deploy the output of remix build

  • build/
  • public/build/

Using a Template

When you ran npx create-remix@latest there were a few choices for hosting. You can run that again to create a new project, then copy over your app/ folder to the new project that's pre-configured for your target server.

cd ..
# create a new project, and pick a pre-configured host
npx create-remix@latest
cd my-new-remix-app
# remove the new project's app (not the old one!)
rm -rf app
# copy your app over
cp -R ../my-old-remix-app/app app

Github

https://github.com/rossmoody/stitches-remix

Comments(2)

  • 1

    Unable to get correct initial theme?

    Hey Ross,

    Were you able to get automatic detection of the users theme from the OS to work with this approach? I'm trying to apply your technique whilst deploying to Cloudflare Pages, so I'm not sure if that makes any difference or if there's something I should take into account because of this.

    I've been able to get the theme swapping to work using the button.

  • 2

    FART on very first request?

    Hi, I would like to ask if this solution you don’t have this problem that when a user comes to your site for the very first time, then he didn’t see FART. The sam should be the case using incognito mode on every new request.

    I have very similar solution to yours and I can’t get rid of that problem. On Remix discussion page I was told it can’t really work on that initial request.

    If I switch to Tailwind and CSS approach, then I get another error. This time regarding class missmatch between server and client.

    Such a simple feature like color scheme is so far the most advanced one I’ve worked on for my hobby project.

Popular Tag

Related