Add dark mode
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m12s
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m12s
This commit is contained in:
141
index.html
141
index.html
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="theme-color" content="#111827">
|
||||
<meta name="theme-color" content="#0d0d0d">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<meta name="apple-mobile-web-app-title" content="Recipe">
|
||||
@@ -22,6 +22,8 @@
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
width: 100%; height: 4px; cursor: pointer; background: #e5e7eb; border-radius: 2px;
|
||||
}
|
||||
.dark input[type=range]::-webkit-slider-thumb { background: #e8e8e8; }
|
||||
.dark input[type=range]::-webkit-slider-runnable-track { background: #333333; }
|
||||
|
||||
/* Ingredient Active States */
|
||||
.ingredient-active .check-box,
|
||||
@@ -30,14 +32,151 @@
|
||||
.ingredient-active .rd-check-icon { display: block; }
|
||||
.ingredient-active .ingredient-text,
|
||||
.ingredient-active .rd-ing-text { text-decoration: line-through; color: #9ca3af; }
|
||||
.dark .ingredient-active .check-box,
|
||||
.dark .ingredient-active .rd-check-box { background-color: #f0f0f0; border-color: #f0f0f0; }
|
||||
|
||||
/* Utilities */
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
|
||||
|
||||
/* ===== Dark Mode Overrides ===== */
|
||||
.dark { color-scheme: dark; }
|
||||
|
||||
/* --- Gray backgrounds --- */
|
||||
.dark .bg-white { background-color: #1a1a1a !important; }
|
||||
.dark .bg-gray-50 { background-color: #0d0d0d !important; }
|
||||
.dark .bg-gray-100 { background-color: #242424 !important; }
|
||||
.dark .bg-gray-200 { background-color: #2e2e2e !important; }
|
||||
.dark .bg-gray-900 { background-color: #f0f0f0 !important; }
|
||||
.dark .bg-gray-900.text-white,
|
||||
.dark .bg-gray-900 .text-white { color: #0d0d0d !important; }
|
||||
.dark .border-gray-900 { border-color: #f0f0f0 !important; }
|
||||
|
||||
/* Semi-transparent backgrounds */
|
||||
.dark .bg-white\/90 { background-color: rgba(26, 26, 26, 0.92) !important; }
|
||||
.dark .bg-white\/80 { background-color: rgba(26, 26, 26, 0.85) !important; }
|
||||
.dark .bg-gray-50\/80 { background-color: rgba(20, 20, 20, 0.85) !important; }
|
||||
.dark .bg-gray-50\/90 { background-color: rgba(20, 20, 20, 0.92) !important; }
|
||||
|
||||
/* --- Gray text --- */
|
||||
.dark .text-gray-900 { color: #f5f5f5 !important; }
|
||||
.dark .text-gray-800 { color: #e8e8e8 !important; }
|
||||
.dark .text-gray-700 { color: #d4d4d4 !important; }
|
||||
.dark .text-gray-600 { color: #a0a0a0 !important; }
|
||||
.dark .text-gray-500 { color: #888888 !important; }
|
||||
.dark .text-gray-400 { color: #666666 !important; }
|
||||
.dark .text-gray-300 { color: #444444 !important; }
|
||||
.dark .text-black { color: #ffffff !important; }
|
||||
|
||||
/* --- Gray borders --- */
|
||||
.dark .border-gray-200 { border-color: #2a2a2a !important; }
|
||||
.dark .border-gray-100 { border-color: #1f1f1f !important; }
|
||||
.dark .border-gray-300 { border-color: #333333 !important; }
|
||||
|
||||
/* --- Dividers --- */
|
||||
.dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]) { border-color: #1a1a1a !important; }
|
||||
.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #1f1f1f !important; }
|
||||
.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #2a2a2a !important; }
|
||||
.dark .divide-red-50 > :not([hidden]) ~ :not([hidden]) { border-color: #2a1a1a !important; }
|
||||
|
||||
/* --- Ring utilities --- */
|
||||
.dark .ring-gray-200 { --tw-ring-color: #2a2a2a !important; }
|
||||
.dark .ring-gray-900 { --tw-ring-color: #f0f0f0 !important; }
|
||||
|
||||
/* --- Hover states --- */
|
||||
.dark .hover\:bg-gray-50:hover { background-color: #1f1f1f !important; }
|
||||
.dark .hover\:bg-gray-100:hover { background-color: #2e2e2e !important; }
|
||||
.dark .hover\:bg-white:hover { background-color: #242424 !important; }
|
||||
.dark .hover\:text-gray-700:hover { color: #e8e8e8 !important; }
|
||||
.dark .hover\:text-gray-900:hover { color: #f5f5f5 !important; }
|
||||
.dark .hover\:text-black:hover { color: #ffffff !important; }
|
||||
.dark .hover\:bg-black:hover { background-color: #e0e0e0 !important; color: #0d0d0d !important; }
|
||||
.dark .hover\:bg-red-50:hover { background-color: #2a1a1a !important; }
|
||||
.dark .hover\:border-gray-300:hover { border-color: #444444 !important; }
|
||||
.dark .hover\:border-gray-400:hover { border-color: #555555 !important; }
|
||||
.dark .hover\:border-gray-900:hover { border-color: #f0f0f0 !important; }
|
||||
.dark .hover\:border-red-200:hover { border-color: #5c2020 !important; }
|
||||
|
||||
/* --- Focus --- */
|
||||
.dark .focus\:border-gray-400:focus { border-color: #555555 !important; }
|
||||
.dark .focus\:border-gray-300:focus { border-color: #444444 !important; }
|
||||
|
||||
/* --- Shadows --- */
|
||||
.dark .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.4) !important; }
|
||||
.dark .shadow-sm { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.4) !important; }
|
||||
.dark .border-dashed { border-color: #333333 !important; }
|
||||
|
||||
/* --- Inputs --- */
|
||||
.dark input, .dark select, .dark textarea {
|
||||
background-color: #1a1a1a !important;
|
||||
color: #e8e8e8 !important;
|
||||
border-color: #2a2a2a !important;
|
||||
}
|
||||
.dark input::placeholder, .dark textarea::placeholder {
|
||||
color: #666666 !important;
|
||||
}
|
||||
|
||||
/* --- Toast --- */
|
||||
.dark #app-toast .rounded-xl,
|
||||
.dark #planner-toast .rounded-xl {
|
||||
background-color: #f0f0f0 !important;
|
||||
color: #0d0d0d !important;
|
||||
}
|
||||
|
||||
/* --- Amber / Summary card --- */
|
||||
.dark #planner-summary-card {
|
||||
background: #1e1a10 !important;
|
||||
border-color: #4a3800 !important;
|
||||
}
|
||||
.dark .bg-amber-50 { background-color: #1e1a10 !important; }
|
||||
.dark .bg-amber-50\/30 { background-color: rgba(60, 45, 0, 0.25) !important; }
|
||||
.dark .bg-amber-50\/50 { background-color: rgba(80, 60, 0, 0.2) !important; }
|
||||
.dark .bg-amber-100\/50 { background-color: rgba(80, 60, 0, 0.2) !important; }
|
||||
.dark .hover\:bg-amber-100\/50:hover { background-color: rgba(80, 60, 0, 0.35) !important; }
|
||||
.dark .border-amber-200 { border-color: #4a3800 !important; }
|
||||
.dark .border-amber-200\/80 { border-color: #4a3800 !important; }
|
||||
.dark .border-amber-200\/60 { border-color: #3d2e00 !important; }
|
||||
.dark .border-amber-100 { border-color: #332600 !important; }
|
||||
.dark .text-amber-900\/70 { color: #fbbf24 !important; }
|
||||
.dark .text-amber-900\/80 { color: #fbbf24 !important; }
|
||||
.dark .text-amber-900 { color: #fcd34d !important; }
|
||||
.dark .text-amber-600 { color: #f59e0b !important; }
|
||||
.dark .text-amber-500 { color: #f59e0b !important; }
|
||||
.dark .divide-amber-100\/80 > :not([hidden]) ~ :not([hidden]) { border-color: #332600 !important; }
|
||||
|
||||
/* --- Emerald accents --- */
|
||||
.dark .bg-emerald-50 { background-color: #0a1f15 !important; }
|
||||
.dark .bg-emerald-100 { background-color: #064e3b !important; }
|
||||
.dark .bg-emerald-500 { background-color: #10b981 !important; }
|
||||
.dark .bg-emerald-600 { background-color: #059669 !important; }
|
||||
.dark .hover\:bg-emerald-700:hover { background-color: #047857 !important; }
|
||||
.dark .hover\:bg-emerald-100\/80:hover { background-color: rgba(6, 78, 59, 0.5) !important; }
|
||||
.dark .border-emerald-200\/80 { border-color: #065f46 !important; }
|
||||
.dark .text-emerald-800 { color: #6ee7b7 !important; }
|
||||
.dark .text-emerald-600 { color: #34d399 !important; }
|
||||
.dark .text-emerald-600\/80 { color: rgba(52, 211, 153, 0.85) !important; }
|
||||
.dark .text-emerald-500 { color: #34d399 !important; }
|
||||
|
||||
/* --- Red accents --- */
|
||||
.dark .bg-red-50 { background-color: #1f0a0a !important; }
|
||||
.dark .bg-red-100 { background-color: #450a0a !important; }
|
||||
.dark .bg-red-500 { background-color: #ef4444 !important; }
|
||||
.dark .border-red-200\/80 { border-color: #5c2020 !important; }
|
||||
.dark .border-red-100\/80 { border-color: #3b1010 !important; }
|
||||
.dark .text-red-800 { color: #fca5a5 !important; }
|
||||
.dark .text-red-600 { color: #f87171 !important; }
|
||||
.dark .text-red-600\/80 { color: rgba(248, 113, 113, 0.85) !important; }
|
||||
.dark .text-red-500 { color: #f87171 !important; }
|
||||
.dark .text-red-400 { color: #fb7185 !important; }
|
||||
.dark .hover\:text-red-600:hover { color: #f87171 !important; }
|
||||
.dark .bg-amber-500 { background-color: #f59e0b !important; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="m-0 min-h-dvh bg-white font-sans text-gray-800">
|
||||
<script>
|
||||
if (localStorage.getItem('theme') === 'dark') document.documentElement.classList.add('dark');
|
||||
</script>
|
||||
|
||||
<div id="app-container" class="relative flex h-dvh min-h-0 w-full flex-col overflow-hidden bg-white">
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user