DEV Community: Nana K.

Setting Up Accessibility Features (Dark Mode) in Next JS (With TailwindCSS)

Nana K. — Wed, 06 Dec 2023 12:24:48 +0000

In my journey to incorporate the dark mode feature into Next.js, I vividly recall my initial attempt using a familiar approach from React—the useContext hook. Unfortunately, this method proved unsuccessful, leading me to an extensive exploration marked by numerous hours of trial and error. Despite facing challenges and encountering errors, persistence ultimately paid off as I uncovered the correct path to seamlessly integrate dark mode functionality into Next.js.

In this post, we'll walk through how to implement dark mode in a Next.js application using Tailwind CSS and the next-themes library.

Setting Up

To commence, ensure you have a Next.js application with Tailwind CSS configured. Fortunately, simplifying this process is the npx create-next-app@latest command, which conveniently sets up a Next.js app pre-configured with Tailwind. Execute this command to effortlessly initialize and set up your Next.js application.

Install `next-themes`

next-themes is:

An abstraction for themes in your Next.js app.

Implementing Dark Mode

Implementing dark mode in Next.js is effortlessly achieved through the dark variant in Tailwind CSS. Simply prefix properties with dark: to designate them for dark mode. For instance, utilizing dark:text-red-700 adjusts the text color to red-700 when the theme is switched to dark.

By default, Next.js aligns with system preferences for theme selection. Nevertheless, to seamlessly toggle between light and dark modes, configure the darkMode strategy to 'class' in the tailwind.config.js file:
darkMode: "class",

Setup your ThemeProvider

next-themes needs a ThemeProvider to manage themes in your project. You can either create a special component or wrap your main layout with the ThemeProvider component from next-themes to make it work.

Custom Component (Import this into your layout.tsx file):

"use client";
import * as React from "react";
import { ThemeProvider } from "next-themes";

type Props = {
  children?: React.ReactNode;
};

export function ThemeProvider({children}) {
  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      {children}
    </ThemeProvider>
  );
}

Using the Existing Component in your layout.tsx file:

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "My NextJS Web App",
  description: "Setting up Dark Mode in NextJS!",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

Set up some Global Styles:

Next, let's set up some global styles for things like background color and text appearance when switching modes. We'll handle this in our globals.css file.

@layer base {
  body {
    @apply dark:bg-[#0a0a0a] 
        bg-[#edf6f9];
  }
}

Ensuring your application is accessible in both light and dark modes is crucial. When selecting text and background colors, prioritize adequate contrast. You can evaluate your application's accessibility with tools such as the Accessibility Insights browser extension.

Add your ThemeToggle Component:

Now, we require a component for seamless theme switching. Utilizing the useTheme hook enables us to determine the current theme, and incorporating an onClick event facilitates state transitions. Initially, we establish our theme to align with the system theme.

"use client";
import React from "react";
import { useTheme } from "next-themes";
import { RiMoonLine, RiSunLine } from "react-icons/ri";

const DarkModeToggle = () => {
  const { theme, setTheme } = useTheme();
  return (
    <button
      onClick={() => (theme == "dark" ? setTheme("light") : setTheme("dark"))}>
      {theme === "light" ? (
        <RiMoonLine/>
      ) : (
        <RiSunLine/>
      )}
    </button>
  );
};

export default DarkModeToggle;

What's next

Import the ThemeToggle Component into your application, and you're all set! It's essential to note that to fully experience the capabilities of next-themes, you'll need to incorporate styles for dark mode by using the dark: prefix throughout your entire app. That concludes the setup!

Introduction to Web Animations with GSAP

Nana K. — Wed, 19 Apr 2023 20:33:56 +0000

GSAP, or GreenSock Animation Platform, is a powerful JavaScript animation library that is used by web developers and designers to create interactive and engaging websites. GSAP is known for its versatility, speed, and ease of use, making it a popular choice among developers worldwide.

Today, we're going to learn the basics of GSAP, and get our hands dirty with some animations.

Prerequisites

I recently asked a fellow developer for his secret in learning GSAP. "It's just CSS!", he said.
For one to get good at GSAP, a solid proficiency in CSS is needed. The stronger your CSS, the more complex animations you can make!
We will be doing this tutorial with React, and so a good knowledge of it will be needed as well.

Setting up GSAP in your React Project

Setting up GSAP in a React file involves a few steps, but it is a straightforward process.

1.Install GSAP into your React App:
This is done by running the npm install gsap from your terminal.

2.Import the GSAP Module:
In your React file where you want to use GSAP, import the gsap module at the top of the file:
import { gsap } from "gsap";

We will be making a really simple animation like the one shown below:

Building the Components:

This page has two components: A Navigation Bar and a large text.

Here's what the navigation bar looks like in react:

And the Large Text:

Adding GSAP

The next thing to do is to add your animations to your component. When working with GSAP, I discovered that GSAP can read and execute animations even when they're not written in the component being targeted. Cool right?

With that in mind, let's add our animations to our Large Text component. We'll do that in a useEffect Hook:

The first part animates the navigation bar by moving it from a position 30% off the top of the screen to its original position at the top of the screen over a duration of 1 second.

The second part animates the large text by moving it from a position 500 pixels below its original position to its original position over a duration of 1.8 seconds. The ease option is used to add a smoothing effect to the animation, making it look more natural.

The complete code is shown below:

Understanding the Animation: The GSAP Object

The gsap object is the main object provided by the GSAP library. It contains all of the methods and properties needed to create powerful animations such as gsap.to(), gsap.from(), and gsap.fromTo(), and is the primary way to interact with the GSAP library in your JavaScript code.

gsap.fromTo() is a method provided by the GSAP library that allows you to define the starting and ending states of an animation in a single call. This method is a convenient way to create more complex animations that require multiple changes to an element's properties.

The fromTo() method takes three arguments:

The target element(s) to animate, specified as a CSS selector or DOM element.
From our animation, our target elements are our navigation bar element with a class of ".navbar", and our large text, with a class of ".header".
An object defining the starting properties of the animation, which in our case would be:

{y:"-30vh"} for our navigation bar, and:
{y:500} for our large text.

An object defining the ending properties of the animation, which in our case would be:

{ y:0, duration:1,} for our navigation bar, and:
{ y: 0,ease: "power3.out"} for our large text.

gsap.timeline()

gsap.timeline() is a method provided by the GSAP library that creates a timeline instance for sequencing multiple animations. The timeline allows you to control the timing and sequencing of multiple animations as a group, and you can add, remove or adjust individual animations within the timeline.

Conclusion

GSAP is a powerful JavaScript library that enables web developers to create complex and engaging animations and interactions. It offers a range of animation tools and features, such as timeline controls and easing functions, and is easy to learn and use. Whether you're a beginner or an experienced developer, GSAP is a versatile and reliable animation library that can enhance the user experience of your web projects.