DEV Community

loading...
Cover image for Next.JS Undraw and TailWind Light/Dark theme tutorial

Next.JS Undraw and TailWind Light/Dark theme tutorial

Fernando Boza
Artist obsessed with design patterns and algorithms. Specialize in Python and Javascript web technologies.
・2 min read

In this quick tutorial i'll show my workflow on how I set up light/dark theme illustrations with UnDraw and TailWindCSS.

The concept can be applied with any SVG illustration kit and Style framework, Bootstrap, Foundation, etc

If you want to take a look at my code, you can find it here https://github.com/FernandoBoza/undraw-tailwind/blob/master/pages/index.js

You can follow along with the companion video

if you just want to learn how to toggle
in tailwind.config.js set darkMode prop to 'class'

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

from here in my app/index/xyz

import { useState } from "react";

export default function Home() {
  const [theme, setTheme] = useState("");

  return (
    <div className={` ${theme}`}>
     // ...children
     // <p className="dark:text-blue-100 text-gray-800">

        <button
          onClick={() =>
            setTheme((prev) => !prev ? "dark" : ""
          )}>
          Toggle dark mode
        </button>
    </div>
Enter fullscreen mode Exit fullscreen mode

I start in UnDraw, I download my illustration my of choice, and bring it in https://react-svgr.com.

This site, transforms the html attributes that conflict with JSX.

from the 2 panel screen, ill copy my modified code from the right, and in NextJS paste my SVG illustration wherever I want.

From here the key is in any browser inspect tool to grab the primary color of the illustration,

<svg fill="#fff">

//from fill to
//fill-current followed by the bg color of your choice
<svg className="fill-current background-blue-100">
Enter fullscreen mode Exit fullscreen mode

With this simple principle I can go through my code with Find and Replace for my primary color and modify them to hold my TailWind Colors

fill="#333" => className="fill-current dark:background-gray-700 background-gray-100"

Discussion (0)