A Dark Mode script for Phoronix.com

phoronix-dark.js

if (/:\/\/(www\.)?phoronix\.com/.test(window.location.href)) {
  let bgH = "#333333";
  let bgL = "#222222";
  let text = "#e0e0e0";
  let textH = "#e0e0e0";
  let textL = "#aeaeae";
  let accent = "#666666";
  let css = `
    body {
      background: ${bgH};
      color: ${text};
    }

    #content-bg {
      background: ${bgH};
    }

    #content, #main { background: ${bgL}; }

    #sharebar {
      background: ${bgL};
      border: 1px solid ${bgH};
    }

    h2 { color: ${textH}; }

    article, p { color: ${text}; }

    article {
      border-bottom: 1px dotted ${accent};
    }

    article.full::after {
      border-bottom: 20px dotted ${accent};
    }

    article .details,
    article .details a {
      color: ${textL};
    }

    #sidebar aside header,
    .article-box header,
    #about-author header,
    .wide-article-box header {
      color: ${textL};
    }

    #sidebar aside { color: ${textL}; }

    #content {
      border-left: 1px solid ${accent};
      border-right: 1px solid ${accent};
    }

    #sidebar-wrap {
      border-left: 1px solid ${accent};
    }

    #main { border-right: 1px solid ${accent} }

    /* forum shit */

    .b-top-menu__background {
      background: ${bgH};
    }

    .b-top-menu__background:before {
      border-bottom: 1px solid ${accent};
    }

    .b-top-menu__item {
      border-right-color: ${accent};
    }

    .view-mode .widget-no-border > .widget-header {
      background: ${bgH};
      color: ${textH};
    }
    .page-title-widget .module-title, .page-title-widget .module-title h1 {
      color: ${textH};
    }

    .view-mode .widget-tabs .widget-tabs-nav,
    .conversation-toolbar-wrapper .conversation-toolbar,
    .forum-list-container .forum-list-header,
    .widget-tabs .widget-tabs-nav .ui-tabs-nav,
    .widget-tabs .widget-tabs-nav li.ui-tabs-active,
    body .forum-list-container {
      color: ${textH} !important;
      background: ${bgL} !important;
    }

    .forum-list-container .category-header {
      color: ${textH};
      background: ${bgH};
    }

    .widget-tabs .widget-tabs-nav li.ui-tabs-active a,
    .forum-list-container .forum-item,
    .forum-list-container .subforum-list,
    .blogmember-list .list-container .list-item,
    .sg-groups-list .sg-groups-list-container .list-item {
      color: ${textL};
    }

    .canvas-layout-container .canvas-widget,
    .canvas-layout-container .widget-header {
      background: ${bgH};
    }

    .module-title h1 {
      color: ${textH};
    }

    .widget-content, .post-content {
      color: ${textL};
    }

    body:not(.l-small) .canvas-widget:not(.page-title-widget) .widget-header {
      border-bottom: 1px solid ${accent};
    }

    .b-post-sm {
      border-top: 1px solid ${accent};
    }

    body .forum-list-container .forum-item td, body .subchannel-widget .forum-list-container .forum-item td[class] {
      border-top: 1px solid ${accent};
    }

    .b-post--first .b-post__body,
    .b-post__body {
      background: ${bgL};
    }

    .b-post {
      background: #444444;
    }

    #breadcrumbs .crumb-link {
      color: ${textL};
    }

    .b-post--first .b-post__arrow {
      border-right-color: ${bgL};
    }

    .b-post__arrow {
      border-right: 10px solid ${bgL};
    }

    .b-userinfo {
      color: ${textL};
    }

    .forum-list-container .category-header .category {
      color: ${textL} !important;
    }
  `
  let el = document.createElement("style")
  el.innerText = css;
  document.head.append(el);
}
// update: gist -u 72dab0153c36de02f68b18da837c029b phoronix-dark.js