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

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

1 year ago

7.7k
Table
Table with image and status with pagination buttons

Author:
Abhiraj

6 months ago

1.5k
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

3 months ago

840
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)

1 month ago

336
Features list with heading

Author:
Leon Bachmann

2 years ago

10.5k
Services

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

6 months ago

1.4k
Subscription Plans
Subscription Plans

Author:
Tanvir Hasan Bappy (Tanvir)

1 month ago

498
Order History
Order History

Author:
Tanvir Hasan Bappy (Tanvir)

3 months ago

352
Hero Section
Modern Gradient Color Scheme - Uses a professional purple-to-teal gradient for visual appeal Animated Elements: Floating decorative circles with subtle animation Fade-in effect for the main illustration Pulsing status indicator Engaging Typography: Gradient text for key phrases Responsive font sizing Clean Poppins font family Social Proof Elements: Client avatars Star ratings Trust indicators ("Trusted by 500+ businesses") Call-to-Action Buttons: Primary gradient button Secondary outlined button Hover effects and transitions Visual Hierarchy: Clear headline with emphasis on transformation Supporting subheading Balanced layout with image Performance Indicators: ROI badge Growth metric badge Responsive Design: Works on mobile and desktop Grid layout that adapts to screen size

Author:
KULDEEP

1 week ago

101
Item List with title
created by using fieldset and legend tags

Author:
Prashant

2 years ago

10.8k
Responsive Search bar

Author:
Prajwal Hallale

2 years ago

12.1k
Search bar with select
search bar like google with select filter

Author:
s c

4 months ago

616

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components