Gatsby.js starter with light/dark themes based on CSS variables (TypeScript)

Hello, all my dear JAMStack'ers! If you are opened this post you might be feeling as much excited as me when working with modern static website generators. They are becoming so powerful! And Gatsby.js is definitely somewhere at the top of the list now. It works on React.js, has a large ecosystem and pretty descriptive docs. So more and more devs are trying it out. If you're one of them, I have something for you! Today I'd like to share with you my fresh Gatsby.js starter.

What it includes:

• TypeScript support
• Light and Dark themes based on CSS variables (persisted state)
• Font Awesome
• Normalize.css
• Styling is done with CSS Modules
• SASS support (for both: global styles and CSS Modules)
• ESLint for linting TS

I made it simple and based on the default starter. Not much styling, nothing extra, all is in your hands...

How it looks like:

Live demo is available here:

gatsby-starter-typescript-themes.netlify.com

GitHub repository:

room-js / gatsby-starter-typescript-themes

Starter for Gatsby.js with TypeScript and light & dark themes

gatsby-starter-typescript-themes

A Gatsby starter based on the gatsby-starter-default with TypeScript support and Light/Dark themes based on CSS variables.

Includes

• TypeScript
• CSS Modules
• SASS (for both: global styles and CSS Modules)
• Light and Dark themes based on CSS variables.

Preview

How to use

1. Create a Gatsby site.

   Use the Gatsby CLI to create a new site, specifying the starter.

   # create a new Gatsby site using the starter
   gatsby new my-themed-starter https://github.com/room-js/gatsby-starter-typescript-themes

2. Start developing.

   Navigate into your new site’s directory and start it up.

   cd my-themed-starter/
   gatsby develop

3. Open the source code and start editing!

   Your site is now running at http://localhost:8000!

   Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

   Open the my-themed-starter directory in your code editor of choice and edit src/pages/index.js. Save…

View on GitHub

How to create a new project:

1. Install Gatsby CLI: npm install -g gatsby-cli
2. Create a new project from this starter: gatsby new my-themed-starter https://github.com/room-js/gatsby-starter-typescript-themes

---

Thank you for reading!
If you like the starter I kindly ask you to star the GitHub repo and like the post! Also, if you got any questions about it, please let me know in the comments.

Read JavaScript Room blog on Instagram: @room_js