Next.JS Undraw and TailWind Light/Dark theme tutorial

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: [],
}

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>

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">

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"