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

1.1k

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.9k
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

10 months ago

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

219
Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Author:
Ahita Bisma Adlula

1 year ago

2.9k
Call to action
slightly tilted call to action section

Author:
Simon Scheffer

3 years ago

11.3k
Product Details Page
This section will show all the information about a selected product, including its title, description, price, images, and specifications.

Author:
mohit kulkarni

5 months ago

942
cards
cards with background animation

Author:
Anonymous

2 years ago

11.9k
coffee
a beverage brewed from the roasted and ground seeds of the tropical evergreen coffee plant. Coffee is one of the three most popular beverages in the world (alongside water and tea), and it is one of the most profitable international commodities

Author:
Augustin

8 months ago

987
Lifetime Access (iOS 26 Style)
Lifetime Access (iOS 26 Style)

Author:
Tanvir Hasan Bappy (Tanvir)

1 month ago

28
Image - Figure with figcaption design

Author:
Maxim

1 year ago

892

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components