/* Dark theme for the Bootstrap 3 pages, plus the light/dark switcher. Light mode is untouched: every rule below only applies in dark mode, which follows the visitor's system setting unless they picked a theme with the switcher (data-theme="light" or "dark" on ). Generated: the same rules are emitted once for each of those two cases. */ :root { color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } :root:not([data-theme="light"]) body { background-color: #16181b; color: #d6d8dc; } :root:not([data-theme="light"]) a { color: #7db8ff; } :root:not([data-theme="light"]) a:hover, :root:not([data-theme="light"]) a:focus { color: #a8cfff; } :root:not([data-theme="light"]) hr { border-top-color: #33383e; } :root:not([data-theme="light"]) .navbar-default { background-color: #1f2226; background-image: none; border-color: #2c3035; box-shadow: none; } :root:not([data-theme="light"]) .navbar-default .navbar-brand { color: #e6e8eb; text-shadow: none; } :root:not([data-theme="light"]) .navbar-default .navbar-brand:hover, :root:not([data-theme="light"]) .navbar-default .navbar-brand:focus { color: #fff; } :root:not([data-theme="light"]) .navbar-default .navbar-nav > li > a { color: #b8bcc2; text-shadow: none; } :root:not([data-theme="light"]) .navbar-default .navbar-nav > li > a:hover, :root:not([data-theme="light"]) .navbar-default .navbar-nav > li > a:focus { color: #fff; } :root:not([data-theme="light"]) .navbar-default .navbar-nav > .active > a, :root:not([data-theme="light"]) .navbar-default .navbar-nav > .active > a:hover, :root:not([data-theme="light"]) .navbar-default .navbar-nav > .active > a:focus { color: #fff; background-color: #2c3035; background-image: none; box-shadow: none; } :root:not([data-theme="light"]) .navbar-default .navbar-toggle { border-color: #3a3f45; } :root:not([data-theme="light"]) .navbar-default .navbar-toggle:hover, :root:not([data-theme="light"]) .navbar-default .navbar-toggle:focus { background-color: #2c3035; } :root:not([data-theme="light"]) .navbar-default .navbar-toggle .icon-bar { background-color: #cfd2d6; } :root:not([data-theme="light"]) .navbar-default .navbar-collapse, :root:not([data-theme="light"]) .navbar-default .navbar-form { border-color: #2c3035; } :root:not([data-theme="light"]) .navbar-inverse .navbar-brand, :root:not([data-theme="light"]) .navbar-inverse .navbar-nav > li > a { color: #9d9d9d; } :root:not([data-theme="light"]) .navbar-inverse .navbar-brand:hover, :root:not([data-theme="light"]) .navbar-inverse .navbar-brand:focus, :root:not([data-theme="light"]) .navbar-inverse .navbar-nav > li > a:hover, :root:not([data-theme="light"]) .navbar-inverse .navbar-nav > li > a:focus, :root:not([data-theme="light"]) .navbar-inverse .navbar-nav > .active > a { color: #fff; } :root:not([data-theme="light"]) .form-control { background-color: #1f2226; color: #eceef1; border-color: #4a4f56; } :root:not([data-theme="light"]) .form-control::placeholder { color: #8d939b; } :root:not([data-theme="light"]) .form-control:focus { border-color: #7db8ff; box-shadow: inset 0 1px 1px rgba(0,0,0,.2), 0 0 8px rgba(125,184,255,.45); } :root:not([data-theme="light"]) .btn-default { color: #16181b; background-color: #dfe2e6; background-image: none; border-color: #dfe2e6; text-shadow: none; box-shadow: none; } :root:not([data-theme="light"]) .btn-default:hover, :root:not([data-theme="light"]) .btn-default:focus, :root:not([data-theme="light"]) .btn-default:active { color: #16181b; background-color: #f0f2f4; border-color: #f0f2f4; } :root:not([data-theme="light"]) .table > thead > tr > th, :root:not([data-theme="light"]) .table > tbody > tr > td, :root:not([data-theme="light"]) .table > tbody > tr > th { border-color: #3a3f45; } :root:not([data-theme="light"]) .table > thead > tr > th { border-bottom-color: #4a4f56; } :root:not([data-theme="light"]) .table-striped > tbody > tr:nth-of-type(odd) { background-color: #1e2125; } :root:not([data-theme="light"]) .table-hover > tbody > tr:hover { background-color: #282c31; } } :root[data-theme="dark"] body { background-color: #16181b; color: #d6d8dc; } :root[data-theme="dark"] a { color: #7db8ff; } :root[data-theme="dark"] a:hover, :root[data-theme="dark"] a:focus { color: #a8cfff; } :root[data-theme="dark"] hr { border-top-color: #33383e; } :root[data-theme="dark"] .navbar-default { background-color: #1f2226; background-image: none; border-color: #2c3035; box-shadow: none; } :root[data-theme="dark"] .navbar-default .navbar-brand { color: #e6e8eb; text-shadow: none; } :root[data-theme="dark"] .navbar-default .navbar-brand:hover, :root[data-theme="dark"] .navbar-default .navbar-brand:focus { color: #fff; } :root[data-theme="dark"] .navbar-default .navbar-nav > li > a { color: #b8bcc2; text-shadow: none; } :root[data-theme="dark"] .navbar-default .navbar-nav > li > a:hover, :root[data-theme="dark"] .navbar-default .navbar-nav > li > a:focus { color: #fff; } :root[data-theme="dark"] .navbar-default .navbar-nav > .active > a, :root[data-theme="dark"] .navbar-default .navbar-nav > .active > a:hover, :root[data-theme="dark"] .navbar-default .navbar-nav > .active > a:focus { color: #fff; background-color: #2c3035; background-image: none; box-shadow: none; } :root[data-theme="dark"] .navbar-default .navbar-toggle { border-color: #3a3f45; } :root[data-theme="dark"] .navbar-default .navbar-toggle:hover, :root[data-theme="dark"] .navbar-default .navbar-toggle:focus { background-color: #2c3035; } :root[data-theme="dark"] .navbar-default .navbar-toggle .icon-bar { background-color: #cfd2d6; } :root[data-theme="dark"] .navbar-default .navbar-collapse, :root[data-theme="dark"] .navbar-default .navbar-form { border-color: #2c3035; } :root[data-theme="dark"] .navbar-inverse .navbar-brand, :root[data-theme="dark"] .navbar-inverse .navbar-nav > li > a { color: #9d9d9d; } :root[data-theme="dark"] .navbar-inverse .navbar-brand:hover, :root[data-theme="dark"] .navbar-inverse .navbar-brand:focus, :root[data-theme="dark"] .navbar-inverse .navbar-nav > li > a:hover, :root[data-theme="dark"] .navbar-inverse .navbar-nav > li > a:focus, :root[data-theme="dark"] .navbar-inverse .navbar-nav > .active > a { color: #fff; } :root[data-theme="dark"] .form-control { background-color: #1f2226; color: #eceef1; border-color: #4a4f56; } :root[data-theme="dark"] .form-control::placeholder { color: #8d939b; } :root[data-theme="dark"] .form-control:focus { border-color: #7db8ff; box-shadow: inset 0 1px 1px rgba(0,0,0,.2), 0 0 8px rgba(125,184,255,.45); } :root[data-theme="dark"] .btn-default { color: #16181b; background-color: #dfe2e6; background-image: none; border-color: #dfe2e6; text-shadow: none; box-shadow: none; } :root[data-theme="dark"] .btn-default:hover, :root[data-theme="dark"] .btn-default:focus, :root[data-theme="dark"] .btn-default:active { color: #16181b; background-color: #f0f2f4; border-color: #f0f2f4; } :root[data-theme="dark"] .table > thead > tr > th, :root[data-theme="dark"] .table > tbody > tr > td, :root[data-theme="dark"] .table > tbody > tr > th { border-color: #3a3f45; } :root[data-theme="dark"] .table > thead > tr > th { border-bottom-color: #4a4f56; } :root[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: #1e2125; } :root[data-theme="dark"] .table-hover > tbody > tr:hover { background-color: #282c31; } /* Theme switcher: top right of the fixed navbar; shows a moon in light mode and a sun in dark mode */ #theme-toggle { position: fixed; top: 8px; right: 12px; z-index: 1040; width: 34px; height: 34px; padding: 6px; border: 1px solid #ccc; border-radius: 50%; background: #fff; color: #555; cursor: pointer; line-height: 0; } #theme-toggle:hover, #theme-toggle:focus-visible { color: #337ab7; border-color: #337ab7; } #theme-toggle[hidden] { display: none; } #theme-toggle svg { width: 20px; height: 20px; } #theme-toggle .icon-sun { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #theme-toggle { background: #1f2226; border-color: #4a4f56; color: #d6d8dc; } :root:not([data-theme="light"]) #theme-toggle:hover { color: #7db8ff; border-color: #7db8ff; } :root:not([data-theme="light"]) #theme-toggle .icon-sun { display: inline; } :root:not([data-theme="light"]) #theme-toggle .icon-moon { display: none; } } :root[data-theme="dark"] #theme-toggle { background: #1f2226; border-color: #4a4f56; color: #d6d8dc; } :root[data-theme="dark"] #theme-toggle:hover { color: #7db8ff; border-color: #7db8ff; } :root[data-theme="dark"] #theme-toggle .icon-sun { display: inline; } :root[data-theme="dark"] #theme-toggle .icon-moon { display: none; } /* On phones, sit to the left of the navbar's menu button */ @media (max-width: 767px) { #theme-toggle { right: 70px; } }