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

2 years ago

8.8k
Table
Table with image and status with pagination buttons

Author:
Abhiraj

1 year ago

2.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

9 months ago

1.8k
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)

8 months ago

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

2 months ago

194
Show user details

Author:
Lucas Martinez

3 years ago

25.4k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

9 months ago

1.4k
Timeline
timeline with journey

Author:
Abhiraj

1 year ago

1.2k
Soft-Modern Dark Pricing
A sophisticated, highly rounded pricing component inspired by modern fintech interfaces. It avoids harsh lines in favor of deep "zinc" tones and subtle borders (border-white/5). The center card pops using a high-contrast white button against the dark theme, guiding user focus naturally without using aggressive gradients.

Author:
Hamza Atig

3 weeks ago

214
Nested list

Author:
Lukas Müller

2 years ago

13.2k
Team Members

Author:
Abdul Baset Bappy

7 months ago

948
why chose us
Designed with clarity and purpose, each section of our website is crafted to guide users effortlessly from engaging visuals to structured content that highlights our values and builds trust at every scroll. abnahid.com

Author:
Abdul Jabbar Al Nahid

2 months ago

290

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components