/* ============================================ Dark Mode Theme - Fresh Kitchen Recipes Applied via .dark class on element ============================================ */ /* --- Base / Body --- */ html.dark body { background-color: #111827; /* gray-900 */ color: #e5e7eb; /* gray-200 */ } /* --- Main Content Area --- */ html.dark .bg-gray-50 { background-color: #111827; } html.dark .bg-gray-100 { background-color: #1f2937; } html.dark .bg-gray-200 { background-color: #374151; } html.dark .bg-white { background-color: #1f2937; } /* --- Text Colors --- */ html.dark .text-gray-900 { color: #f3f4f6; } html.dark .text-gray-800 { color: #e5e7eb; } html.dark .text-gray-700 { color: #d1d5db; } html.dark .text-gray-600 { color: #9ca3af; } html.dark .text-gray-500 { color: #9ca3af; } html.dark .text-gray-400 { color: #6b7280; } html.dark .text-navy-900 { color: #e3f2fd; } html.dark .text-navy-800 { color: #b3d9f2; } html.dark .text-navy-700 { color: #7bb3e8; } /* --- Border Colors --- */ html.dark .border-gray-100 { border-color: #374151; } html.dark .border-gray-200 { border-color: #374151; } html.dark .border-gray-300 { border-color: #4b5563; } html.dark .border-gray-400 { border-color: #6b7280; } html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #374151; } /* --- Cards & Panels --- */ html.dark .card { background-color: #1f2937; border-color: #374151; } html.dark .card-header { background-color: #111827; border-color: #374151; color: #e5e7eb; } html.dark .card-body { color: #d1d5db; } html.dark .rounded-2xl.shadow-xl.border-2.border-gray-200 { border-color: #374151; } /* --- Forms & Inputs --- */ html.dark input:where(:not([type])), html.dark input:where([type=text]), html.dark input:where([type=email]), html.dark input:where([type=password]), html.dark input:where([type=search]), html.dark input:where([type=tel]), html.dark input:where([type=url]), html.dark input:where([type=number]), html.dark input:where([type=date]), html.dark select, html.dark textarea { background-color: #1f2937; border-color: #4b5563; color: #e5e7eb; } html.dark input:where(:not([type]))::placeholder, html.dark input:where([type=text])::placeholder, html.dark input:where([type=email])::placeholder, html.dark input:where([type=password])::placeholder, html.dark input:where([type=search])::placeholder, html.dark textarea::placeholder { color: #6b7280; } html.dark input:where(:not([type])):focus, html.dark input:where([type=text]):focus, html.dark input:where([type=email]):focus, html.dark input:where([type=password]):focus, html.dark input:where([type=search]):focus, html.dark select:focus, html.dark textarea:focus { border-color: #5a9dd6; --tw-ring-color: rgba(90, 157, 214, 0.3); } html.dark .form-input { background-color: #1f2937; border-color: #4b5563; color: #e5e7eb; } html.dark .form-label { color: #e5e7eb; } /* Disabled inputs */ html.dark input:disabled, html.dark .cursor-not-allowed { background-color: #111827 !important; color: #6b7280 !important; } /* Select dropdown arrow */ html.dark select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E"); } /* --- Dropdown Menus --- */ html.dark .bg-white.rounded-xl.shadow-2xl { background-color: #1f2937; border-color: #374151; } html.dark .ring-1.ring-black { --tw-ring-color: rgb(75 85 99); } /* --- Alert / Status Banners --- */ html.dark .bg-gradient-to-r.from-green-50, html.dark .bg-gradient-to-r.from-green-100 { background: linear-gradient(to right, #064e3b, #065f46); } html.dark .bg-gradient-to-r.from-red-50 { background: linear-gradient(to right, #7f1d1d, #991b1b); } html.dark .bg-gradient-to-r.from-blue-50, html.dark .bg-gradient-to-r.from-blue-50.to-indigo-50 { background: linear-gradient(to right, #1e3a5f, #1e3a6f); } html.dark .bg-gradient-to-r.from-yellow-50 { background: linear-gradient(to right, #78350f, #92400e); } html.dark .bg-gradient-to-br.from-blue-50.to-indigo-50 { background: linear-gradient(to bottom right, #1e3a5f, #1e2a6f); } /* Info/status text in dark alerts */ html.dark .text-blue-800 { color: #93c5fd; } html.dark .text-blue-700 { color: #93c5fd; } html.dark .text-green-800 { color: #86efac; } html.dark .text-green-700 { color: #86efac; } html.dark .text-red-800 { color: #fca5a5; } html.dark .text-yellow-800 { color: #fde68a; } html.dark .text-yellow-700 { color: #fde68a; } /* --- Shadows --- */ html.dark .shadow-xl { --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3); --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } html.dark .shadow-lg { --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } html.dark .shadow-md { --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } /* --- Back-to-top button --- */ html.dark #back-to-top { background-color: #3d7ab8; } html.dark #back-to-top:hover { background-color: #5a9dd6; } /* --- Tables --- */ html.dark table { border-color: #374151; } html.dark thead { background-color: #111827; } html.dark thead th { color: #e5e7eb; border-color: #374151; } html.dark tbody tr { border-color: #374151; } html.dark tbody tr:hover { background-color: #374151; } html.dark tbody td { color: #d1d5db; } /* --- Recipe Cards / Listing Cards --- */ html.dark .bg-white.rounded-2xl, html.dark .bg-white.rounded-xl, html.dark .bg-white.rounded-lg { background-color: #1f2937; } /* --- Hover States --- */ html.dark .hover\:bg-gray-50:hover { background-color: #374151 !important; } html.dark .hover\:bg-gray-100:hover { background-color: #374151 !important; } html.dark .hover\:bg-gray-200:hover { background-color: #4b5563 !important; } html.dark .hover\:bg-navy-50:hover { background-color: #1e3a5f !important; } html.dark .hover\:bg-red-50:hover { background-color: #451a1a !important; } html.dark .hover\:bg-green-50:hover { background-color: #14432a !important; } html.dark .hover\:bg-blue-50:hover { background-color: #1e3a5f !important; } html.dark .hover\:bg-orange-50:hover { background-color: #431407 !important; } html.dark .hover\:bg-pink-50:hover { background-color: #4a1a2e !important; } html.dark .hover\:bg-purple-50:hover { background-color: #3b0f5e !important; } html.dark .hover\:bg-yellow-50:hover { background-color: #3f3407 !important; } html.dark .hover\:bg-amber-50:hover { background-color: #3f3407 !important; } /* --- Notification Dropdown --- */ html.dark .bg-white.rounded-xl.shadow-2xl.border.border-gray-200 { background-color: #1f2937; border-color: #374151; } html.dark .bg-blue-50 { background-color: #1e3a5f; } html.dark .bg-blue-100 { background-color: #1e3a5f; } html.dark .hover\:bg-blue-100:hover { background-color: #253d5f !important; } /* --- Prose / Typography plugin --- */ html.dark .prose { --tw-prose-body: #d1d5db; --tw-prose-headings: #f3f4f6; --tw-prose-lead: #9ca3af; --tw-prose-links: #93c5fd; --tw-prose-bold: #f3f4f6; --tw-prose-counters: #9ca3af; --tw-prose-bullets: #6b7280; --tw-prose-hr: #374151; --tw-prose-quotes: #e5e7eb; --tw-prose-quote-borders: #4b5563; --tw-prose-captions: #9ca3af; --tw-prose-kbd: #f3f4f6; --tw-prose-code: #f3f4f6; --tw-prose-pre-code: #e5e7eb; --tw-prose-pre-bg: #111827; --tw-prose-th-borders: #4b5563; --tw-prose-td-borders: #374151; color: var(--tw-prose-body); } /* --- Gradient backgrounds used throughout --- */ html.dark .bg-gradient-to-br.from-navy-100.to-navy-200 { background: linear-gradient(to bottom right, #132f4c, #1e4976); } html.dark .bg-gradient-to-br.from-gray-50 { background: linear-gradient(to bottom right, #111827, #1f2937); } html.dark .bg-gradient-to-r.from-gray-50, html.dark .bg-gradient-to-r.from-gray-100 { background: linear-gradient(to right, #111827, #1f2937); } /* --- Colored category/tag backgrounds in dark mode --- */ html.dark .bg-green-50 { background-color: #14432a; } html.dark .bg-green-100 { background-color: #14532d; } html.dark .bg-red-50 { background-color: #451a1a; } html.dark .bg-red-100 { background-color: #4c1d1d; } html.dark .bg-yellow-50 { background-color: #3f3407; } html.dark .bg-yellow-100 { background-color: #422d06; } html.dark .bg-orange-50 { background-color: #431407; } html.dark .bg-orange-100 { background-color: #451a03; } html.dark .bg-purple-50 { background-color: #3b0f5e; } html.dark .bg-purple-100 { background-color: #3b0764; } html.dark .bg-indigo-100 { background-color: #1e1b4b; } html.dark .bg-pink-100 { background-color: #4a1a2e; } html.dark .bg-amber-50 { background-color: #3f3407; } html.dark .bg-amber-100 { background-color: #422d06; } html.dark .bg-teal-100 { background-color: #042f2e; } html.dark .bg-sky-100 { background-color: #0c4a6e; } html.dark .bg-rose-100 { background-color: #4c0519; } html.dark .bg-violet-100 { background-color: #2e1065; } html.dark .bg-navy-100 { background-color: #0a1929; } /* --- Scrollbar styling --- */ html.dark ::-webkit-scrollbar { width: 8px; } html.dark ::-webkit-scrollbar-track { background: #1f2937; } html.dark ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; } html.dark ::-webkit-scrollbar-thumb:hover { background: #6b7280; } /* --- Dark mode toggle switch --- */ .dark-mode-toggle { position: relative; width: 3.5rem; height: 2rem; border-radius: 9999px; cursor: pointer; transition: background-color 0.3s ease; background-color: #d1d5db; border: none; padding: 0; } .dark-mode-toggle.active { background-color: #3d7ab8; } .dark-mode-toggle .toggle-knob { position: absolute; top: 0.25rem; left: 0.25rem; width: 1.5rem; height: 1.5rem; border-radius: 9999px; background-color: white; transition: transform 0.3s ease; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .dark-mode-toggle.active .toggle-knob { transform: translateX(1.5rem); } /* --- Prevent flash of wrong theme --- */ html.dark-loading { visibility: hidden; }