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

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

Animasyonlu Arama Textbox Widget
Üzerine gelince animasyonlu olarak açılan textbox.

Author:
Sedat Kumcu

1 year 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

11 months ago

1.9k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

1 year ago

1.8k
Features Component

Author:
KULDEEP

8 months ago

1.1k
Full width search section with title

Author:
TailwindFlex

3 years ago

12.3k
List of links

Author:
Prajwal Hallale

3 years ago

10.3k
portfolio
Complete Portfolio UI Kit with hero, about, skills, projects, testimonials, contact form, and footer. Fully responsive and dark mode supported using Tailwind CSS.

Author:
Lekhraj Ghimire

8 months ago

841
Ai clone, chat ui
Chat interface for ai builder, dont toomuch focused on designing responsive

Author:
Abhiraj

1 year ago

2.2k
Marquee Slider of Client Logos – Smooth Scrolling Brand Showcase
Enhance your website's credibility with a sleek marquee slider displaying client logos. This continuously scrolling slider provides a dynamic and engaging way to showcase your trusted partnerships, ensuring a professional and visually appealing design. Perfect for businesses, portfolios, and service-based websites.

Author:
M Junaid

8 months ago

551
Interactive Multi-Method Donation Section
Overview: A high-trust, conversion-oriented fundraising section styled in the project's signature Navy Blue theme. It provides users with flexible payment options, ranging from one-click fixed amounts to manual bank transfers and cryptocurrency donations. Key Features: Smart Amount Logic: Includes a JavaScript-powered selector where users can choose a preset amount ($10, $25, $50) or type a custom value. The interface automatically toggles states (deselecting buttons when typing, and vice-versa) to prevent user error. Payment Methods: Quick Card/Checkout: Primary call-to-action column. Bank Transfer: A clean card displaying account details with a "Copy to Clipboard" utility. Crypto (Bitcoin): A specialized dark-themed card featuring a placeholder QR code and wallet address copying functionality. Trust Signals: Includes security iconography (lock, shield) and reassuring copy to boost donor confidence. Visual Hierarchy: Uses a 7/5 grid split to prioritize the immediate donation action while keeping manual payment methods accessible but secondary. Tech Stack: Framework: Tailwind CSS. Icons: Ionicons. Scripting: Vanilla JavaScript (for amount toggling and clipboard copying functions). Fonts: DM Serif Display (Headings) + Inter (Body). Usage: Ideal for the "Support Us" page or a dedicated campaign landing page. The script tag included at the bottom handles all the interactivity (button selection and text copying) without needing external libraries.

Author:
Juan D. Cortorreal

3 months ago

394
GMT Live Coding

Author:
Seth

1 week ago

43
Features list with heading

Author:
Leon Bachmann

3 years ago

11.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components