Skip to content

Instantly share code, notes, and snippets.

@paceaux paceaux/jira-dark.css
Last active May 22, 2019

Embed
What would you like to do?
Dark mode for Jira
body {
--bgColor: #111;
--textColor:rgb(201, 208, 221) ;
--infoColor: rgba(201, 208, 221, .7) ;
--titleColor: rgb(133,153,187);
--linkColor: rgb(57,114,198);
--buttonBGColor: #444547;
--buttonColor: rgb(201,228,221);
--buttonBGColorHover: #72829e;
--itemBGColor: #272524;
--itemBGColorHover: #373534;
--itemBGColorFocused: #343537;
background-color:var(--bgColor);
color: var(--textColor);
}
a, button, :hover {
transition: background-color .2s ease-in-out;
}
a {
color: var(--linkColor);
}
.page-type-split [class*="navigator-"],
.split-view .issue-header,
.split-view #stalker,
.issue-header .issue-header-content > .command-bar,
table.aui.aui,
#issue-content,
table.aui.aui.aui tr,
.issue-view > .issue-container .issue-header,
.issue-body-content .module > .mod-header.mod-header > *,
.aui-page-header,
.aui-page-panel,
.aui-page-panel-nav,
form.aui .buttons-container,
.tabwrap > .tabs.horizontal > li{
background-color: inherit;
color: inherit;
}
.adg3 .details-layout .split-view .simple-issue-list .list-panel .issue-list li a {
color: var(--textColor);
}
.adg3 .details-layout .split-view .simple-issue-list .list-panel .issue-list li.focused {
background-color:var(--itemBGColorFocused);
}
.adg3 .issue-data-block.focused,
.adg3 .issue-data-block:hover,
.adg3 .editable-field:hover,
.adg3 .editable-field:hover > span,
.adg3 #linkingmodule .links-list dd:hover,
.adg3 .issuePanelWrapper .collapsed-comments,
table.aui.aui.aui tr.focused,
table.aui.aui.aui tr:hover{
background-color: var(--itemBGColorFocused);
}
.aui-toolbar .toolbar-group .toolbar-trigger,
.aui-button,
.aui-button:visited,
a.aui-button{
background-color: var(--buttonBGColor);
color: var(--buttonColor);
}
.aui-button-subtle.aui-button:hover,
.aui-button:hover,
.aui-buttons .aui-button:not(.aui-button-primary):not(.aui-button-link):hover,
.aui-theme-default .aui-button.aui-button-subtle:hover {
background-color: #87888c;
}
.adg3 .tabwrap > ul.tabs > li a,
.adg3 .tabwrap > ul.tabs > li a:link{
background-color: var(--bgColor);
color: var(--textColor)
}
.tabwrap > .tabs.horizontal > li.active > a,
.tabwrap > .tabs.horizontal > li.active > strong,
.adg3 .tabwrap > ul.tabs > li.active > strong{
background-color: var(--itemBGColorFocused);
border-bottom-color: var(--itemBGColorFocused);
}
.adg3 .tabwrap > ul.tabs > li a:focus,
.adg3 .tabwrap > ul.tabs > li a:hover,
.adg3 .tabwrap > ul.tabs > li a:visited {
background-color: var(--itemBGColorHover);
}
.aui-toolbar .toolbar-group .toolbar-trigger:hover,
.aui-button:hover,
.aui-button:visited:hover,
a.aui-button:hover{
background-color: #bbbcd0;
}
form.aui .text,
form.aui .password,
form.aui .textarea {
background-color: var(--itemBGColorFocused);
color: #efefef;
}
form.aui .text:hover,
form.aui .password:hover,
form.aui .textarea:hover {
background-color: var(--itemBGColor);
}
.adg3 .issuePanelWrapper .collapsed-comments .collapsed-comments-line,
.adg3 .aui-button.aui-dropdown2-trigger{
border-bottom-color: #414750
}
.adg3 .aui-page-header #summary-val {
color: var(--titleColor);
}
.aui-icon {
background-color: transparent;
}
.issue-body-content .module > .mod-header .ops {
background-color: inherit;
}
.adg3 .issue-body-content time {
color: #374b6d;
}
.css-gim7cw,
[data-test-id*="navigation-next."] > div,
.css-t7y1k0[class],
.css-1x95dtn[class]{
background-color: rgb(44, 52, 62);
}
.css-1uo8dyi[class] {
background-color: rgb(64, 72, 82);
}
.adg3 .issue-body-content time {
color: var(--infoColor);
}
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.