/* tools-developer brand theme — dark (default) + light, switched via [data-theme] on . Loaded after bootstrap/freelancer/app so these rules win the cascade without needing !important against the legacy Freelancer theme. */ :root, [data-theme="dark"] { --td-bg: #0A0C0B; --td-surface: #101412; --td-border: #1E2621; --td-green: #39D98A; --td-green-dark: #119E5E; --td-muted: #6C7A72; --td-text: #E6E9E6; --td-on-accent: #0A0C0B; } [data-theme="light"] { --td-bg: #F1F3F1; --td-surface: #FFFFFF; --td-border: #D8DEDA; --td-green: #119E5E; --td-green-dark: #0C7A48; --td-muted: #5B6B62; --td-text: #14201A; --td-on-accent: #FFFFFF; } body { background: var(--td-bg); color: var(--td-text); transition: background-color .15s ease, color .15s ease; } h1, h2, h3, h4, h5, h6 { color: var(--td-text); } a, a:hover, a:focus, a:active, a.active { color: var(--td-green); } a:hover { color: var(--td-green-dark); } ::selection { background: rgba(57, 217, 138, .28); } :focus-visible { outline: 2px solid var(--td-green); outline-offset: 2px; } /* Bootstrap surface utility classes used throughout the templates */ .bg-light, .navbar-light.bg-light, .bg-white, .card, .list-group-item, .modal-content, .dropdown-menu, .table { background-color: var(--td-surface) !important; color: var(--td-text); border-color: var(--td-border) !important; } .navbar { background-color: var(--td-surface) !important; border-bottom: 1px solid var(--td-border); } .navbar .navbar-brand, .navbar .nav-link, .navbar-light .navbar-brand, .navbar-light .navbar-nav .nav-link { color: var(--td-text) !important; } .navbar .nav-link:hover, .navbar .nav-link.active { color: var(--td-green) !important; } /* Bootstrap bakes navbar-dark's toggler icon as a light SVG; darken it back down for the light theme so it stays visible on a white navbar. */ [data-theme="light"] .navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(0.35); } /* Dark/light mode toggle button in the nav */ .theme-toggle-btn { background: transparent; border: 1px solid var(--td-border); color: var(--td-text); width: 2.25rem; height: 2.25rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; } .theme-toggle-btn:hover { border-color: var(--td-green); color: var(--td-green); } .theme-toggle-btn:focus-visible { outline: 2px solid var(--td-green); outline-offset: 2px; } /* Buttons: one accent color, no competing hues */ .btn-primary, .btn-success, .btn-info { background-color: var(--td-green); border-color: var(--td-green); color: var(--td-on-accent); } .btn-primary:hover, .btn-success:hover, .btn-info:hover { background-color: var(--td-green-dark); border-color: var(--td-green-dark); color: var(--td-on-accent); } .btn-outline-primary { color: var(--td-green); border-color: var(--td-green); } .btn-outline-primary:hover { background-color: var(--td-green); color: var(--td-on-accent); } /* Freelancer theme leftovers: navy sections + teal star dividers */ .bg-primary, section.bg-primary, header.masthead, .text-primary-color, .dark-primary-color, .default-primary-color { background-color: var(--td-bg) !important; color: var(--td-text); } hr.star-light:after { background-color: var(--td-green); color: var(--td-on-accent); } hr.star-light { border-color: var(--td-border); } hr.star-primary { border-color: var(--td-green); } hr.star-primary:after { background-color: var(--td-bg); color: var(--td-green); } /* Code/snippet blocks: the product itself, keep it readable and on-brand */ pre, code, .snippet-code, .code-block { background-color: var(--td-surface); color: var(--td-text); border: 1px solid var(--td-border); } .footer-bs { background-color: var(--td-surface); border-top: 1px solid var(--td-border); } /* The individual tool pages (converters, generators, etc.) each ship their own