StackBits

Buttons

Animated Gradient Button

Copy Button

Hold Button

Toggle Button

Moving Border Button

Navigation Button

Pagination Button

Random Button

Shine Button

Backgrounds

Glowing Dots Background

Prismatic Haze Background

Proximity Background

Space Travel

Wavy Background

Texts

Blur Text

Bounce In Text

Dotted Text

Glitch Text

Gooey Words

Hidden Text

Pixelated Text

Rainbow Text

Sentence Flip

Wavy Text

Utilities

Axios Interceptor

Custom Logger

Dark & Light Theme

Debounce

Encryption Decryption

Express Server

Regex Validations

Yup Validations

Dark & Light Theme

Easily set up dark and light mode in your TailwindCSS project with a ready-to-use theme config template and a toggle function. Just copy, paste, and customize to define your color scheme, and switch themes effortlessly with the provided function—no extra setup needed!

Install dependencies

npm i tailwindcss

Dual Theme TailwindCSS Config Template

You can use this Tailwind CSS dual-theme template for your project, customize it with your own color schemes, and even create utility classes that adapt to both light and dark modes.

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: ['class'],
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}'
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          light: '#60d666', // ? Green for Light Mode
          dark: '#66BB6A' // ? Lighter Green for Dark Mode
        },
        secondary: {
          light: '#448AFF', // ? Bright Blue for Light Mode
          dark: '#2979FF' // ? Deep Blue for Dark Mode
        },
        background: {
          light: '#f2f2f2', // ? White for Light Mode
          dark: '#121212' // ? Dark Gray for Dark Mode
        },
        text: {
          light: '#000000', // ? Dark Gray for Light Mode
          dark: '#fdfdfd' // ? Light Gray for Dark Mode
        },
        header: {
          light: '#e8e8e8', // ? Light Gray for Header
          dark: '#1F1F1F' // ? Deep Gray for Header
        },
      },
    }
  },
  class: 'dark',
  plugins: [
    function ({ addComponents }) {
      addComponents({
        // ? You can define more classes here that would work for both light and dark modes 
        '.bg-primary': {
          '@apply bg-primary-light text-text-light transition-all': {},
          '.dark &': {
            '@apply bg-primary-dark text-text-dark transition-all': {}
          }
        },
        '.bg-secondary': {
          '@apply bg-secondary-light text-white transition-all': {},
          '.dark &': {
            '@apply bg-secondary-dark transition-all': {}
          }
        },
        '.text-primary': {
          '@apply text-primary-dark transition-all': {},
          '.dark &': {
            '@apply text-primary-light transition-all': {}
          }
        },
      });
    }
  ]
};

How to toggle between light and dark mode?

You can use the following code to toggle between light and dark mode.

const toggleDarkMode = () => {
  document.documentElement.classList.toggle('dark');
}

💡 Pro tip: Store the value of current theme in localStorage for better user experience.