give HN a dark mode

hn.user.js

// ==UserScript==
// @name          HN accessibility patch
// @version       1.0.0
// @namespace     https://gist.github.com/chadlavi/38caf8b4ed7dcae3c4b5d5caff2ff3e7
// @author        Chad Lavimoniere
// @grant         none
// @include       https://news.ycombinator.com/*
// @downloadURL   https://gist.github.com/chadlavi/38caf8b4ed7dcae3c4b5d5caff2ff3e7/raw/hn.user.js
// @updateURL     https://gist.github.com/chadlavi/38caf8b4ed7dcae3c4b5d5caff2ff3e7/raw/hn.user.js
// ==/UserScript==


const globalStyle = `<style type="text/css">
:root {
  --base-font-size: 15px;
  --line-height: 1.2;
  --orange-color: #ff6600;
  --link-color: #000099;
  --button-color: #d5d5d5;
  --text-color: black;
  --grey-color: #666;
  --background-color: white;
}
@media (prefers-color-scheme: dark) {
  :root{
    --link-color: #6464ff;
    --button-color: #353535;
    --text-color: white;
    --grey-color: #888;
    --background-color: black;
  }
}
:focus {
	box-shadow: 0 0 0 2px var(--background-color), 0 0 0 6px var(--orange-color) !important;
	outline: none !important;
}

body {
  margin: 0 !important;
}
#hnmain {
  width: 100% !important;
}
body, #hnmain {
  background: var(--background-color) !important;
  background-color: var(--background-color) !important;
}
td,tr,a,p,div,span {
  color: var(--text-color) !important;
  font-size: var(--base-font-size) !important;
  line-height: var(--line-height) !important;
}
textarea {
	color: var(--text-color) !important;
	font-size: var(--base-font-size) !important;
	line-height: var(--line-height) !important;
	background: var(--background-color);
	padding: 4px;
	border-radius: 3px;
	border: 1px solid;
}
input[type="submit"] {
	color: var(--text-color);
	background: var(--button-color);
	border: 1px solid;
	padding: 6px 16px;
	border-radius: 4px;
}
td.subtext, td.subtext * {
  font-size: 12px !important;
	color: var(--grey-color) !important;
}
div.comment {
  overflow: unset !important;
}
#hnmain td[bgColor] * {
  color: black !important;
}

a:focus {
	display: inline-block !important;
}
#skipnavcontainer, #backtotopcontainer {
	display: block !important;
	left: 0 !important;
	position: fixed !important;
	width: 100% !important;
	z-index: 1000 !important;
}
#skipnavcontainer {
	top: -300px !important;
}
#skipnavcontainer:focus-within {
	top: 0 !important;
}
#backtotopcontainer {
	bottom: -300px !important;
}
#backtotopcontainer:focus-within {
	bottom: 0 !important;
}
a#skipnav, a#backtotop {
	background: var(--background-color) !important;
	display: block !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 15px !important;
	width: -moz-fit-content !important; 
	width: fit-content !important;
}
</style>`

// HTML snippet to insert a skipnav link
const skipLink = `<div id="skipnavcontainer"><a id="skipnav" href="#main">Skip to main content</a></div>`

// HTML snippet to insert an anchor that the skip nav can link to
const mainSpan = `<span id="main"></span>`

// convenience function for inserting one or more HTML snippets at a given position in a given parent element
const ins = (html, position, parent) => {
	const el = Array.isArray(html) ? html : [html]
	el.forEach(e => parent.insertAdjacentHTML(position, e))
}

ins([globalStyle, skipLink], 'afterbegin', document.body)

ins(mainSpan, 'beforeend', document.querySelector('tr#pagespace'))