#MATERIAL UI DARK MODE SWITCH INSTALL#
Running npm start next starts your development server, and produces this in a new browser window:Īnd, finally, go ahead and install the use-local-storage package with: npm i use-local-storageĪnd that’s it for the initial setup of the project! Code setup
Not much to look at yet, but we’ll change that! I’m using VS Code for this example, and if you are too, then you can run these commands: cd easy-react-themesĬode. Now we’ll open up our brand new project in a code editor. I happen to like TypeScript but it genuinely makes no difference for this guide, other than files ending in. Swap out easy-react-themes with the name of your project, and feel free to leave off the -template typescript if you’d rather work in JavaScript. Then navigate to whatever folder you want your project to live in, run git bash there (or your preferred command line tool), then run: npx create-react-app easy-react-themes -template typescript This guide assumes a basic familiarity with CSS, JavaScript, and React.įirst, make sure you have a recent version of Node and npm installed. Let’s pick this up at a very good place to start: the beginning.
#MATERIAL UI DARK MODE SWITCH HOW TO#
And if you stick around to the end, I also show you how to integrate it with react-scoped-css, which is what makes this my absolutely preferred way to work with CSS in React. I’m going to walk through setting this thing up and running it, starting from a brand new React app. By combining that general CSS variable strategy with the beautiful useLocalStorage hook, we have a powerful, easy-to-use theming system. As they say in every infomercial ever, there’s got to be a better way!įortunately, there is. But that also relied on some useRef stuff that felt hack-y. The existing solution I liked the best centered around using CSS variables and data attributes, found in this StackOverflow answer. What I was looking for was a basic system that’s easy to set up and work with without jumping through a ton of hoops something fast, something easy to get a whole team of front-end and full-stack developers onboarded with quickly. I also found tools specific to certain frameworks, like Gatsby, but not a generic React project. There are plenty of different options out there, but many of them tie into very specific CSS strategies, like using CSS Modules, some form of CSS-in-JS, etc. With the huge ecosystem around React, you might think that there would be a go-to solution for style themes, but a little web searching shows that really isn’t the case. I was working on a large React application for a startup, and aside from just wanting some good strategies to keep our styles organized, I wanted to give this whole “dark mode” thing a shot.
0 kommentar(er)
