Raw Source
jrwarwick / Jira Janky Poorman's Dark Mode 

// ==UserScript==
// @name         Jira Janky Poorman's Dark Mode
// @namespace    https://jrwarwick.github.io/
// @version      0.3
// @description  Jira is sometimes too bright, especially when you have a headache or working late at night in bedroom w/ S.O. trying to get sleep. This helps. Kinda.
// @author       justin.warwick@gmail.com
// @license      MIT
// @match        https://onprem-jira.domain.com/*
// @icon         https://marketplace.atlassian.com/s/images/favicon.ico
// @grant        none
// ==/UserScript==
// Note: targeted to Jira "DataCenter" 8.20-ish, with ServiceDesk. Mostly seems to work on Cloud, too.
// Note: you must edit the match special header vairable to appropriately for your jira server, 
//       but some userscript plugins don't like custom port numbers.

(function() {
    'use strict';
    var preserveScreenshots = true;

    //DataCenter edition (on-prem)

    //First do basic inversion, and as soon as possible.
    jQuery("html").css("filter","invert(82%) contrast(112%)");

    //Aha, what about screenshots? Maybe don't? or maybe only if they are "bright"?
    if (preserveScreenshots) {
        //https://stackoverflow.com/questions/13762864/image-brightness-detection-in-client-side-script
        jQuery("div.action-body img, #description-val img").css("filter","invert(90%) contrast(115%)");
        //, div.sd-activity-comment span.image-wrap>img     (already coverd by div.action-body img ?)
    }

    //Some items are AJAX loaded after this script fires, race condition style.
    //We could set a timer to "win" that race.
    ////setTimeout(function(){jQuery(".aui-avatar-inner > img, .sd-comment-avatar").css("filter","invert(82%) contrast(112%)"); },1200);
    //Or we can do style rule override at class level (rather than element-level-by-selector)
    jQuery("head").append('<style id="userscript_style_override" type="text/css"></style>');
    jQuery('#userscript_style_override').html(`
        /* pre-de/re-inversions */
        .aui-avatar-inner > img, .sd-comment-avatar, #priority-val > img, #cp-img, ul.aui-list-truncate img.icon { filter:invert(90%) contrast(115%); }
        #issue_actions_container .action-body a[file-preview-type="image"] > img { filter:invert(90%) contrast(115%) ; }

        /* some fine-tuning for things looking different when inverted, when its particularly jarring or perhaps semantically nullifying */
        a.aui-button { border:1px solid #DDE; }
        #header>.aui-header.aui-dropdown2-trigger-group { background-color:slategrey; }
        li.status > .aui-lozenge.jira-issue-status-lozenge-green, .aui-lozenge.jira-issue-status-lozenge-success, #status-val .jira-issue-status-lozenge-green {
            background-color: #a537aa ;
            border-color: orange ;
            color: #fff ;
         }
         table[data-testid="issue-table--table"] > tbody > tr > td .aui-lozenge.jira-issue-status-lozenge-green {
            background-color: #a537aa ;
            border-color: orange ;
            color: #fff ;
         }
         /* fine tuning for dashboards specifically */
         .jira-issue-status-lozenge.aui-lozenge.jira-issue-status-lozenge-green.jira-issue-status-lozenge-done {
            background-color: #a537aa ;
            border-color: orange ;
            color: #fff ;
         }
    `);

    //Cloud Edition// (which, note seems to *require* jQuery object name rather than $).
    let tmd = setTimeout(function(){
        jQuery("button[aria-label!='']>span>span>img").css("filter","invert(90%) contrast(115%)");
        jQuery("span[role='img']").css("filter","invert(90%) contrast(115%)");
        jQuery("span[style*='background-image']").css("filter","invert(90%) contrast(115%)");
        //this one kind of overlaps with some of the previous... jQuery("div[tabindex!=''] img")//
    },2222);
        //document.getElementsByTagName("body")[0].style.filter="brightness(66%)";
    //document.getElementsByTagName("body")[0].style.filter="contrast(66%)";

})();