![]() We’ll first import ThemeProvider like so: Then, let’s install Theme UI with its relevant dependencies by entering the following command in the root folder of our project:Īfter it’s installed, go into the index.js file in our src folder and wrap our React app with Theme UI. After our project is created, let’s cd into it by entering: Let’s start with scaffolding a React application by entering the following command into our terminal: In this tutorial, we’ll be working with ReactJS. Now, without further ado, let’s start creating our app! Creating our React app The sweet thing about Theme UI in my opinion - and the main reason for this tutorial - is its powerful sx prop and native hooks that can handle color changes seamlessly. In other words, it’s a component library similar to ones familiar to most devs, such as Bootstrap, Chakra UI, and others. Custom component libraries, web apps, Gatsby themes, design systems, and more can be built using this tool. Theme UI is a library that can be used to create themeable UIs using constraint-based design principles. This is the final version of what we’re going to build: Light mode ![]() There will also be a portion of blue-colored text under the card, and when we switch modes via clicking a button, the card text and the title will change into dark mode while this blue text will turn to green to demonstrate the contrast we can achieve. What we will create will be a simple card that has a text component and a title. ![]() In this article, we will build a React app that can be transitioned from light to dark mode using Theme UI. Also, just from a technical point of view, it shows that the team was considerate enough to go for an extra mile for the user experience, which is such a crucial aspect of attracting and retaining users today. So, it shouldn’t come as too much of a surprise to us devs that users increasingly want that option for their apps. I myself set to dark mode whenever I see it applicable in an app it looks sleek, is easy on the eyes, and if I don’t like it, I can always switch back to the lighter version. After all, it is not only developers now who might prefer to look at darker colors, but users too want to have to ability to choose between light and dark themes. Transitioning a React app between light and dark mode in CSS with Theme UIīeing able to transition our React apps between light and dark mode has become something of a necessity in today’s world and tools like Theme UI can help us achieve it. Murat Yüksel Follow Full stack web developer specializing in MERN stack and blockchain development with Solidity and experienced in technical writing.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |