f.lux (justgetflux.com)

But if I step away from my computer at night for an hour, and then go back to it, nothing appears unusual or jarring when I return

Yeah, that makes it totally unusable for me, it's ridiculous that they don't let the user set the hours and insist that you must follow the sun, because that's "more natural". Even though that might be true, it's totally impractical, you can't organise your work day after the sun, that's totally incompatible with the rest of society. At least os x night shift let's you set the time like the responsible adult that you are..

I use "Hacker News Readable Dark" under Stylus and this site looks fantastic.

https://i.imgur.com/gPyX0TW.jpg

Anyway, my vague understanding of what is does is that it inverts all colors on the wrong side of a user-configurable brightness threshold (e.g. backgrounds that are too bright are inverted, and text that is too dark is inverted). This can make website colorschemes quite different, but most of the websites I visit regularly are still still readable, and often still reasonably nice-looking, despite having inverted colors.

The relevant part of my config file looks like this:

  # This requests the dark version of the website if it is available. Generally when this
  # works, I guess brightness-based the color inversion doesn't happen.
  c.colors.webpage.preferred_color_scheme = 'dark'
  c.colors.webpage.darkmode.algorithm = 'lightness-cielab'
  c.colors.webpage.darkmode.contrast = 0.0
  c.colors.webpage.darkmode.enabled = True
  c.colors.webpage.darkmode.grayscale.all = False
  c.colors.webpage.darkmode.grayscale.images = 0.0
  c.colors.webpage.darkmode.policy.images = 'smart'
  c.colors.webpage.darkmode.policy.page = 'smart'
  c.colors.webpage.darkmode.threshold.background = 128
  c.colors.webpage.darkmode.threshold.text = 128 

[1] https://qutebrowser.org/

Where Dark Reader is full-featured, mine is minimal. It adds a translucent tinted div overlay on every page, with mix-blend-mode:multiply to make the text come out a little sharper. No themes or querying page elements.

You can audit the code yourself if you want, it's only 58 lines of JS across 2 files:

    // content.js (this runs on every page):
    'use strict';
    const C=chrome, d=document.createElement('div'),
        update=(o={})=>{
            if('tog' in o){d.style.height = (o.tog.newValue | o.tog)+'00%';}
            if('color' in o){d.style.backgroundColor = o.color.newValue || o.color;}
        };

    d.style='mix-blend-mode:multiply; z-index:2147483647; position:fixed; width:100%; top:0; right:0; pointer-events:none;';
    document.documentElement.insertBefore(d, document.documentElement.firstChild);
    C.storage.local.get(null, update);
    C.runtime.onMessage.addListener(update);
    C.storage.onChanged.addListener(update);


    // popup.js:
    'use strict';
    let XY=[150,40];
    const C=chrome, S=C.storage.local,
        send=x=>C.tabs.query({active:true,currentWindow:true}, t=>C.tabs.sendMessage(t[0].id, x)),
        torgba=x=>`rgba(${x[0]}, ${x[1]}, ${x[2]}, ${x[3]/255})`,
        dropper=(x,y)=>torgba(c.getImageData(x,y,1,1).data),
        target=(x,y)=>{c.fillStyle = 'black'; c.beginPath(); c.arc(x,y,30,0,Math.PI*2,true); c.stroke();},
        touch_xy=t=>{const r=c.canvas.getBoundingClientRect(), f=(x,ox,r)=>Math.floor(Math.min(Math.max(x,ox+1),r-1)-ox);
                    return[f(t.pageX, r.left, r.right), f(t.pageY, r.top, r.bottom)];},
        init_c=()=>{
            c.clearRect(0,0,c.canvas.width,c.canvas.height);
            c.canvas.style.backgroundColor='white';
            const g1=c.createLinearGradient(0, 0, c.canvas.width, 0), // horiz, hue
                    g2=c.createLinearGradient(0, 0, 0, c.canvas.height);  // vert, lightness
            g1.addColorStop(0.2,'rgba(255,120,120,0)');
            g1.addColorStop(1,'rgba(255,130,70,0.99)');
            g2.addColorStop(0,'rgba(0,0,0,0)');
            g2.addColorStop(1,'rgba(0,0,0,0.8)');
            c.fillStyle = g1; c.fillRect(0,0,c.canvas.width,c.canvas.height);
            c.fillStyle = g2; c.fillRect(0,0,c.canvas.width,c.canvas.height);},
        xy_send=(xy)=>{init_c(); target(...xy); send({xy, color:dropper(...xy)});},
        xy_save=(xy)=>{init_c(); target(...xy); S.set({xy, color:dropper(...xy)});},
        c=document.getElementById('c').getContext('2d'),
        tog=document.getElementById('tog');

    window.addEventListener('load',()=>{
        S.get(null, o=>{
            if('tog' in o){tog.checked = o.tog;} else {S.set({tog:tog.checked});}
            if('xy' in o){init_c(); target(...o.xy); XY=o.xy;} else {S.set({xy:XY});} // color's xy coords in canvas
            if(!('color' in o)){S.set({color:dropper(...XY)});} // hardcoded default xy location
        });
        tog.addEventListener('change', x=>{S.set({tog:tog.checked});});
        c.canvas.addEventListener('mousemove', x=>{if(x.buttons!==1){return;} xy_send([x.offsetX, x.offsetY]);});
        c.canvas.addEventListener('mouseup', x=>xy_save([x.offsetX, x.offsetY]));
        c.canvas.addEventListener('touchmove', x=>xy_send(touch_xy(x.targetTouches[0])));
        c.canvas.addEventListener('touchend', x=>xy_save(touch_xy(x.changedTouches[0])));
    });
    window.addEventListen...