/* Dark mode overrides + toggle button. Not part of the mCard template — kept separate from basic.css/layout.css so those stay identical to the vendored theme. Scoped by [data-theme="dark"], set on by the inline bootstrap script in index.html and toggled by js/theme-toggle.js. */ /* Tell the browser this page handles both schemes itself, tied to our own toggle state — not the OS/browser's independent preference. Without this, some browsers' own "force dark" content-darkening (common on mobile) can repaint the page on top of/instead of these rules: it may skip custom fixed-position controls like .theme-toggle (making them hard to spot) while leaving other elements, like the "+" contact button, in their light colors, producing a half-dark, inconsistent page that never touches this file. */ html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } .theme-toggle { position: fixed; left: 20px; bottom: 20px; z-index: 200; width: 48px; height: 48px; border: none; border-radius: 50%; background: #ed3b3b; color: #fefefe; font-size: 20px; line-height: 48px; text-align: center; cursor: pointer; box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2); transition: background 0.2s ease 0s; } .theme-toggle:hover { background: #d92e2e; } @media (max-width: 720px) { .theme-toggle { left: 15px; bottom: 15px; width: 42px; height: 42px; font-size: 18px; line-height: 42px; } } /* Share button — mirror image of the stock "+" contact button in .st-bts (theme/html/.../css/layout.css owns that one's shape/background/icon rules via ".st-box .st-bts a"; both buttons share that selector, so the dark-mode background override above already covers this one for free). Only the side needs overriding: the "+" sits at right:50% with a -160px right margin, this sits at left:50% with a -160px left margin instead. */ .st-box .st-bts a.share-btn { right: auto; left: 50%; margin: 0 0 0 -160px; } @media (max-width: 720px) { .st-box .st-bts a.share-btn { margin: 0 0 0 -145px; } } [data-theme="dark"] body, [data-theme="dark"] .container, [data-theme="dark"] .preloader { background: #161616; color: #999999; } [data-theme="dark"] .content-box, [data-theme="dark"] .st-box .st-bts a { background: #232323; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="dark"] strong, [data-theme="dark"] a, [data-theme="dark"] .section .title, [data-theme="dark"] .section .i_title .name, [data-theme="dark"] .st-box .st-title, [data-theme="dark"] .st-box .st-subtitle, [data-theme="dark"] .info-list ul li, [data-theme="dark"] .skills ul li .name, [data-theme="dark"] .cd-timeline .cd-timeline-block .cd-timeline-content .name, [data-theme="dark"] .reviews-carousel .content-box .name { color: #e8e8e8; } [data-theme="dark"] footer .copy { color: #999999; } [data-theme="dark"] .category, [data-theme="dark"] .btn.extra { background: #2e2e2e; color: #e8e8e8; } [data-theme="dark"] .info-list ul li { border-bottom-color: rgba(255, 255, 255, 0.15); } [data-theme="dark"] .skills ul li .progress { background: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .cd-timeline .cd-timeline-block .cd-timeline-content:before { border-left-color: #232323; } [data-theme="dark"] .cd-timeline .cd-timeline-block:nth-child(even) .cd-timeline-content:before { border-right-color: #232323; } [data-theme="dark"] .reviews-carousel .owl-dots .owl-dot { background: #999999; } [data-theme="dark"] .reviews-carousel .owl-dots .owl-dot.active { background: #ed3b3b; }