/* ============================================================ DARK MODE STYLESHEET - Overrides the CSS variables and styles for dark theme - Add this file to your HTML AFTER style.css - No modifications needed to existing CSS files ============================================================ */ /* Dark mode activated when [data-theme="dark"] is on element */ html[data-theme="dark"] { /* Update all CSS variables for dark mode */ --brand-dark: #f5f7fa; --brand-light: #1a1f2e; --brand-border: #2d3748; --text-main: #f5f7fa; --text-muted: #cbd5e0; --text-light: #a0aec0; --white: #0f1419; --danger: #fc8181; --gray-100: #2d3748; --gray-200: #4a5568; --gray-300: #718096; --gray-700: #e2e8f0; } /* Card styling for dark mode */ html[data-theme="dark"] .card { background-color: #1a1f2e; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5); } html[data-theme="dark"] .card-header { background: linear-gradient(to top, #1a1f2e, #2d3748); } /* Panel background for dark mode */ html[data-theme="dark"] .panel { background-color: #152234; } /* Info card styling for dark mode */ html[data-theme="dark"] .info-card { background: linear-gradient(135deg, #1a1f2e 0%, #252d3d 100%); border-color: #2d3748; } html[data-theme="dark"] .info-card p { color: var(--text-muted); } html[data-theme="dark"] .info-card strong { color: #ffffff; } /* Result cards for dark mode */ html[data-theme="dark"] .result-card { background-image: linear-gradient(to bottom right, #ffffff, #9ebdf3); } html[data-theme="dark"] .result-card-secondary { background: linear-gradient(to bottom right, #2052a6, #ffffff); } /* Form inputs for dark mode */ html[data-theme="dark"] .form-input { background-color: #343f55 !important; border-color: #4a5568; color: var(--text-main); } html[data-theme="dark"] .form-input:focus { border-color: var(--brand-light); box-shadow: 0 0 0 3px rgba(245, 247, 250, 0.1); } html[data-theme="dark"] select.form-input { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23f5f7fa' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-color: #252d3d; } /* Radio cards for dark mode */ html[data-theme="dark"] .radio-card { background-color: #252d3d; border-color: #4a5568; color: #4a5568; } html[data-theme="dark"] .radio-input:checked + .radio-card { background-color: #ffffff; border-color: #ffffff; color: var(--brand-light); } /* Button styling for dark mode */ html[data-theme="dark"] .btn-secondary { background-color: #4a5568; color: var(--text-main); } html[data-theme="dark"] .btn-secondary:hover { background-color: #5a6578; } html[data-theme="dark"] .btn-outline { background-color: #252d3d; border-color: #4a5568; color: var(--text-main); } html[data-theme="dark"] .btn-outline:hover { border-color: var(--brand-light); } /* Unit toggle buttons for dark mode */ html[data-theme="dark"] .unit-toggle { border-color: #4a5568; } html[data-theme="dark"] .unit-btn { background: #4a5568; color: #bcbcbc; } html[data-theme="dark"] .unit-btn.active { background-color: #ffffff; color: #1a1f2e; } html[data-theme="dark"] .unit-btn:not(.active):hover { background-color: #5a6578; } /* Toast styling for dark mode */ html[data-theme="dark"] .toast { background-color: #c53030; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.7); color: white; } /* Range slider for dark mode */ html[data-theme="dark"] input[type="range"] { background: linear-gradient( to right, var(--brand-light) 0%, var(--brand-light) var(--value), #4a5568 var(--value), #4a5568 100% ); } html[data-theme="dark"] input[type="range"]::-webkit-slider-thumb { background: var(--brand-light); box-shadow: 0 2px 8px rgba(245, 247, 250, 0.3); } html[data-theme="dark"] input[type="range"]::-moz-range-thumb { background: var(--brand-light); box-shadow: 0 2px 8px rgba(245, 247, 250, 0.3); } /* Macro strategy buttons for dark mode */ html[data-theme="dark"] .macro-strategy-btn { border-color: #4a5568; background: #252d3d; color: var(--text-main); } html[data-theme="dark"] .macro-strategy-btn:hover { border-color: #5a6578; background: #2d3748; } html[data-theme="dark"] .macro-strategy-btn.active { border-color: var(--brand-light); box-shadow: 0 0 0 1px var(--brand-light); } html[data-theme="dark"] .macro-strategy-btn.active::after { background: var(--brand-light); color: #1a1f2e; } /* Step badge styling for dark mode */ html[data-theme="dark"] .step-badge { background-color: #2d3748; color: #ffffff; outline-color: #1a1f2e; } html[data-theme="dark"] .section-header:before { background: #2d3748; } /* noUiSlider styling for dark mode */ html[data-theme="dark"] .noUi-target { background: #4a5568; box-shadow: none; } html[data-theme="dark"] .noUi-connect { background: linear-gradient(93deg, #ffffff, #003df3); } html[data-theme="dark"] .noUi-handle { border-color: #ffffff; background-color: #ffffff; } /* Footer for dark mode */ html[data-theme="dark"] .footer { background: linear-gradient(to bottom, #1a1f2e, #2d3748); border-top-color: #1d2335; color: var(--text-muted); } /* Text color classes for dark mode */ html[data-theme="dark"] .text-brand-dark { color: var(--brand-light); } html[data-theme="dark"] .text-gray-600 { color: #a0a0a0; } html[data-theme="dark"] .text-gray-700 { color: var(--text-light); } html[data-theme="dark"] .text-white { color: var(--text-main); } /* Dark mode toggle button styling */ .dark-mode-toggle { position: fixed; top: 20px; right: 20px; z-index: 1000; width: 50px; height: 50px; border-radius: 50%; border: none; background-color: var(--white); color: var(--text-main); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 24px; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .dark-mode-toggle:hover { transform: scale(1.1); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); } html[data-theme="dark"] .dark-mode-toggle { background-color: #252d3d; color: var(--brand-light); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); } /* Mobile responsiveness for toggle button */ @media (max-width: 640px) { .dark-mode-toggle { top: 10px; right: 10px; width: 44px; height: 44px; font-size: 20px; } } html[data-theme="dark"] h1 { color: white; } html[data-theme="dark"] p.input-hint { color: #7a7a7a; } html[data-theme="dark"] button.btn.btn-primary { background: linear-gradient(to right, #487fcb, #ffffff); color: #1a1f2e; } html[data-theme="dark"] .card-header p { color: #a2a2a2; } html[data-theme="dark"] #navy-result .text-gray-600 { color: #1a1f2e; } html[data-theme="dark"] #step-1-results-container .text-gray-600{ color: #000000; } html[data-theme="dark"] #calorie-result .text-gray-600 { color: #1a1f2e; } html[data-theme="dark"] p.text-xs.text-gray-500.mt-2 { color: #000000; } html[data-theme="dark"] body { background: #39435f; } html[data-theme="dark"] .result-card.d-card div:first-child { background: #ffffff !important; color: #1a1f2e !important; } html[data-theme="dark"] #protein-result .text-gray-600 { color: #1a1f2e; } html[data-theme="dark"] .p-4.rounded-lg.text-center.font-bold.font-Frau { color: #1a1f2e; } html[data-theme="dark"] p.text-2xl.font-bold.text-brand-dark.mt-1.font-Frau { color: #ffffff; } html[data-theme="dark"] #macro-final-result p.text-center.text-sm.text-gray-600.mb-4 { color: #1a1f2e; } html[data-theme="dark"] section#whats-next-section { background: #39435f !important; }