Themes within themes with React, TypeScript, and Styled Components ✨

Themes within themes with React, TypeScript, and Styled Components ✨

How do you structure an app with multiple themes? What if these themes are inside another theme? A recent project came with some big challenges. The client wanted a demo experience that would display a range of different websites within a branded ‘container’.

A recent project came with some big challenges. The client wanted a demo experience that would display a range of different websites within a branded ‘container’. These demo websites would be interactive within a mock desktop or mobile device, each with its own individual theme. In this article, I will dive deeper into:

  1. How we set up the project files
  2. Theming using Styled Components

This was challenging enough, but on top of this, we needed to give the user the ability to toggle between the mocked ‘desktop’ display and ‘mobile’ display modes, all within this static container, without using media queries. I will address this challenge in a follow up article.

Here are two illustrations of what we produced:

Mockup design with mobile site demo in the centre

Mobile view

Desktop View

How many themes do we need? 💭

The first step here was figuring out how many themes we were going to need, and secondly, how to set up these themes. It was crucial that we set this up correctly from the beginning, to save us a lot of grief in the long run.

  1. Here we need one theme for the static container, which will stay the same regardless of the active demo. This is going to have a branded dark theme to match the Client’s style guide.
  2. We also need one theme per ‘demo’, which will change depending on which demo is active. So three demos would mean three more themes, etc.

programming typescript javascript styled-components react

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Guide to an auto light theme in React with styled-components and typescript

Making the night dark on the web! I am pretty sure that a lot of people, including me, are huge fans of color theming. Although every single device that I own is set to the dark mode I love that feeling of being able to choose rather than being forced to use that bright white theme at the 3:48 AM day before the release.

How to Build Trello Board with React, TypeScript & Styled-components

Have you ever wanted to build Trello-like drag & drop board? This tutorial will show you how to do it using React, TypeScript & styled-components.

Creating React Components with Styling with the styled-components Package

This package makes creating styled components quick and easy.

How to Migrate a React Component from JavaScript to TypeScript

Learn how to easily migrate a React component from JavaScript to TypeScript to improve your project. When migrating over to TypeScript, one basic thing to keep in mind is TypeScript files have a .ts extension instead of .js. Another thing to keep in mind that makes migrating over a breeze is that you can configure your TypeScript compiler to allow JavaScript files.