/* --------------------------------------------------------------------------- * Theme tokens and dark mode. * * Replaces css/darkreader.css, which was a 10,000-line Dark Reader browser * extension export (an algorithmic inversion of computed styles) that had been * hand-patched and so could never be regenerated. * * How it works: an inline script in base-template.jnj resolves the theme before * first paint and sets data-theme="light" or "dark" on . Light mode is the * stylesheets' natural appearance, so nothing here applies. Dark mode swaps the * token values and overrides the Bootstrap surfaces this site actually uses. * * Note this Bootstrap is a customised build (navbar-default is #377eba, not * stock #f8f8f8), so the light values below are taken from css/bootstrap.css * rather than Bootstrap defaults. The dark palette is the One Dark-ish scheme * the Dark Reader export produced, preserved so the site looks unchanged. * ------------------------------------------------------------------------- */ :root { --wj-bg: #ffffff; --wj-surface: #f5f5f5; --wj-surface-raised: #ffffff; --wj-text: #333333; --wj-text-muted: #a1a4ab; --wj-heading: #333333; --wj-link: #377eba; --wj-link-hover: #26567f; --wj-border: #dddddd; --wj-border-strong: #cccccc; --wj-rule: #aaaaaa; --wj-navbar-bg: #377eba; --wj-navbar-border: #2f6da0; --wj-navbar-fg: #ffffff; --wj-navbar-active-bg: #2f6da0; --wj-primary-bg: #377eba; --wj-primary-fg: #ffffff; --wj-default-bg: #a1a4ab; --wj-info-bg: #d9edf7; --wj-info-fg: #3a87ad; --wj-info-border: #bce8f1; --wj-success-bg: #dff0d8; --wj-success-fg: #468847; --wj-success-border: #d6e9c6; --wj-warning-bg: #fcf8e3; --wj-warning-fg: #8a6d3b; --wj-warning-border: #faebcc; --wj-danger-bg: #f2dede; --wj-danger-fg: #a94442; --wj-danger-border: #ebccd1; --wj-code-fg: #c7254e; --wj-code-bg: #f9f2f4; --wj-accolade: rgb(128, 0, 0); --wj-fill-fg: #ffffff; --wj-footer-bg: #f5f5f5; --wj-footer-border: gray; --wj-frame-bg: #ffffff; --wj-frame-border: #dddddd; --wj-shadow: rgba(0, 0, 0, 0.15); } html[data-theme="dark"] { --wj-bg: #282c34; --wj-surface: #2c3039; /* dark equivalent of light #f5f5f5 */ --wj-surface-raised: #282c34; /* flat against the page, as the previous theme had it */ --wj-text: #98a1b1; --wj-text-muted: #8b94a6; --wj-heading: #98a1b1; --wj-link: #64a2d1; --wj-link-hover: #8fc4e8; --wj-border: #3a3f4b; --wj-border-strong: #444a58; --wj-rule: #434956; --wj-navbar-bg: #2c6595; --wj-navbar-border: #2c6695; --wj-navbar-fg: #abb2bf; --wj-navbar-active-bg: #224f76; --wj-primary-bg: #2c6595; --wj-primary-fg: #dbe3ee; --wj-default-bg: #4a5160; --wj-info-bg: #14445d; --wj-info-fg: #7fb8d4; --wj-info-border: #165a68; --wj-success-bg: #3c5b23; --wj-success-fg: #72b673; --wj-success-border: #428043; --wj-warning-bg: #483d08; --wj-warning-fg: #d9b25f; --wj-warning-border: #7e612e; --wj-danger-bg: #572229; --wj-danger-fg: #e09a98; --wj-danger-border: #813331; --wj-code-fg: #e58fa5; --wj-code-bg: #33292d; --wj-accolade: #ff4242; --wj-fill-fg: #abb2bf; --wj-footer-bg: #2c3039; --wj-footer-border: #4d5565; --wj-frame-bg: #282c34; --wj-frame-border: #353b45; --wj-shadow: rgba(0, 0, 0, 0.45); color-scheme: dark; } /* -------------------------------------------------------------------------- * Everything below applies to dark mode only. Light mode is the stylesheets' * natural appearance and is deliberately left untouched. * ------------------------------------------------------------------------ */ /* Base ------------------------------------------------------------------- */ html[data-theme="dark"] body { background-color: var(--wj-bg); color: var(--wj-text); } html[data-theme="dark"] a { color: var(--wj-link); } html[data-theme="dark"] a:hover, html[data-theme="dark"] a:focus { color: var(--wj-link-hover); } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--wj-heading); } html[data-theme="dark"] hr, html[data-theme="dark"] .container h2 { border-color: var(--wj-rule); } html[data-theme="dark"] small, html[data-theme="dark"] .text-muted { color: var(--wj-text-muted); } html[data-theme="dark"] code { color: var(--wj-code-fg); background-color: var(--wj-code-bg); } html[data-theme="dark"] pre { color: var(--wj-text); background-color: var(--wj-surface); border-color: var(--wj-border); } html[data-theme="dark"] blockquote { border-color: var(--wj-border-strong); } html[data-theme="dark"] ::selection { background: var(--wj-primary-bg); color: var(--wj-primary-fg); } /* Navbar ----------------------------------------------------------------- */ html[data-theme="dark"] .navbar-default { background-color: var(--wj-navbar-bg); border-color: var(--wj-navbar-border); } html[data-theme="dark"] .navbar-default .navbar-brand, html[data-theme="dark"] .navbar-default .navbar-nav > li > a, html[data-theme="dark"] .navbar-default .navbar-text { color: var(--wj-navbar-fg); } html[data-theme="dark"] .navbar-default .navbar-nav > li > a:hover, html[data-theme="dark"] .navbar-default .navbar-nav > li > a:focus, html[data-theme="dark"] .navbar-default .navbar-brand:hover { color: #ffffff; } html[data-theme="dark"] .navbar-default .navbar-nav > .active > a, html[data-theme="dark"] .navbar-default .navbar-nav > .active > a:hover, html[data-theme="dark"] .navbar-default .navbar-nav > .active > a:focus { background-color: var(--wj-navbar-active-bg); color: #ffffff; } html[data-theme="dark"] .navbar-default .navbar-toggle { border-color: var(--wj-navbar-border); } html[data-theme="dark"] .navbar-default .navbar-toggle .icon-bar { background-color: var(--wj-navbar-fg); } html[data-theme="dark"] .navbar-default .navbar-collapse, html[data-theme="dark"] .navbar-default .navbar-form { border-color: var(--wj-navbar-border); } /* Panels ----------------------------------------------------------------- */ html[data-theme="dark"] .panel { background-color: var(--wj-surface-raised); box-shadow: 0 1px 1px var(--wj-shadow); } html[data-theme="dark"] .panel-default { border-color: var(--wj-border); } html[data-theme="dark"] .panel-default > .panel-heading { color: var(--wj-text); background-color: var(--wj-surface); border-color: var(--wj-border); } html[data-theme="dark"] .panel-info { border-color: var(--wj-info-border); } html[data-theme="dark"] .panel-info > .panel-heading { color: var(--wj-info-fg); background-color: var(--wj-info-bg); border-color: var(--wj-info-border); } html[data-theme="dark"] .panel-success { border-color: var(--wj-success-border); } html[data-theme="dark"] .panel-success > .panel-heading { color: var(--wj-success-fg); background-color: var(--wj-success-bg); border-color: var(--wj-success-border); } html[data-theme="dark"] .panel-footer { background-color: var(--wj-surface); border-color: var(--wj-border); } /* Buttons ---------------------------------------------------------------- */ html[data-theme="dark"] .btn-default { color: var(--wj-fill-fg); background-color: var(--wj-default-bg); border-color: #444a58; } html[data-theme="dark"] .btn-default:hover, html[data-theme="dark"] .btn-default:focus, html[data-theme="dark"] .btn-default:active { color: #ffffff; background-color: #5b6373; border-color: #5b6373; } html[data-theme="dark"] .btn-primary { color: #ffffff; background-color: var(--wj-primary-bg); border-color: var(--wj-primary-bg); } html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] .btn-primary:focus, html[data-theme="dark"] .btn-primary:active { background-color: #3579b0; border-color: #3579b0; } html[data-theme="dark"] .btn-success { color: #ffffff; background-color: var(--wj-success-border); border-color: var(--wj-success-border); } html[data-theme="dark"] .btn-info { color: #ffffff; background-color: var(--wj-info-border); border-color: var(--wj-info-border); } html[data-theme="dark"] .btn-warning { color: #ffffff; background-color: var(--wj-warning-border); border-color: var(--wj-warning-border); } html[data-theme="dark"] .btn-danger { color: #ffffff; background-color: var(--wj-danger-border); border-color: var(--wj-danger-border); } html[data-theme="dark"] .btn-link { color: var(--wj-link); } html[data-theme="dark"] .btn-link:hover { color: var(--wj-link-hover); } /* Alerts ----------------------------------------------------------------- */ html[data-theme="dark"] .alert-info { color: var(--wj-info-fg); background-color: var(--wj-info-bg); border-color: var(--wj-info-border); } html[data-theme="dark"] .alert-success { color: var(--wj-success-fg); background-color: var(--wj-success-bg); border-color: var(--wj-success-border); } html[data-theme="dark"] .alert-warning { color: var(--wj-warning-fg); background-color: var(--wj-warning-bg); border-color: var(--wj-warning-border); } html[data-theme="dark"] .alert-danger { color: var(--wj-danger-fg); background-color: var(--wj-danger-bg); border-color: var(--wj-danger-border); } html[data-theme="dark"] .alert a, html[data-theme="dark"] .alert .alert-link { color: inherit; text-decoration: underline; } /* Contextual text helpers ------------------------------------------------ */ html[data-theme="dark"] .text-success { color: var(--wj-success-fg); } html[data-theme="dark"] .text-info { color: var(--wj-info-fg); } html[data-theme="dark"] .text-warning { color: var(--wj-warning-fg); } html[data-theme="dark"] .text-danger { color: var(--wj-danger-fg); } html[data-theme="dark"] .bg-success { background-color: var(--wj-success-bg); } html[data-theme="dark"] .bg-info { background-color: var(--wj-info-bg); } html[data-theme="dark"] .bg-warning { background-color: var(--wj-warning-bg); } html[data-theme="dark"] .bg-danger { background-color: var(--wj-danger-bg); } /* Thumbnails, wells, list groups, dropdowns, tables ----------------------- */ html[data-theme="dark"] .thumbnail { background-color: var(--wj-surface-raised); border-color: var(--wj-border); } html[data-theme="dark"] .thumbnail .caption { color: var(--wj-text); } html[data-theme="dark"] .well { background-color: var(--wj-surface); border-color: #343943; } html[data-theme="dark"] .list-group-item { background-color: var(--wj-surface-raised); border-color: var(--wj-border); color: var(--wj-text); } html[data-theme="dark"] .list-group-item-heading { color: var(--wj-heading); } html[data-theme="dark"] .dropdown-menu { background-color: var(--wj-bg); border-color: var(--wj-border-strong); box-shadow: 0 6px 12px var(--wj-shadow); } html[data-theme="dark"] .dropdown-menu > li > a { color: var(--wj-text); } html[data-theme="dark"] .dropdown-menu > li > a:hover, html[data-theme="dark"] .dropdown-menu > li > a:focus { background-color: var(--wj-surface-raised); color: var(--wj-link-hover); } html[data-theme="dark"] .dropdown-menu .divider { background-color: var(--wj-border); } html[data-theme="dark"] .table, html[data-theme="dark"] .table > thead > tr > th, html[data-theme="dark"] .table > tbody > tr > td, html[data-theme="dark"] .table > tbody > tr > th { color: var(--wj-text); border-color: var(--wj-border); } html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--wj-surface-raised); } html[data-theme="dark"] .table-hover > tbody > tr:hover { background-color: var(--wj-surface); } /* Nav, tabs, pills, pagination ------------------------------------------- */ html[data-theme="dark"] .nav-tabs { border-color: var(--wj-border); } html[data-theme="dark"] .nav-tabs > li > a { color: var(--wj-link); } html[data-theme="dark"] .nav-tabs > li > a:hover { background-color: var(--wj-surface); border-color: var(--wj-border); } html[data-theme="dark"] .nav-tabs > li.active > a, html[data-theme="dark"] .nav-tabs > li.active > a:hover, html[data-theme="dark"] .nav-tabs > li.active > a:focus { color: var(--wj-text); background-color: var(--wj-bg); border-color: var(--wj-border); border-bottom-color: transparent; } html[data-theme="dark"] .nav > li > a:hover, html[data-theme="dark"] .nav > li > a:focus { background-color: var(--wj-surface); } html[data-theme="dark"] .nav-pills > li.active > a, html[data-theme="dark"] .nav-pills > li.active > a:hover { background-color: var(--wj-primary-bg); color: #ffffff; } html[data-theme="dark"] .pagination > li > a, html[data-theme="dark"] .pagination > li > span { color: var(--wj-link); background-color: var(--wj-surface-raised); border-color: var(--wj-border); } /* Labels and badges ------------------------------------------------------ */ html[data-theme="dark"] .label-default, html[data-theme="dark"] .badge { background-color: var(--wj-default-bg); color: var(--wj-text); } html[data-theme="dark"] .label-primary { background-color: var(--wj-primary-bg); } html[data-theme="dark"] .label-success { background-color: var(--wj-success-border); } html[data-theme="dark"] .label-info { background-color: var(--wj-info-border); } html[data-theme="dark"] .label-warning { background-color: var(--wj-warning-border); } html[data-theme="dark"] .label-danger { background-color: var(--wj-danger-border); } /* Forms ------------------------------------------------------------------ */ html[data-theme="dark"] .form-control { color: var(--wj-text); background-color: var(--wj-surface-raised); border-color: var(--wj-border-strong); } html[data-theme="dark"] .form-control::placeholder { color: var(--wj-text-muted); } html[data-theme="dark"] .input-group-addon { color: var(--wj-text); background-color: var(--wj-surface); border-color: var(--wj-border-strong); } /* Site-specific components ----------------------------------------------- */ html[data-theme="dark"] dl.newslist dd { border-color: var(--wj-border); } html[data-theme="dark"] .paper-accolades, html[data-theme="dark"] .publication-accolades, html[data-theme="dark"] .publication-accolades a { color: var(--wj-accolade); } html[data-theme="dark"] .thumb-frame-16x9 { background: var(--wj-surface); } html[data-theme="dark"] .cycle-overlay { background: rgba(0, 0, 0, 0.75); color: var(--wj-text); } /* Carousel --------------------------------------------------------------- */ html[data-theme="dark"] .carousel .carousel-caption { color: var(--wj-text-muted); text-shadow: none; } html[data-theme="dark"] .carousel .carousel-indicators li { background-color: var(--wj-text-muted); } html[data-theme="dark"] .carousel-control { color: var(--wj-text); } /* Images: soften pure-white artwork slightly so it does not glare --------- */ html[data-theme="dark"] .publication-thumb img, html[data-theme="dark"] .teaser img { filter: brightness(0.92); } /* -------------------------------------------------------------------------- * Markdeep pages (faq.md.html, policies.md.html, writing.md.html) * * These are hand-written documents that do not load Bootstrap; js/markdeep-custom.js * injects this stylesheet and sets data-theme the same way base-template.jnj does. * They need their own dark rules because none of the Bootstrap overrides above * apply to them. * ------------------------------------------------------------------------ */ html[data-theme="dark"] .md, html[data-theme="dark"] body#md { color: var(--wj-text); background-color: var(--wj-bg); } html[data-theme="dark"] .md h1, html[data-theme="dark"] .md h2, html[data-theme="dark"] .md h3, html[data-theme="dark"] .md h4, html[data-theme="dark"] .md .tocHeader { color: var(--wj-heading); border-color: var(--wj-rule); } html[data-theme="dark"] .md code, html[data-theme="dark"] .md pre.listing { color: var(--wj-text); background-color: var(--wj-surface); } html[data-theme="dark"] .md table.table th { background-color: var(--wj-surface); color: var(--wj-text); } html[data-theme="dark"] .md table.table td, html[data-theme="dark"] .md table.table th { border-color: var(--wj-border); } html[data-theme="dark"] .md blockquote, html[data-theme="dark"] .md .fenced { border-color: var(--wj-border-strong); } html[data-theme="dark"] #navbar { background: var(--wj-navbar-bg); } html[data-theme="dark"] #navbar a { color: var(--wj-navbar-fg); } html[data-theme="dark"] .md .longTOC a, html[data-theme="dark"] .md .mediumTOC a, html[data-theme="dark"] .md .shortTOC a { color: var(--wj-link); } /* -------------------------------------------------------------------------- * Site chrome defined in custom.css that carries its own light colours and so * needs explicit dark values. * ------------------------------------------------------------------------ */ /* The portrait slideshow frame: custom.css gives the img a white background and a #ddd border, which showed as a white frame in dark mode. */ html[data-theme="dark"] #slideshow img { background-color: var(--wj-frame-bg); border-color: var(--wj-frame-border); } html[data-theme="dark"] #footer { background-color: var(--wj-footer-bg); border-top-color: var(--wj-footer-border); } html[data-theme="dark"] .research-thumbnail { border-color: #6e7a91; } html[data-theme="dark"] .old-course, html[data-theme="dark"] .old-course a { color: #7d889c; } html[data-theme="dark"] .anchor-links { color: #8c96a8; } html[data-theme="dark"] .navbar-custom { background-color: #48505e; color: #8c96a8; }