Blog post

Enhancing UX/UI and Accessibility: Embracing Dark Mode on Your Website

In recent years, dark mode has emerged as a popular feature across various digital platforms, providing users with a visually appealing and functional alternative to traditional light themes. From enhancing user experience (UX) and user interface (UI) to improving accessibility, incorporating dark mode capabilities into your website can offer numerous benefits.

Enhancing User Experience (UX) and User Interface (UI)

1. Reduced Eye Strain: Dark mode reduces the amount of blue light emitted by screens, which can help reduce eye strain, particularly during extended periods of screen time. This makes it more comfortable for users to browse your website, leading to increased engagement and retention.
2. Improved Readability: Dark mode often utilizes lighter text colors, which contrast well with darker backgrounds, enhancing readability, especially in low-light environments. Users can browse content more comfortably without experiencing glare or discomfort.
3. Visual Appeal: Dark mode offers a sleek and modern aesthetic that appeals to many users. It can provide a fresh look to your website, making it stand out and leaving a memorable impression on visitors.
4. Focus on Content: By minimizing distractions and emphasizing content, dark mode allows users to focus more on the information presented on your website. This can lead to a more immersive browsing experience, encouraging users to explore your content further.

Accessibility Considerations

1. Increased Accessibility: Dark mode can improve accessibility for users with visual impairments or sensitivity to bright lights. By offering an alternative color scheme, you make your website more inclusive and accessible to a wider range of users.
2. Customization Options: Providing dark mode as an option allows users to customize their browsing experience based on their preferences and needs. This flexibility promotes inclusivity and ensures that all users can interact with your website comfortably.
3. Compliance with Accessibility Standards: Incorporating dark mode features aligns with accessibility standards and guidelines, such as Web Content Accessibility Guidelines (WCAG). By prioritizing accessibility, you demonstrate a commitment to providing equal access to information for all users.

I'm now going to take you through the steps to getting Shadcn installed with a Dark mode button with Next.js.

How to install with Next.js

So let's get into the crux of it, how to install lottie files with Next.js, we will go through the steps from start to finish and get you started with your first lottie animations.

I would suggest using visual studio code as your coding IDE and also make sure you have the latest version of node installed

Step 1. Install Next.js

Inside Visual Studio code open up your terminal and type the command below to install Next.js

npx create-next-app@latest

The terminal will give you some prompts in order to enable features such as Tailwind CSS and TypeScript. Below are the settings I used for this example.

√ What is your project named? ... lottie-animation
√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... Yes
√ Would you like to use "src/" directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias (@/*)? ... No"

Now, let's navigate to the folder where we'll be working. You can do this by either going to 'File' > 'Open Folder' and selecting the project we're working on, or you can use the following commands to navigate to the folder:

cd lottie-animation

Now, let's install the npm packages we need

npm install

Step 2. Install Shadcn

You'll need to run the NPM command to install Shadcn

npx shadcn-ui@latest init

You will be asked some questions about the installation, here are the settings I used:

Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Do you want to use CSS variables for colors? ›  yes

Step 3. Let's add a dark mode toggle

We are now going to set up dark mode themes

npm install next-themes

Let's install all the dependancies

npx shadcn-ui@latest add dropdown-menu && npx shadcn-ui@latest add button && npm i @radix-ui/react-icons

We are now going to create a theme provider document add it here: components/theme-provider.tsx

"use client"
 
import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import { type ThemeProviderProps } from "next-themes/dist/types"
 
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

Once that's done we need to wrap the ThemeProvider to our root layout, add it here: app/layout.tsx

import { ThemeProvider } from "@/components/theme-provider"
 
export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <>
      <html lang="en" suppressHydrationWarning>
        <head />
        <body>
          <ThemeProvider
            attribute="class"
            defaultTheme="system"
            enableSystem
            disableTransitionOnChange
          >
            {children}
          </ThemeProvider>
        </body>
      </html>
    </>
  )
}

Next let's create a toggle component I put the file here: components/ui/toggle-mode.tsx

"use client"
 
import * as React from "react"
import { MoonIcon, SunIcon } from "@radix-ui/react-icons"
import { useTheme } from "next-themes"
 
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
 
export function ModeToggle() {
  const { setTheme } = useTheme()
 
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon">
          <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>
          Light
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>
          Dark
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>
          System
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Finally we can now add a Toggle button to any page I put mine in my app/page.tsx

import { ModeToggle } from "@/components/ui/toggle-mode";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <ModeToggle />
    </main>
  );
}

Step 4. Let's run the application

If all went well we can now run the command to start the server

npm run dev

Success you have now implimented your Dark mode component! it should look like the toggle button above and the beauty is it will automatically adjust all the colours on your page. For more components please visit the Shadcn documentation location here