Home
Muzammil Riaz
Todo List with Dark theme

Todo List with Dark theme

This tailwind example is contributed by Muzammil Riaz, on 28-May-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example is find

Search Bar Other List

Author Muzammil Riaz

747

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" class="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo App</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: {
                            light: '#4f46e5',
                            dark: '#6366f1'
                        }
                    }
                }
            }
        }
    </script>
    <style>
        [type="checkbox"]:checked + label {
            text-decoration: line-through;
            opacity: 0.7;
        }
    </style>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-100 min-h-screen transition-colors duration-200">
    <div class="container mx-auto px-4 py-8 max-w-md">
        
        <header class="flex justify-between items-center mb-8">
            <h1 class="text-2xl font-bold text-primary-light dark:text-primary-dark">Todo App</h1>
            <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">
                <svg id="theme-icon-light" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
                </svg>
                <svg id="theme-icon-dark" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 hidden" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
                </svg>
            </button>
        </header>

<form id="todo-form" class="mb-6 flex gap-2">
            <input 
                type="text" 
                id="todo-input" 
                placeholder="Add a new task..." 
                class="flex-1 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-primary-light dark:focus:ring-primary-dark"
                required
            >
            <button 
                type="submit" 
                class="px-4 py-2 bg-primary-light dark:bg-primary-dark text-white rounded-lg hover:opacity-90 transition-opacity"
            >
                Add
            </button>
        </form>

<div id="todo-list" class="space-y-2">
            
            <div class="text-center py-4 text-gray-500 dark:text-gray-400">
                No tasks yet. Add one above!
            </div>
        </div>

<div class="mt-6 text-sm text-gray-500 dark:text-gray-400 flex justify-between">
            <span id="total-count">0 items</span>
            <button id="clear-completed" class="hover:text-primary-light dark:hover:text-primary-dark">Clear completed</button>
        </div>
    </div>

const savedTheme = localStorage.getItem('theme') || 
                            (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
            
            if (savedTheme === 'dark') {
                html.classList.add('dark');
                themeIconLight.classList.add('hidden');
                themeIconDark.classList.remove('hidden');
            }

themeToggle.addEventListener('click', function() {
                html.classList.toggle('dark');
                
                if (html.classList.contains('dark')) {
                    localStorage.setItem('theme', 'dark');
                    themeIconLight.classList.add('hidden');
                    themeIconDark.classList.remove('hidden');
                } else {
                    localStorage.setItem('theme', 'light');
                    themeIconLight.classList.remove('hidden');
                    themeIconDark.classList.add('hidden');
                }
            });

// Todo App Functionality
            const todoForm = document.getElementById('todo-form');
            const todoInput = document.getElementById('todo-input');
            const todoList = document.getElementById('todo-list');
            const totalCount = document.getElementById('total-count');
            const clearCompleted = document.getElementById('clear-completed');

let todos = JSON.parse(localStorage.getItem('todos')) || [];

function renderTodos() {
                if (todos.length === 0) {
                    todoList.innerHTML = '<div class="text-center py-4 text-gray-500 dark:text-gray-400">No tasks yet. Add one above!</div>';
                    totalCount.textContent = '0 items';
                    return;
                }

todoList.innerHTML = '';
                let completedCount = 0;

todos.forEach((todo, index) => {
                    if (todo.completed) completedCount++;

const checkbox = todoItem.querySelector(`#todo-${index}`);
                    checkbox.addEventListener('change', () => {
                        todos[index].completed = checkbox.checked;
                        saveTodos();
                        renderTodos();
                    });

const deleteBtn = todoItem.querySelector('button[data-index]');
                    deleteBtn.addEventListener('click', () => {
                        todos.splice(index, 1);
                        saveTodos();
                        renderTodos();
                    });

todoList.appendChild(todoItem);
                });

totalCount.textContent = `${todos.length} ${todos.length === 1 ? 'item' : 'items'}`;
            }

function saveTodos() {
                localStorage.setItem('todos', JSON.stringify(todos));
            }

todoForm.addEventListener('submit', (e) => {
                e.preventDefault();
                const text = todoInput.value.trim();
                if (text) {
                    todos.push({ text, completed: false });
                    saveTodos();
                    renderTodos();
                    todoInput.value = '';
                }
            });

clearCompleted.addEventListener('click', () => {
                todos = todos.filter(todo => !todo.completed);
                saveTodos();
                renderTodos();
            });

renderTodos();
        });
    </script>
</body>
</html>

Related Examples

Organization Hierarchy list

Author:
Anonymous

2 years ago

8.2k
Table
Table with image and status with pagination buttons

Author:
Abhiraj

10 months ago

2.1k
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

7 months ago

1.6k
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

975
Content Discovery Platform with Search & Filter
A modern, responsive web application built with Tailwind CSS that showcases content cards with search and filter functionality.

Author:
Sufyan jutt

1 week ago

53
SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

687
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Author:
Rathanak Phan

4 months ago

765
List of links

Author:
Prajwal Hallale

2 years ago

10.2k
Download App Buttons
Ready-to-use Apple App Store and Google Play Store download buttons with official branding and styling

Author:
Musawer Shah

2 weeks ago

150
free tailwind resume template
free tailwind resume template

Author:
Geoffrey Callaghan

1 year ago

3.7k
Features list

Author:
Leon Bachmann

2 years ago

10.9k
Privacy Policy Page Template

Author:
Anonymous

10 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components