/* =========================================== Dark Mode — tabule-theme Activated via html[data-theme="dark"]. Set by the anti-flash inline script in before any CSS is painted. =========================================== */ /* ── Smooth transitions on theme switch ── */ body, .tbl-grid-item, .tbl-list-item, .tbl-shadow, .widget, input, textarea, select { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* ── CSS custom property overrides ── */ html[data-theme="dark"] { --body-bg-color: #18181b; --post-bg-color: #1c1c1e; --page-bg-color: #1c1c1e; --homepage-bg-color: #18181b; --general-color: #e4e4e7; --h1-color: #f4f4f5; --h2-color: #f4f4f5; --h3-color: #f4f4f5; --h4-color: #f4f4f5; --h5-color: #f4f4f5; --h6-color: #f4f4f5; --link-color: #8aad26; --link-color-hover: #9ec42c; --input-bg-color: #27272a; --input-text-color: #e4e4e7; --input-border-color: #52525b; --input-border-hover: #6f8e1d; --search-box-font-color: #e4e4e7; --search-box-bg-color: #27272a; --search-box-border-color: #52525b; --search-box-icon-color: #a1a1aa; /* Mobile menu */ --menu-mobile-bg: #1c1c1e; --menu-mobile-bg-item: #27272a; --menu-mobile-font-color: #f4f4f5; --menu-mobile-bg-item-hover: #3f3f46; --menu-mobile-font-color-hover: #f4f4f5; --menu-mobile-border-color: #3f3f46; } /* ── Base ── */ html[data-theme="dark"] body { background-color: #18181b; color: #e4e4e7; } /* ── Mobile menu ── */ html[data-theme="dark"] .tbl-btn-main-menu-close { color: #f4f4f5 !important; } /* ── Nested dropdown divider ── */ /* Light-mode divider is a fixed semi-transparent dark line (stays visible no matter how light the configured submenu background is); flip to a light line here so it stays visible against a dark one. */ @media (min-width: 1024px) { html[data-theme="dark"] .tbl-menu-item-content .tbl-im-dropdown > .tbl-menu-item-content { border-left-color: rgba(255, 255, 255, 0.12); } html[data-theme="dark"] .tbl-menu-item-content .tbl-im-dropdown > .tbl-menu-item-content.right { border-right-color: rgba(255, 255, 255, 0.12); } } /* ── Cards ── */ html[data-theme="dark"] .tbl-grid-item, html[data-theme="dark"] .tbl-list-item { background-color: #27272a; color: #e4e4e7; } html[data-theme="dark"] .tbl-shadow { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); } /* Override Tailwind's bg-white on cards and panels */ html[data-theme="dark"] .tbl-grid-item.bg-white, html[data-theme="dark"] .tbl-list-item.bg-white, html[data-theme="dark"] .bg-white { background-color: #27272a !important; } /* ── Sidebar widgets ── */ html[data-theme="dark"] .widget { background-color: #27272a; color: #e4e4e7; border-color: #3f3f46; } /* Needs higher specificity than the inline customizer rule .tbl-sidebar-content.separate-sidebar > .widget (0,3,0) */ html[data-theme="dark"] .tbl-sidebar-content.separate-sidebar > .widget { background-color: #27272a; } html[data-theme="dark"] .widget-title { color: #f4f4f5; } html[data-theme="dark"] .widget a { color: #a1a1aa; } html[data-theme="dark"] .widget a:hover { color: #8aad26; } /* ── Article / post content ── */ html[data-theme="dark"] .tbl-article { background-color: #1c1c1e; color: #e4e4e7; } html[data-theme="dark"] main .one-content, html[data-theme="dark"] main.one-content { background-color: #18181b; } html[data-theme="dark"] .tbl-article h1, html[data-theme="dark"] .tbl-article h2, html[data-theme="dark"] .tbl-article h3, html[data-theme="dark"] .tbl-article h4, html[data-theme="dark"] .tbl-article h5, html[data-theme="dark"] .tbl-article h6 { color: #f4f4f5; } html[data-theme="dark"] .tbl-article blockquote { border-left-color: #8aad26; color: #a1a1aa; } html[data-theme="dark"] .tbl-article hr { border-color: #3f3f46; } /* ── Code blocks ── */ html[data-theme="dark"] pre, html[data-theme="dark"] code { background-color: #2d2d30 !important; color: #e4e4e7 !important; border-color: #3f3f46; } /* ── Tables ── */ html[data-theme="dark"] table { color: #e4e4e7; } html[data-theme="dark"] th { background-color: #2d2d30; color: #f4f4f5; border-color: #3f3f46; } html[data-theme="dark"] td { border-color: #3f3f46; } /* ── TOC ── */ html[data-theme="dark"] .tbl-toc, html[data-theme="dark"] .tbl-toc-modern { background-color: #27272a; border-color: #3f3f46; color: #e4e4e7; } html[data-theme="dark"] .tbl-toc-modern .tbl-toc-header { background: #2d2d30; color: #f4f4f5; } /* ── Pagination ── */ html[data-theme="dark"] .tbl-like-btn { background-color: #27272a; border-color: #3f3f46 !important; color: #e4e4e7; } html[data-theme="dark"] .pagination .bg-white { background-color: #3f3f46 !important; } /* ── Author box ── */ html[data-theme="dark"] .tbl-author { background-color: #27272a !important; color: #e4e4e7; } /* ── Comments ── */ html[data-theme="dark"] .comment-list article, html[data-theme="dark"] .comment-body { background-color: #27272a; color: #e4e4e7; border-color: #3f3f46; } html[data-theme="dark"] .comment-respond { background-color: #1c1c1e; color: #e4e4e7; } html[data-theme="dark"] .comment-meta, html[data-theme="dark"] .comment-metadata { color: #a1a1aa; } /* ── Search modal ── */ html[data-theme="dark"] #tbl-search-container { background: #27272a; color: #e4e4e7; } html[data-theme="dark"] #tbl-search-container input { background-color: #27272a; color: #e4e4e7; border-color: #52525b; } /* ── Inline related posts ── */ html[data-theme="dark"] .tbl-related-inline, html[data-theme="dark"] .tbl-inline-related-post, html[data-theme="dark"] .tbl-inline-post-bg { background-color: #27272a; border-color: #3f3f46; color: #e4e4e7; } html[data-theme="dark"] .tbl-inline-post-bg p a { color: #f4f4f5; } /* ── Inputs / forms ── */ html[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="reset"]), html[data-theme="dark"] textarea, html[data-theme="dark"] select { background-color: #27272a; color: #e4e4e7; border-color: #52525b; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #71717a !important; } /* ── Text selection ── */ html[data-theme="dark"] ::selection { background-color: #6f8e1d; color: #fff; } /* ── FAQ shortcode ── */ html[data-theme="dark"] .tbl-faq-item { background-color: #27272a; border-color: #3f3f46; color: #e4e4e7; } /* ── Review shortcode ── */ html[data-theme="dark"] .tbl-review { background-color: #27272a; border-color: #3f3f46; color: #e4e4e7; } /* ── Table shortcode ── */ html[data-theme="dark"] .tbl-table-wrap { border-color: #374151; } html[data-theme="dark"] .tbl-thead { background: #1f2937; } html[data-theme="dark"] .tbl-th { border-bottom-color: #374151; color: #f3f4f6; } html[data-theme="dark"] .tbl-td { border-bottom-color: #1f2937; color: #d1d5db; } html[data-theme="dark"] .tbl-tr:nth-child(even) .tbl-td { background: #111827; } html[data-theme="dark"] .tbl-caption { color: #9ca3af; } /* ── Review shortcode ── */ html[data-theme="dark"] .tbl-review { border-color: #374151; } html[data-theme="dark"] .tbl-review-name { color: #f3f4f6; } html[data-theme="dark"] .tbl-star-svg path:first-of-type { fill: #52525b; } html[data-theme="dark"] .tbl-rating-num { color: #d1d5db; } html[data-theme="dark"] .tbl-review-pros-col strong, html[data-theme="dark"] .tbl-review-cons-col strong { color: #9ca3af; } html[data-theme="dark"] .tbl-pro::before { color: #4ade80; } html[data-theme="dark"] .tbl-con::before { color: #f87171; } html[data-theme="dark"] .tbl-review-body { color: #d1d5db; } /* ── FAQ shortcode ── */ html[data-theme="dark"] .tbl-faq { border-color: #374151; } html[data-theme="dark"] .tbl-faq-item { border-top-color: #374151; } html[data-theme="dark"] .tbl-faq-q { color: #f3f4f6; } html[data-theme="dark"] .tbl-faq-a { color: #d1d5db; } /* ── WooCommerce ── */ /* Breadcrumb */ html[data-theme="dark"] .woocommerce-breadcrumb { color: #a1a1aa; } /* Product cards */ html[data-theme="dark"] .woocommerce ul.products li.product { background-color: #27272a; border-color: #3f3f46; color: #e4e4e7; } html[data-theme="dark"] .woocommerce ul.products li.product:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .woocommerce ul.products li.product .woocommerce-loop-product__title { color: #e4e4e7; } html[data-theme="dark"] .woocommerce ul.products li.product a img { opacity: 0.9; } /* Pagination */ html[data-theme="dark"] .woocommerce nav.woocommerce-pagination ul li a, html[data-theme="dark"] .woocommerce nav.woocommerce-pagination ul li span { background-color: #27272a; } /* Notices */ html[data-theme="dark"] .woocommerce-message, html[data-theme="dark"] .woocommerce-info, html[data-theme="dark"] .woocommerce-error { background-color: #27272a; color: #e4e4e7; border-color: #3f3f46; } /* Single product */ html[data-theme="dark"] .woocommerce div.product { background-color: #1c1c1e; color: #e4e4e7; } html[data-theme="dark"] .woocommerce div.product p.price, html[data-theme="dark"] .woocommerce div.product span.price { color: #8aad26; } html[data-theme="dark"] .woocommerce div.product p.in-stock { color: #4caf50; } html[data-theme="dark"] .woocommerce div.product p.out-of-stock { color: #ef5350; } html[data-theme="dark"] .woocommerce div.product .product_meta { color: #a1a1aa; border-color: #3f3f46; } html[data-theme="dark"] .woocommerce .related.products > h2, html[data-theme="dark"] .woocommerce .upsells.products > h2 { color: #f4f4f5; } html[data-theme="dark"] .woocommerce div.product .flex-control-thumbs li img:hover, html[data-theme="dark"] .woocommerce div.product .flex-control-thumbs li img.flex-active { opacity: 0.6; } /* Product tabs — underline style */ html[data-theme="dark"] .woocommerce div.product .woocommerce-tabs { border-bottom-color: #3f3f46; } html[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li a { color: #e4e4e7; } html[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active):hover { border-bottom-color: #9ec42c !important; } html[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: #8aad26 !important; } html[data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #8aad26; } html[data-theme="dark"] .woocommerce div.product .woocommerce-tabs .panel { color: #e4e4e7; } /* Cart */ html[data-theme="dark"] .woocommerce-cart-form, html[data-theme="dark"] .woocommerce-cart .cart-collaterals { color: #e4e4e7; } html[data-theme="dark"] .cart-collaterals .cart_totals { background-color: #27272a; border-color: #3f3f46; } html[data-theme="dark"] .woocommerce table.shop_table { background-color: #27272a; color: #e4e4e7; border-color: #3f3f46; } html[data-theme="dark"] .woocommerce table.shop_table th { background-color: #2d2d30; color: #f4f4f5; border-color: #3f3f46; } html[data-theme="dark"] .woocommerce table.shop_table td { border-color: #3f3f46; color: #e4e4e7; } html[data-theme="dark"] .woocommerce table.shop_table tr:nth-child(even) td { background-color: #2d2d30; } /* Checkout */ html[data-theme="dark"] .woocommerce-checkout #customer_details, html[data-theme="dark"] .woocommerce-checkout #order_review_heading, html[data-theme="dark"] .woocommerce-checkout #order_review { color: #e4e4e7; } html[data-theme="dark"] .woocommerce #payment { background-color: #27272a; border-color: #3f3f46; color: #e4e4e7; } html[data-theme="dark"] .woocommerce #payment ul.payment_methods { border-color: #3f3f46; } html[data-theme="dark"] .woocommerce #payment .payment_box { background-color: #2d2d30; color: #e4e4e7; } /* My account */ html[data-theme="dark"] .woocommerce-MyAccount-navigation ul li a { color: #a1a1aa; border-color: #3f3f46; } html[data-theme="dark"] .woocommerce-MyAccount-navigation ul li.is-active a, html[data-theme="dark"] .woocommerce-MyAccount-navigation ul li a:hover { color: #8aad26; } html[data-theme="dark"] .woocommerce-MyAccount-content { color: #e4e4e7; } /* Product widgets */ html[data-theme="dark"] .woocommerce ul.product_list_widget li { border-color: #3f3f46; color: #e4e4e7; } html[data-theme="dark"] .woocommerce ul.product_list_widget li a { color: #e4e4e7; } html[data-theme="dark"] .woocommerce ul.product_list_widget li a:hover { color: #8aad26; } /* ============================================ Toggle button styles ============================================ */ .tbl-dm-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; flex-shrink: 0; line-height: 1; } .tbl-dm-toggle:hover { background: rgba(128, 128, 128, 0.15); } /* Light mode: show moon (invite to switch to dark) */ .tbl-dm-sun { display: none; align-items: center; } .tbl-dm-moon { display: flex; align-items: center; } /* Dark mode: show sun (invite to switch to light) */ html[data-theme="dark"] .tbl-dm-sun { display: flex; } html[data-theme="dark"] .tbl-dm-moon { display: none; }