/* Theme overrides (light/dark mode) - Light mode: no visual changes (defaults match existing design) - Dark mode: activated by setting `data-theme="dark"` on */ :root { --ts-body-bg: #ffffff; --ts-surface: #ffffff; --ts-surface-2: #f8faff; --ts-input-bg: #ffffff; --ts-input-border: var(--tg-border-color); --ts-shadow: 0px 14px 22px -9px rgba(187, 203, 216, 0.8); --tg-body-font-color: #00b6ad; } body { background: var(--ts-body-bg); } /* Toggle button (header + mobile menu) */ .navbar-wrap ul li.theme-toggle-item { display: flex; align-items: center; padding: 0 15px; } .mobile-menu .navigation li.theme-toggle-item { padding: 10px 25px; } .theme-toggle-btn { width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.08); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; } .theme-toggle-btn:hover, .theme-toggle-btn:focus-visible { background: rgba(255, 255, 255, 0.16); } .mobile-menu .theme-toggle-btn { border-color: var(--tg-border-color); background: transparent; color: var(--tg-body-font-color); } html[data-theme="dark"] { color-scheme: dark; --ts-body-bg: #0b1220; --ts-surface: #0f1a2b; --ts-surface-2: #111b2e; --ts-input-bg: #0f1a2b; --ts-input-border: rgba(226, 232, 240, 0.16); --ts-shadow: 0px 20px 50px rgba(0, 0, 0, 0.35); /* Existing theme variables (style.css) */ --tg-body-font-color: #e2e8f0; --tg-paragraph-color: #cbd5e1; --tg-section-background: #0b1220; --tg-gray: #0f1a2b; --tg-gray-two: #111b2e; --tg-gray-three: #ffffff; --tg-gray-four: #cbd5e1; --tg-border-color: rgba(226, 232, 240, 0.16); --tg-steel-blue: #334155; --tg-lavender: #ffffff; } html[data-theme="dark"] body { background: var(--ts-body-bg); color: var(--tg-body-font-color); } /* Common surfaces (Bootstrap + template) */ html[data-theme="dark"] .card, html[data-theme="dark"] .features-item-three, html[data-theme="dark"] .features-item-wrap-four, html[data-theme="dark"] .navbar-wrap ul li .sub-menu, html[data-theme="dark"] .mobile-menu .menu-box, html[data-theme="dark"] .post-slide, html[data-theme="dark"] .post-slide .post-content, html[data-theme="dark"] .owl-controls .owl-buttons .owl-prev, html[data-theme="dark"] .owl-controls .owl-buttons .owl-next { background: var(--ts-surface) !important; border-color: var(--tg-border-color) !important; box-shadow: var(--ts-shadow) !important; } html[data-theme="dark"] .navbar-wrap ul li .sub-menu { border-color: var(--tg-border-color) !important; } html[data-theme="dark"] .owl-controls .owl-buttons .owl-prev:after, html[data-theme="dark"] .owl-controls .owl-buttons .owl-next:after { color: var(--tg-body-font-color) !important; } /* Fix hard-coded light colors from custom.css */ html[data-theme="dark"] .text-centre .title { color: var(--tg-heading-font-color) !important; } html[data-theme="dark"] .menu-area-six .navbar-wrap ul.sub-menu li a, html[data-theme="dark"] .sticky-menu .navbar-wrap ul .sub-menu li a { color: var(--tg-body-font-color) !important; } /* Mobile menu borders + close button */ html[data-theme="dark"] .mobile-menu .close-btn { color: var(--tg-body-font-color) !important; } html[data-theme="dark"] .mobile-menu .navigation li, html[data-theme="dark"] .mobile-menu .navigation:last-child, html[data-theme="dark"] .mobile-menu .navigation li>ul>li:first-child { border-top-color: rgba(226, 232, 240, 0.16) !important; border-bottom-color: rgba(226, 232, 240, 0.16) !important; } /* Form controls */ html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] .select-wrapper select { background-color: var(--ts-input-bg) !important; color: var(--tg-body-font-color) !important; border-color: var(--ts-input-border) !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: rgba(226, 232, 240, 0.65) !important; } /* Gradient helper used in footer/sections */ html[data-theme="dark"] .bg-color-to-white { background: linear-gradient(to bottom, #00b6ad, #0b1220) !important; } html[data-theme="dark"] #preloader { background-color: var(--ts-body-bg) !important; } /* Footer: make it light in light mode, dark in dark mode */ html[data-theme="light"] .bg-color-to-black { background: linear-gradient(to bottom, #00b6ad, #ffffff) !important; } html[data-theme="dark"] .bg-color-to-black { background: linear-gradient(to bottom, #00b6ad, #020617) !important; } html[data-theme="light"] .footer-widget .fw-title { color: var(--tg-body-font-color) !important; } html[data-theme="light"] .footer-link .list-wrap li a:hover, html[data-theme="light"] .footer-info .list-wrap li .content a:hover { color: var(--tg-primary-color) !important; } html[data-theme="light"] .footer-info .list-wrap li .content a, html[data-theme="light"] .footer-info .list-wrap li .content p, html[data-theme="light"] .footer-link .list-wrap li a, html[data-theme="light"] .footer-newsletter p, html[data-theme="light"] .footer-newsletter span, html[data-theme="light"] .copyright-text p { color: var(--tg-paragraph-color) !important; } html[data-theme="light"] .footer-info .list-wrap li .content p span { color: var(--tg-body-font-color) !important; } html[data-theme="light"] .footer-info .list-wrap li .icon { color: var(--tg-primary-color) !important; } html[data-theme="light"] .footer-link .list-wrap li a::before { background: var(--tg-primary-color) !important; } html[data-theme="light"] .footer-bottom { border-top-color: var(--tg-border-color) !important; } html[data-theme="light"] .footer-newsletter form input { background: var(--ts-input-bg) !important; color: var(--tg-body-font-color) !important; border: 1px solid var(--ts-input-border) !important; } html[data-theme="light"] .footer-newsletter form input::placeholder { color: rgba(51, 71, 112, 0.7) !important; }