Create Multiple Themes Using Tailwind CSS

Many modern web apps require different themes, like light and dark modes, to enhance a user's experience. However, setting up and changing themes with Tailwind CSS can be confusing for developers. This article offers easy and effective methods to create and manage multiple themes with Tailwind CSS.

Approaches to Create Multiple Themes

Extending Tailwind Configuration for Themes

You can make different themes in Tailwind CSS by changing the Tailwind configuration file (tailwind.config.js). This lets you set up your own colors, fonts, and styles for each theme. For example:

tailwind.config.js

module.exports = {
    theme: {
      extend: {
        colors: {
          // Light theme colors
          light: {
            background: '#ffffff',
            text: '#000000',
          },
          // Dark theme colors
          dark: {
            background: '#000000',
            text: '#ffffff',
          },
          blue: {
            background: '#22d3ee',
            text: '#fef08a',
          }
        },
      },
    },
    variants: {},
    plugins: [],
  }

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="path/to/tailwind.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css"> 
    <!-- Link to your custom CSS -->
    <title>Tailwind CSS Themes</title>
</head>
<body class="bg-light-background text-light-text 
             transition-colors duration-300">
    <div class="container mx-auto p-4">
        <button id="theme-toggle" 
                class="p-2 bg-light-primary 
                       text-light-text rounded">
            Toggle Theme
        </button>
        <div class="mt-4">
            <h1 class="text-2xl">
                Welcome to Tutorialspoint</h1>
            <p>This is a simple example of using Tailwind CSS to create themes.</p>
        </div>
    </div>
    <script>
        const toggleButton = document.getElementById('theme-toggle');
        toggleButton.addEventListener('click', () => {
            document.body.classList.toggle('bg-light-background');
            document.body.classList.toggle('text-light-text');
            document.body.classList.toggle('bg-dark-background');
            document.body.classList.toggle('text-dark-text');
        });
    </script>
</body>
</html>

Output

theme Output

Using CSS Variables

Using CSS variables in Tailwind CSS allows you to easily create multiple themes, like light and dark. You define color and style variables in your CSS, then apply them in your Tailwind classes.

Example

<!DOCTYPE html>
<html lang="en">
<head>
      <script src="https://cdn.tailwindcss.com"></script>
    <title>Multiple Themes with Tailwind CSS</title>
    <style>
        :root {
            --bg-color: #ffffff; /* Light background */
            --text-color: #000000; /* Light text color */
            --primary-color: #3b82f6; /* Light primary color */
        }

        .dark-theme {
            --bg-color: #1f2937; /* Dark background */
            --text-color: #ffffff; /* Dark text color */
            --primary-color: #4b5563; /* Dark primary color */
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .btn {
            background-color: var(--primary-color);
            color: var(--text-color);
        }
    </style>
</head>
<body class="p-4">
    <button id="theme-toggle" 
            class="btn p-2 rounded">
        Toggle Theme
    </button>
    <div class="mt-4">
        <h1 class="text-2xl">
            Welcome to Tailwind CSS Themes
        </h1>
        <p>This is a simple example of using CSS variables 
            to create themes.
          </p>
    </div>
    <script>
        const toggleButton = document.getElementById('theme-toggle');
        toggleButton.addEventListener('click', () => {
            document.body.classList.toggle('dark-theme');
        });
    </script>
</body>
</html>

Output

theme Output
Updated on: 2024-12-06T10:20:47+05:30

47 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements