/* phpBB dark mode overrides. * Load this after the forum theme stylesheet. * Expected activation: add `dark` on or . */ html.dark, body.dark { --palette-bga-main-bgcolor: #202126; --phpbb-bg: var(--palette-bga-main-bgcolor); --phpbb-surface: #282a33; --phpbb-surface-alt: #31343d; --phpbb-surface-soft: #383a42; --phpbb-border: #474b56; --phpbb-text: #e5e7eb; --phpbb-text-muted: #b8c0cc; --phpbb-link: #80afca; --phpbb-link-active: #bfdbfe; --phpbb-success: #5fc451; --phpbb-warning: #e9c700; --phpbb-danger: #e4343c; } html.dark, body.dark, html.dark body, body.dark { background-color: var(--palette-bga-main-bgcolor); background-image: none; color: var(--phpbb-text); } html.dark a, body.dark a { color: var(--phpbb-link); } html.dark a:hover, html.dark a:focus, body.dark a:hover, body.dark a:focus { color: var(--phpbb-link-active); } html.dark .wrap, html.dark #wrap, html.dark .page-body, html.dark .page-content, body.dark .wrap, body.dark #wrap, body.dark .page-body, body.dark .page-content { background: var(--phpbb-bg); color: var(--phpbb-text); } html.dark .headerbar, html.dark .forabg, html.dark .forumbg, html.dark .navbar, html.dark .panel, html.dark .post, html.dark .bg1, html.dark .bg2, html.dark .bg3, html.dark .cp-main .panel, html.dark .ucp-main .panel, html.dark .topicreview, html.dark .rules, body.dark .headerbar, body.dark .forabg, body.dark .forumbg, body.dark .navbar, body.dark .panel, body.dark .post, body.dark .bg1, body.dark .bg2, body.dark .bg3, body.dark .cp-main .panel, body.dark .ucp-main .panel, body.dark .topicreview, body.dark .rules { background: var(--phpbb-surface); border-color: var(--phpbb-border); color: var(--phpbb-text); } html.dark .bg1, body.dark .bg1 { background: var(--phpbb-surface); } html.dark .bg2, body.dark .bg2 { background: var(--phpbb-surface-alt); } html.dark .bg3, body.dark .bg3 { background: var(--phpbb-surface-soft); } html.dark .headerbar, html.dark .forabg, html.dark .forumbg, body.dark .headerbar, body.dark .forabg, body.dark .forumbg { background-image: none; } html.dark .row, html.dark li.row, body.dark .row, body.dark li.row { border-color: var(--phpbb-border); } html.dark .row:hover, html.dark li.row:hover, body.dark .row:hover, body.dark li.row:hover { background: var(--phpbb-surface-alt); } html.dark h1, html.dark h2, html.dark h3, html.dark .site_logo, html.dark .forumtitle, html.dark .topictitle, html.dark .username, html.dark .username-coloured, body.dark h1, body.dark h2, body.dark h3, body.dark .site_logo, body.dark .forumtitle, body.dark .topictitle, body.dark .username, body.dark .username-coloured { color: var(--phpbb-text); } html.dark .subforums, html.dark .description, html.dark .responsive-hide, html.dark .pagination, html.dark .postprofile, html.dark .signature, html.dark .author, html.dark .notice, html.dark .time, body.dark .subforums, body.dark .description, body.dark .responsive-hide, body.dark .pagination, body.dark .postprofile, body.dark .signature, body.dark .author, body.dark .notice, body.dark .time { color: var(--phpbb-text-muted); } html.dark .postprofile strong, body.dark .postprofile strong { color: var(--phpbb-text-muted); } html.dark .dropdown, html.dark .dropdown-contents, html.dark .jumpbox-cat-link, html.dark .jumpbox-forum-link, body.dark .dropdown, body.dark .dropdown-contents, body.dark .jumpbox-cat-link, body.dark .jumpbox-forum-link { background: var(--phpbb-surface); border-color: var(--phpbb-border); color: var(--phpbb-text); } html.dark .dropdown li, body.dark .dropdown li { border-color: var(--phpbb-border); } html.dark .dropdown li:hover, body.dark .dropdown li:hover { background: var(--phpbb-surface-alt); } html.dark input, html.dark select, html.dark textarea, html.dark .inputbox, html.dark .button, html.dark .button1, html.dark .button2, body.dark input, body.dark select, body.dark textarea, body.dark .inputbox, body.dark .button, body.dark .button1, body.dark .button2 { background: var(--phpbb-surface-alt); border-color: var(--phpbb-border); color: var(--phpbb-text); } html.dark input::placeholder, html.dark textarea::placeholder, body.dark input::placeholder, body.dark textarea::placeholder { color: var(--phpbb-text-muted); } html.dark .button:hover, html.dark .button1:hover, html.dark .button2:hover, body.dark .button:hover, body.dark .button1:hover, body.dark .button2:hover { background: var(--phpbb-surface-soft); color: var(--phpbb-text); } html.dark .pagination li a, html.dark .pagination li span, body.dark .pagination li a, body.dark .pagination li span { background: var(--phpbb-surface-alt); border-color: var(--phpbb-border); color: var(--phpbb-text); } html.dark .pagination li.active span, body.dark .pagination li.active span { background: var(--phpbb-link); border-color: var(--phpbb-link); color: #0d0d0d; } html.dark blockquote, html.dark code, html.dark pre, html.dark .codebox, body.dark blockquote, body.dark code, body.dark pre, body.dark .codebox { background: var(--phpbb-surface-alt); border-color: var(--phpbb-border); color: var(--phpbb-text); } html.dark hr, html.dark .divider, body.dark hr, body.dark .divider { border-color: var(--phpbb-border); } html.dark .icon, html.dark .icon-red, html.dark .icon-green, body.dark .icon, body.dark .icon-red, body.dark .icon-green { filter: brightness(0.9) contrast(1.1); } html.dark .online, body.dark .online { background-image: none; box-shadow: inset 3px 0 0 var(--phpbb-success); } html.dark .error, html.dark .alert, body.dark .error, body.dark .alert { color: #ffd5d5; } html.dark .reported, body.dark .reported { background: color-mix(in srgb, var(--phpbb-danger) 18%, var(--phpbb-surface)); } html.dark .announcement, html.dark .sticky, body.dark .announcement, body.dark .sticky { background: var(--phpbb-surface-alt); } html.dark, html.dark body, body.dark { background-image: none; } html.dark .search-header, body.dark .search-header { box-shadow: 0 0 12px rgba(0, 0, 0, 0.45); } html.dark #site-description h1, body.dark #site-description h1, html.dark h3, body.dark h3, html.dark li.header dt, html.dark li.header dd, html.dark li.row strong, body.dark li.header dt, body.dark li.header dd, body.dark li.row strong, html.dark .postbody, html.dark .content, html.dark dl.faq dt, body.dark .postbody, body.dark .content, body.dark dl.faq dt, html.dark .post:target .content, html.dark .post:target h3 a, body.dark .post:target .content, body.dark .post:target h3 a, html.dark .content h2, html.dark .panel h2, body.dark .content h2, body.dark .panel h2 { color: var(--phpbb-text); border-color: var(--phpbb-border); } html.dark hr, html.dark hr.dashed, body.dark hr, body.dark hr.dashed, html.dark .signature, html.dark .notice, body.dark .signature, body.dark .notice, html.dark ul.topiclist dd, body.dark ul.topiclist dd, html.dark li.row:hover dd, body.dark li.row:hover dd { border-color: var(--phpbb-border); } html.dark ul.forums, html.dark .bg1, body.dark ul.forums, body.dark .bg1 { background-color: var(--phpbb-surface); } html.dark ul.topiclist li, html.dark ul.topiclist dd, body.dark ul.topiclist li, body.dark ul.topiclist dd, html.dark ul.topiclist dd.searchextra, body.dark ul.topiclist dd.searchextra { color: var(--phpbb-text-muted); } html.dark .ucprowbg, body.dark .ucprowbg { background-color: var(--phpbb-surface-alt); } html.dark .fieldsbg, body.dark .fieldsbg { background-color: var(--phpbb-surface-soft); } html.dark .forabg, html.dark .forumbg, html.dark .panel, html.dark .post, body.dark .forabg, body.dark .forumbg, body.dark .panel, body.dark .post { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28); } html.dark #tabs .tab > a, html.dark #navigation a, body.dark #tabs .tab > a, body.dark #navigation a { background-image: none; background-color: var(--phpbb-surface-alt); color: var(--phpbb-text); border-color: var(--phpbb-border); } html.dark .pagination li a:hover, body.dark .pagination li a:hover { background-color: var(--phpbb-link); border-color: var(--phpbb-link); color: #0d0d0d; } html.dark a:link, html.dark a:visited, html.dark a:active, body.dark a:link, body.dark a:visited, body.dark a:active, html.dark #search-box a:link, html.dark #search-box a:visited, html.dark #search-box a:hover, html.dark #search-box a:active, html.dark .navbg a:link, html.dark .navbg a:visited, html.dark .navbg a:hover, html.dark .navbg a:active, html.dark .forumbg .header a:link, html.dark .forumbg .header a:visited, html.dark .forumbg .header a:hover, html.dark .forumbg .header a:active, html.dark .forabg .header a:link, html.dark .forabg .header a:visited, html.dark .forabg .header a:hover, html.dark .forabg .header a:active, html.dark th a:link, html.dark th a:visited, html.dark th a:hover, html.dark th a:active, body.dark #search-box a:link, body.dark #search-box a:visited, body.dark #search-box a:hover, body.dark #search-box a:active, body.dark .navbg a:link, body.dark .navbg a:visited, body.dark .navbg a:hover, body.dark .navbg a:active, body.dark .forumbg .header a:link, body.dark .forumbg .header a:visited, body.dark .forumbg .header a:hover, body.dark .forumbg .header a:active, body.dark .forabg .header a:link, body.dark .forabg .header a:visited, body.dark .forabg .header a:hover, body.dark .forabg .header a:active, body.dark th a:link, body.dark th a:visited, body.dark th a:hover, body.dark th a:active, html.dark a.forumtitle, html.dark a.topictitle, body.dark a.forumtitle, body.dark a.topictitle, html.dark .postprofile a:link, html.dark .postprofile a:active, html.dark .postprofile a:visited, html.dark .postprofile dt.author a, body.dark .postprofile a:link, body.dark .postprofile a:active, body.dark .postprofile a:visited, body.dark .postprofile dt.author a, html.dark .search .postprofile a, body.dark .search .postprofile a, html.dark .postlink, body.dark .postlink, html.dark .phpbb_iframed a:link, html.dark .phpbb_iframed a:visited, html.dark .phpbb_iframed a:hover, body.dark .phpbb_iframed a:link, body.dark .phpbb_iframed a:visited, body.dark .phpbb_iframed a:hover { color: var(--phpbb-link); } html.dark a:hover, html.dark a:focus, html.dark a.forumtitle:hover, html.dark a.topictitle:hover, html.dark .postprofile a:hover, html.dark .postprofile dt.author a:hover, html.dark .search .postprofile a:hover, html.dark .postlink:hover, body.dark a:hover, body.dark a:focus, body.dark a.forumtitle:hover, body.dark a.topictitle:hover, body.dark .postprofile a:hover, body.dark .postprofile dt.author a:hover, body.dark .search .postprofile a:hover, body.dark .postlink:hover { color: var(--phpbb-link-active); } html.dark .postlink:hover, body.dark .postlink:hover { background-color: color-mix(in srgb, var(--phpbb-link) 18%, transparent); } html.dark img.avatar, body.dark img.avatar { border-color: var(--phpbb-border); background-color: var(--phpbb-surface-alt); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.05); } html.dark .bgaadminpost, body.dark .bgaadminpost { background-color: color-mix(in srgb, #385088 22%, var(--phpbb-surface)); outline-color: #5b84d6; } html.dark label, html.dark dl.mini dt { color: #738fc8; } html.dark dd label { color: #b8b8b8; } html.dark .phpbb_alert { background: var(--phpbb-bg); border-color: #31343d; }