Skip to content

Instantly share code, notes, and snippets.

@fullyninja
Created February 24, 2021 01:43
Show Gist options
  • Save fullyninja/e3d14c628350f23bb71dcbe3191ecc60 to your computer and use it in GitHub Desktop.
Save fullyninja/e3d14c628350f23bb71dcbe3191ecc60 to your computer and use it in GitHub Desktop.
A simple and hacky TamperMonkey script to convert Jira to dark mode. Sort of.
// ==UserScript==
// @name Jira Dark Mode
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Convert Jira to dark mode.
// @author Peter Evans
// @match https://*.atlassian.net/*
// @grant none
// @require https://cdn.walkme.com/player/resources/wmjQuery3315.js
// ==/UserScript==
function flipImgElements() {
// Reset the smaller avatar images
if (document.querySelector('.ghx-avatar-img')) {
$('.ghx-avatar-img').each(function(i, el) {
el.style.filter = 'invert(100%)';
});
}
// Reset the bigger avatar and team images
if (document.querySelector('span[role=img]')) {
$('span[role=img]').each(function(i, el) {
el.style.filter = 'invert(100%)';
});
}
}
function setBaseStyle() {
// Invert the colour and set a dark background.
let bodyEl = document.getElementsByTagName('body')[0];
bodyEl.style.filter = 'invert(90%)';
bodyEl.style['background-color'] = '#1f1f1f !important';
}
(function() {
'use strict';
setBaseStyle();
// Avatar and team images need to be re-inverted once they load on the page.
let observer = new MutationObserver(function(mutations) {
flipImgElements();
});
observer.observe(document, {attributes: false, childList: true, characterData: false, subtree:true});
console.log('JIRA Dark Mode enabled!');
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment