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"
Top comments (0)