Dark Mode Dashboard | AI Challenge
Best AI for Dark Mode Dashboard
Single-shot · temp 0.7 · real votes · identical prompts·How we test →
Loading...
vs
Ask them anything yourself
Single-shot · temp 0.7 · real votes · identical prompts·How we test →
vsAsk them anything yourself
Tests an AI's UI design skills with theming support
Design a sleek admin dashboard UI with light and dark mode toggle, featuring an AI analytics graph.
We can't display this one. It's not us. Well... it might be us.
The model was asked for a web page. It produced something else. We're not going to define what.
This is a complete, single-file solution. It uses **Tailwind CSS** for the sleek styling, **Chart.js** for the AI analytics visualization, and **Lucide Icons** for the professional admin look.
The dashboard includes a functional **Light/Dark mode toggle**, a responsive sidebar, and a simulated "AI Insight" panel.
```html
<!DOCTYPE html>
<html lang="en" class="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nexus AI | Admin Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: '#6366f1',
darkBg: '#0f172a',
darkCard: '#1e293b',
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body { font-family: 'Inter', sans-serif; transition: background-color 0.3s ease; }
.glass { backdrop-filter: blur(10px); }
</style>
</head>
<body class="bg-slate-50 dark:bg-darkBg text-slate-900 dark:text-slate-100 min-h-screen flex">
<!-- Sidebar -->
<aside class="w-64 bg-white dark:bg-darkCard border-r border-slate-200 dark:border-slate-800 hidden md:flex flex-col transition-colors duration-300">
<div class="p-6 flex items-center gap-3">
<div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center text-white">
<i data-lucide="cpu" class="w-5 h-5"></i>
</div>
<span class="text-xl font-bold tracking-tight">Nexus<span class="text-primary">AI</span></span>
</div>
<nav class="flex-1 px-4 space-y-2 mt-4">
<a href="#" class="flex items-center gap-3 px-4 py-3 bg-primary/10 text-primary rounded-xl font-medium">
<i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
</a>
<a href="#" class="flex items-center gap-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl transition-all">
<i data-lucide="bar-chart-3" class="w-5 h-5"></i> Analytics
</a>
<a href="#" class="flex items-center gap-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl transition-all">
<i data-lucide="users" class="w-5 h-5"></i> Customers
</a>
<a href="#" class="flex items-center gap-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl transition-all">
<i data-lucide="settings" class="w-5 h-5"></i> Settings
</a>
</nav>
<div class
