DEV Community: Thinh Nguyen

Adding a Dark Theme to Next.js with Stitches

Thinh Nguyen — Mon, 14 Mar 2022 02:59:48 +0000

If you enjoy writing performant CSS with styled-components and need type-safety from Typescript when interfacing with design tokens then Stitches might be the solution right up your alley.

Stitches is a CSS-in-JS library that provides awesome DX and support for SSR frameworks like Next.js out of the box. In this tutorial, we will use Stitches to add a basic dark theme to a Next.js app with Typescript.

Initial Setup

Setting up Stitches with Next.js is easy and it works even better with the Typescript example from Vercel.

yarn create next-app --typescript nextjs-stitches-dark-theme

//then followed by
yarn add @stitches/react

Now we can create a config file that will export all of our API functions from the library, this can be created anywhere in your project, such as the root.

// stitches.config.ts
import { createStitches } from "@stitches/react";

export const { 
  styled, 
  getCssText, 
  createTheme, 
  globalCss 
} = createStitches({ 
  theme: {
    /* ... other tokens */
    colors: {
      text: "black",
      background: "white",
    }
  }
 });

// define the dark theme using the de-constructed function
export const darkTheme = createTheme({ 
  colors: { 
    text: "white",
    background: "black"
  } 
});

For a basic dark theme, we would want to use these theme tokens at a global level in the CSS specification, so we can use the globalCss function in the same config file to declare these styles.

// stitches.config.ts

/* ...previous code */

const GlobalStyles = globalCss({
  body: {
    //we can call the color token values with the
    //$ prefix in a string
    background: "$background", 
    color: "$text"
  }
})

//we can declare the styles here or in pages/_app.tsx
GlobalStyles();

While that is all for configuring Stitches, you might be wondering where is the ThemeProvider that most CSS-in-JS libraries like emotion or styled-components provides. Actually, a basic installation of Stitches does not need it, you can start using the styled function by exporting it from this config file and start styling components.

Creating a Theme Toggle

But for managing multiple themes, it is highly recommended to install an additional packaged called next-themes which will allow us to toggle between themes and override the theme-specific tokens, such as colours in this case.

yarn install next-themes

After adding the package, we can add the familiar theme provider component into our Next.js application.

// pages/_app.tsx
import type { AppProps } from "next/app";
import { ThemeProvider } from "next-themes";
import { darkTheme } from "../stitches.config";

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider
      attribute="class"
      defaultTheme="system"
      value={{
        light: "light",
        dark: darkTheme.className
      }}
    >
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

And now we can create a toggle button to switch between the themes with the useTheme hook from next-themes;

// pages/index.tsx
import { styled } from "../stitches.config";
import { useTheme } from "next-themes";

const Button = styled("button", {});

export default function IndexPage() {
  const { theme, setTheme } = useTheme();
  const toggleTheme = () =>
    setTheme(theme === "light" ? "dark" : "light");

  return (
    <div>
      <h1>The current theme is {theme === "dark" ? "dark" : "light"}</h1>
      <Button onClick={toggleTheme}>Change Theme</Button>
    </div>
  );
}

And that is pretty much everything we need to have a dark mode theme with Stitches! 🎉

Additional Notes

Theming with Stitches, especially with a dark theme, requires a bit of forethought into the selection of the colour tokens since we would need to define our palettes with the same key name i.e. text is the same colour token key, but has a different value in the light and dark theme.

Luckily, the wonderful folks over at Modulz also provide a variety of colour palettes to choose from through their Radix-UI/colors package.

If this tutorial with Stitches suits your theming needs, then feel free to check out the full Codesandbox below:

Happy theming! ✨

How to Initialize a Firebase app in the new modular Web SDK in Next.js

Thinh Nguyen — Fri, 22 Oct 2021 00:44:47 +0000

Previously in Version 8

Most devs migrating to the new modular approach for delivering the firebase API typically have this code snippet that initializes their firebase app.

We'll start off by exporting the most basic service, being firebase/auth.

//initFirebase.ts
require("firebase/auth");

import firebase from "firebase/app";

const config = {
  // ...various env variables
};

export default function initializeFirebase() { 
  if (firebase.apps.length === 0) {
    return firebase.initializeApp(config);
  }
}

export const firebaseAuth = firebase.auth;

Now in V9

In the latest version, we can re-factor the snippet into something like this:

// initFirebase.ts

import { FirebaseOptions, getApp, initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const config: FirebaseOptions = {
  // ...various env variables
};

function createFirebaseApp(config: FirebaseOptions) {
  try {
    return getApp();
  } catch {
    return initializeApp(config);
  }
}

const firebaseApp = createFirebaseApp(firebaseConfig);
export const firebaseAuth = getAuth(firebaseApp);

Bonus: Initialize the latest Admin SDK version 10 for API routes

Similarly for the admin SDK, we create a similar function, but we also handle a check against the number of apps being initialized.

// initFirebaseAdmin.ts

import {
  AppOptions,
  cert,
  getApp,
  getApps,
  initializeApp,
  ServiceAccount,
} from "firebase-admin/app";
import { getAuth } from "firebase-admin/auth";

const credentials: ServiceAccount = {
  projectId: process.env.projectID,
  privateKey: process.env.privateKey.replace(/\\n/g, "\n"),
  clientEmail: process.env.clientEmail,
};

const options: AppOptions = {
  credential: cert(credentials),
  databaseURL: process.env.databaseURL,
};

function createFirebaseAdminApp(config: AppOptions) {
  if (getApps().length === 0) {
    return initializeApp(config);
  } else {
    return getApp();
  }
}

const firebaseAdmin = createFirebaseAdminApp(options);
export const adminAuth = getAuth(firebaseAdmin);

Now we can make use of adminAuth in any API route handler to manage authenticated users.

And that's really it!

Make your own Snackbars using React + Redux and Styled-Components

Thinh Nguyen — Fri, 26 Feb 2021 23:27:50 +0000

What is it? 🤔

A Snackbar is a UI component that provides the user visual feedback on an event within the app without interrupting the user experience. This is typically shown as a message box that informs the user of an action being performed or that will be performed by the app.

Snackbars typically behave in the following manner:

They provide information about an app process via text.
They will disappear on their own after a certain time.
They should not interrupt the user from anything else.

That being said, let's get started with a fresh create-react-app.

Setting Up The Redux Store 💾

For now, we'll create a simply button in our App component to trigger the Snackbar via react-redux. The setup for the redux store is very straightforward, with all the actions and reducers in the same redux folder as follows.



/* ---- redux/actions.js ---- */

export const toggleSnackbarOpen = (message) => ({
  type: "TOGGLE_SNACKBAR_OPEN",
  message,
});

export const toggleSnackbarClose = () => ({
  type: "TOGGLE_SNACKBAR_CLOSE",
});

For now, we just want to be able to pass a message in our dispatch to be rendered in the Snackbar, other parameters can also be added such as a timer or even the variation of snackbar being rendered i.e. success, warning, or informative, but for now we'll stick with the basics.



/* ---- redux/reducers.js ---- */

const initialState = {
  toggleSnackbar: false,
  snackbarMessage: null,
};

export default function reducer(state = initialState, action) {
  switch (action.type) {
    case "TOGGLE_SNACKBAR_OPEN": {
      return {
        ...state,
        toggleSnackbar: true,
        snackbarMessage: action.message,
      };
    }

    case "TOGGLE_SNACKBAR_CLOSE": {
      return {
        ...state,
        toggleSnackbar: false,
        snackbarMessage: null,
      };
    }

    default: {
      return state;
    }
  }
}

In our reducers' initial state we would need a message and the boolean state of the Snackbar. We can also include different states for different types of messages like warningMessage for a toggleWarningSnackbar state.



/* ---- redux/store.js ---- */

import { createStore } from "redux";
import reducer from "./reducers";

const config =
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();

export default function configureStore(initialState) {
  const store = createStore(reducer, initialState, config);
  return store;
}

And of course, we create the redux store and configure it, and then we connect the store to the App with the Provider as follows:



/* ---- index.js ---- */

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

import { Provider } from "react-redux";
import configureStore from "./redux/store";

const store = configureStore();

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

The Snackbar Component 🍫

For this example, we only want our Snackbar to display a message and fade itself away after an event is fired, but it will also allow the user to dismiss the Snackbar altogether. We will also add a timeout variable as a prop to this component to define when the notification will disappear.



import React, { useEffect } from "react";
import styled, { keyframes } from "styled-components";
import { useDispatch, useSelector } from "react-redux";
import { toggleSnackbarClose } from "../redux/actions";
import { FiX } from "react-icons/fi";

const Snackbar = ({ timeout }) => {
  const dispatch = useDispatch();

  // select the UI states from the redux store
  const SHOW = useSelector((state) => state.toggleSnackbar);
  const MESSAGE = useSelector((state) => state.snackbarMessage);

  // convert the timeout prop to pass into the styled component
  let TIME = (timeout - 500) / 1000 + "s";

  let TIMER;
  function handleTimeout() {
    TIMER = setTimeout(() => {
      dispatch(toggleSnackbarClose());
    }, timeout);
  }

  function handleClose() {
    clearTimeout(TIMER);
    dispatch(toggleSnackbarClose());
  }

  useEffect(() => {
    if (SHOW) {
      handleTimeout();
    }
    return () => {
      clearTimeout(TIMER);
    };
  }, [SHOW, TIMER]);

  return (
    SHOW && (
      <Container time={TIME}>
        <p>{MESSAGE}</p>
        <Button onClick={handleClose}>
          <FiX />
        </Button>
      </Container>
    )
  );
};

const fadein = keyframes`
    from {
      bottom: 0;
      opacity: 0;
    }
    to {
      bottom: 1rem;
      opacity: 1;
    }
`;

const fadeout = keyframes`
    from {
      bottom: 1rem;
      opacity: 1;
    }
    to {
      bottom: 0;
      opacity: 0;
    }
`;

const Container = styled.div`
  position: fixed;
  z-index: 1000;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  height: auto;
  padding: 0.625rem 1rem;
  border-radius: 0.75rem;
  border: transparent;
  background-color: hsl(200, 100%, 65%);
  color: white;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);

  display: flex;
  justify-content: center;
  align-items: center;

  animation: ${fadein} 0.5s, ${fadeout} 0.5s ${(props) => props.time};
`;

const Button = styled.button`
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 0.875rem;
  padding: 0;
  margin-left: 1rem;
  height: 1.75rem;
  width: 1.75rem;
  text-align: center;
  border: none;
  border-radius: 50%;
  background-color: transparent;
  color: white;
  cursor: pointer;

  &:hover {
    background-color: hsl(200, 100%, 60%);
  }
`;

export default Snackbar;

To make the Snackbar disappear on its own once toggled we use setTimeout to trigger another dispatch to close the Snackbar according to the value of the timeout prop. You will notice that 0.5s was shaved off to the TIME variable to allow our nice fadeOut animation to take place, when it is passed as a prop to our Container component. Note that the keyframes animations must take precedence before being called into the animation CSS property

Additionally, we have another button within the Snackbar that displays alongside the message that can close the Snackbar.

The App 🖥️

With reusability in mind, we want to be able to activate the Snackbar just by simply importing its component and its action dispatcher to any view.



/* ---- App.js ---- */

import React from "react";
import GlobalStyles from "./components/GlobalStyles";
import styled from "styled-components";
import Snackbar from "./components/Snackbar";
import { useDispatch, useSelector } from "react-redux";
import { toggleSnackbarOpen } from "./store/actions";

const App = () => {
  const dispatch = useDispatch();

  return (
    <>
      <GlobalStyles />
      <Wrapper>
        <Button
          onClick={() => {
            dispatch(toggleSnackbarOpen("I'm a Snackbar!"));
          }}
        >
          Click Me!
        </Button>
        <Snackbar timeout={3000} />
      </Wrapper>
    </>
  );
};

const Wrapper = styled.div`
  height: 100vh;
  background: #fffc;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const Button = styled.button`
  padding: 0.5rem 1rem;
  font-size: 1.3rem;
  border-radius: 0.5rem;
  outline: none;
  border: none;
  background: lightblue;
  cursor: pointer;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);

  &:hover {
    background: lightgoldenrodyellow;
  }
`;

export default App;

And just like that, we have a working (albeit basic) Snackbar that can be re-used in any other component! The code shown so far can also be viewed in this Code Sandbox snippet:

✨ But Wait, There's More! ✨

There are a lot of cool features to add in a Snackbar, such as its anchoring position or having Snackbar variations, for the full specifications, you should definitely check out Material Design's page here.

If you are interested in adding some of those features, please feel free to check out my take on this over here:

g-thinh / simple-snackbar

Re-created Material UI's snackbar component

Happy Coding 😊

How I Started My Dev Journey

Thinh Nguyen — Sun, 10 Jan 2021 15:04:13 +0000

It's Okay To Skip The "Hello World" Part

In the summer of 2019, I was a little over a year into my first job fresh out of university working late at night as an analyst for a call center. I had no idea what career to pursue or what I could accomplish when I came across a few lines of python code that my predecessor had left behind on our shared drive meant to compile some spreadsheet data. Intrigued, I opened up a notepad...

From that point on, every spare minute I had from my usual job was dedicated to re-compiling the same lines over and over, making adjustments as I went. I even remember spending my commutes googling for better code, better libraries, and most importantly better themes for my IDE. Before I knew it, a month had passed and I had turned that itty bit of terminal code into its own application (with a bit of GUI here and there!).

Having little to no knowledge of object-oriented programming, it was a painstaking start to say the least, but one of the most enjoyable work experience I've had. Ultimately that summer was not where it all began for me.

Taking The Leap

By early 2020 I was still working the same job, albeit with a bit more sunlight, and my app's codebase had grown slightly fatter. I was always eager to add small additions or fix some bugs, but the satisfaction wouldn't last that long until I came across an opportunity to enroll into a coding bootcamp in web development in the summer.

I was hesitant at first, thinking that I had already missed my chance to start a career as a software developer back when my options were more open years earlier. I wondered if my short lived experience the summer before was enough to make me believe it could work out.

It took the encouragement of good friends and my own impulse to make the decision to start learning again, but it would be one that I would not regret. I was not the only person in my corner of the world that wanted to have a major career change or learn a new set of skills. Having met the people in my bootcamp truly hardened my belief that it's never really too late to start coding. So we learned, we grew, we laughed, and we were well on our way to something new.

Am I There Yet?

Fast forward 6 months later, having spent the better part of my nights studying and debugging during the pandemic, I emerged as a full-stack web developer, eager to start my first job. I now spend most of my days immersing myself with my coding projects and following blogs made by amazing devs who are still learning and growing.

I still have long road ahead of me, but I remain thankful to my instructors and friends I've met along the way for always reminding me that this journey is still far from over.

For my personal dev roadmap in early 2021, I plan on writing more articles on creating UI components using React!