Skip to content

Instantly share code, notes, and snippets.

@chadlavi chadlavi/hn.user.js
Last active Apr 14, 2020

Embed
What would you like to do?
give HN a dark mode
// ==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'))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.