My favorite extensions, themes, tips for a beautifully productive development environment Programs Programs I use on a daily basis Visual Studio Code Alfred 4 Insomnia TablePlus GraphQL IDE CleanMyMac VS Code Setup

Create a dynamic dark-mode theme in gatsby using redux, and styled components — Getting Starting In your Gatsby project run npm install --save react-redux redux styled-components Or yarn add redux react-redux styled-components Step 1. Create a new folder in your src/ directory called state Within this folder create the following files src/ └── state/ ├── reducers.js ├── actions.js └── ReduxWrapper.js

Setup First things first you’re going to need to install the styled-components node package. npm install — save styled-components The way I like to structure my files for something like this is to create a Theme.js file in my sr/ directory. Now we are able to start creating our Theme object. This will act like sass / scss / less variables and we will be able use them across all of our components. Usage

Simple Navbar Component using React, TypeScript, and styled-components. In this project we will create a simple little Navbar component that has a logo or brand name and features horizontal scrolling.

This will create a react-component Navbar that will be hidden when the user scrolls down and visible when the user scrolls up. Dependencies styled-components npm install styled-components --save In your App.js create the following constants; // App.js import Navbar from './Navbar'; const navlinks = [ { name: "Home", to: "/" }…