Jira Dark Theme

jira-dark-theme.css

/* ==UserStyle==
@name         Jira Dark theme
@namespace    github.com/cococov
@version      2.11.2
@license      MIT
@author       @cococov
@preprocessor default

==/UserStyle== */
@-moz-document regexp(".*.atlassian.net/jira.*"),
regexp(".*.atlassian.net/browse.*"),
regexp(".*.atlassian.net/secure.*") {
    header[role="banner"],
    [data-testid="Content"],
    html,
    body {
        background-color: #333 !important;
        --scrollbarBG: #222 !important;
        --thumbBG: #333 !important;
    }

    .Content::-webkit-scrollbar {
        width: 15px !important;
    }

    .Content {
        scrollbar-width: thin !important;
        scrollbar-color: var(--thumbBG) var(--scrollbarBG) !important;
    }

    .Content::-webkit-scrollbar-track {
        background: var(--scrollbarBG) !important;
    }

    .Content::-webkit-scrollbar-thumb {
        background-color: var(--thumbBG) !important;
        border: 0px solid var(--scrollbarBG) !important;
    }

    header a span,
    .dqyfbQ,
    .css-pjv25p,
    .jRBaLt {
        color: #8ec4fd;
    }

    .aZwtJ {
        box-shadow: none;
        margin: 0px;
    }

    .iuihaW {
        margin: 0px;
    }

    /* issue change droddown */
    .jRBaLt:hover {
        color: #bdddff;
    }

    /* gh branches */
    [data-test-id="issue.views.issue-base.context.context-items"] a[tabindex] div {
        color: #8ec4fd;
    }

    /* issue fields for react dropdowns */
    [class^='FieldBaseWrapper'] [tabindex] {
        background-color: #333 !important;
        border-color: transparent !important;
    }

    [class^='FieldBaseWrapper'] [tabindex]:hover {
        background-color: #444 !important;
    }
    [class^='FieldBaseWrapper'] div {
        color: #ccc;
        background-color: #222;
    }

    [class^='FieldBaseWrapper'] [tabindex] span + span {
        color: #8ec4fd;
    }

    .atlaskit-portal > div > div {
        background-color: #333;
    }

    .atlaskit-portal > div > div > div > div > div > div > div,
    span {
        color: #8ec4fd;
    }

    .atlaskit-portal > div > div > div > div > div > div > span {
        color: #8ec4fd;
    }


    /* translucent background when story is open in modal */
    .igoDWs {
        background-color: rgba(50, 70, 70, 0.64);
    }

    h1,
    h1 *,
    h2,
    h2 *,
    h3,
    h3 *,
    h4,
    h4 *,
    h5,
    h5 *,
    h6,
    h6 * {
        color: #8ec4fd !important;
    }

    svg {
        color: #8ec4fd;
    }

    span[role="presentation"] {
        fill: #8ec4fd;
    }

    header button span {
        color: #8ec4fd;
    }
    #ghx-swimlane-header-stalker,
    #ghx-column-header-group.ghx-fixed {
        background-color: #333;
    }

    .ghx-issue,
    .adg3 .js-issue.ghx-selected,
    .adg3 .js-issue.ghx-selected .ghx-items-container {
        background-color: #333;
    }

    .adg3 .js-issue.ghx-selected,
    .adg3 .js-issue.ghx-selected .ghx-items-container {
        background-color: #1c2c37;
    }

    .adg3 .ghx-issue-compact:hover,
    .adg3 .ghx-issue:hover {
        background-color: #444;
    }

    .ghx-swimlane-header::after {
        background: none;
        box-shadow: none;
    }

    .adg3 .ghx-summary,
    .adg3 .ghx-summary .ghx-inner {
        color: #fff;
    }

    div[tabindex="0"][data-placement="bottom-end"] {
        background-color: #333!important;
    }

    div[tabindex="0"][data-placement="bottom-end"] a:hover {
        background-color: #222!important;
    }

    [aria-label="Primary Navigation"] div:first-child {
        margin-right: 2px;
    }

    [data-test-id="issue.views.issue-base.foundation.breadcrumbs.breadcrumb-current-issue-container"] > div > button {
        background-color: transparent!important;
    }


    [data-testid="atlassian-navigation--primary-actions"]:after {
        background: none;
    }

    [data-test-id="issue.views.issue-base.context.context-items.primary-items"] button {
        background-color: #333 !important;
    }


    /* Main area */
    [data-test-id="software-board.board"],
    .aui-page-panel,
    #ghx-pool,
    [data-ds--page-layout--slot="main"] {
        background-color: #222;
        color: #ddd;
    }

    /* Swimlane columns */
    .adg3 .ghx-column-headers .ghx-column,
    .adg3 .ghx-columns .ghx-column {
        background-color: #222;
    }

    /* sub tasks */
    .adg3 .ghx-column .ghx-parent-group {
        background-color: #555;
    }

    /* subtask parent task label */
    .adg3 .ghx-key {
        color: #ddd;
    }

    /***
     * Left-hand Nav
    ***/
    /* remove top white border */
    .css-1u84ut1,
    .css-77arw9::after {
        background: #333;
    }

    .css-ac0tta::before,
    .css-77arw9::before {
        background: #333 !important;
    }

    .css-cdxr6t {
        background-color: #444;
    }

    [data-testid="ContextualNavigation"] div:first-child {
        background-color: #333;
        color: #fff;
    }

    [data-testid="ContextualNavigation-resize-button"] {
        background-color: #222!important;
    }

    [data-testid="ContextualNavigation-grab-area"] {
        background-color: #222!important
    }

    [data-test-id="issue.activity.comment"] > small > span > span {
        background-color: #444!important;
    }

    [data-testid="ContextualNavigation"] div:first-child::before,
    div:first-child::after {
        background-color: #333;
    }

    [role="presentation"] [data-testid="NavigationItem"] {
        background-color: #333;
    }

    [data-test-id="software-board.board-area"] section div {
        background-color: #333;
    }

    section div[data-rbd-droppable-context-id] {
        background-color: #222;
    }

    [data-test-id="software-board.board-area"] section span {
        color: #ccc;
    }

    section div[data-test-id="platform-board-kit.common.ui.column-header.header.column-header-container"] div {
        background-color: #222;
    }

    [role="dialog"],
    .ghx-issue-compact,
    .ghx-issue-compact .ghx-end {
        background-color: #333;
        color: #ccc;
    }

    [role="presentation"] a {
        color: #8ec4fd;
    }

    [role="presentation"] p {
        color: #ccc;
    }

    .llCsQv:hover {
        background-color: #222;
    }

    [data-rbd-draggable-context-id] {
        background-color: #444;
    }

    .dKslwV {
        background-color: #333;
    }

    .hQVuBn {
        background-color: #444;
    }

    .jODjkq,
    .ak-editor-content-area {
        background-color: #111;
    }

    [data-test-id="issue.views.issue-details.issue-layout.left-most-column"],
    [data-test-id="issue.views.issue-details.issue-layout.right-most-column"],
    .sc-hMapFE.hDMqWg,
    .css-4rxc6l,
    #jira-issue-header {
        background-color: #222;
    }

    [data-test-id="profilecard-next.ui.profilecard.profilecard-trigger"] > span:not(:hover):not(:active) {
        color: rgb(96, 112, 140);
    }

    [data-testid="issue-field-status.common.ui.view-workflow.button.view-workflow"] {
        background-color: #444!important;
    }

    [role="presentation"] {
        flex-grow: 0!important;
    }

    [data-test-id="issue.views.issue-base.context.ecosystem-glance-panel"] > div:last-child > div > div > div:first-child {
        flex-grow: 0!important;
    }

    [data-test-id="issue.views.issue-base.context.ecosystem-glance-panel"] > div:last-child > div > div:hover {
        background-color: #444;
    }

    [data-test-id="issue.fields.status.common.ui.status-lozenge.2"] span {
        background-color: transparent!important;
    }

    [id^="react-select-3-option-"]:hover {
        background-color: #333!important;
    }

    [id^="react-select-3-option-"] {
        background-color: #444!important;
    }

    [data-test-id="issue.fields.status.common.ui.status-lozenge.4"] > span > span,
    [data-test-id="issue.fields.status.common.ui.status-lozenge.3"] > span > span {
        color: #222!important;
    }

    [data-test-id="profilecard-next.ui.profilecard.profilecard-trigger"] div,
    .llCsQv,
    .cfYUOi {
        color: #aaa;
    }

    ::marker {
        color: #ccc !important;
    }

    .hKALUX {
        background-color: transparent;
    }

    .css-ojvx30 {
        padding: 10px;
    }

    .css-821jbb a {
        padding: 5px 8px;
        border-radius: 5px;
        color: #8ec4fd !important;
    }

    /* comment editor */
    /* Doesn't have any data property or anything else :/ */
    [data-test-id="issue.activity.comments-list"] + span > div > div {
        background-color: #333;
        padding: 10px;
    }

    [aria-label="Link issue"],
    [aria-label="Link issue"]:hover {
        border-right-color: #444;
    }

    [data-test-id="issue.activity.comment"],
    .akEditor {
        background-color: #333;
        border: 1px solid rgb(51, 51, 51);
    }

    [role="presentation"] + div {
        margin-right: 1px;
    }

    .fZTloP {
        color: #ccc;
    }

    [data-test-id="issue.activity.comment"],
    .akEditor > div {
        background-color: #333;
        margin: 2px;
    }

    [data-test-id="ak-editor-main-toolbar"] {
        background: #333;
    }

    [data-test-id="issue.activity.comment"] input,
    #create-issue-dialog .jira-dialog-heading,
    #edit-issue-dialog .jira-dialog-heading,
    .jira-dialog .jira-dialog-content,
    #create-issue-dialog .form-body,
    #create-issue-dialog .form-footer,
    #edit-issue-dialog .form-body,
    #edit-issue-dialog .form-footer,
    .ghx-backlog-container {
        background-color: #222;
        color: #ccc;
        border: 1px solid rgb(51, 51, 51);
    }

    [data-test-id="issue.activity.comment"] input,
    #create-issue-dialog .jira-dialog-heading,
    #edit-issue-dialog .jira-dialog-heading,
    .jira-dialog .jira-dialog-content,
    #create-issue-dialog .form-body,
    #create-issue-dialog .form-footer,
    #edit-issue-dialog .form-body,
    #edit-issue-dialog .form-footer,
    .ghx-backlog-container::hover {
        border: 1px solid rgb(51, 51, 51);
    }

    nav > div::after {
        background: #333 !important;
    }

    nav a,
    nav a div,
    nav button,
    nav button div {
        background-color: #444 !important;
    }

    nav a {
        margin-bottom: 6px;
    }

    nav a:last-child {
        margin-bottom: 0px;
    }

    nav div[data-section="true"] {
        padding: 0px 6px 6px 6px;
        margin-bottom: 6px;
        border-radius: 6px;
    }

    nav button + a {
        margin-top: 10px;
    }

    [data-placement="bottom-start"] {
        background-color: #444;
        padding: 10px;
        box-shadow: -3px 3px 1px #00000850;
    }

    .jira-dialog-heading {
        width: auto;
    }

    .jira-dialog-content {
        border-top: 10px solid #333;
    }

    .adg3 .js-issue.ghx-issue-compact:hover,
    .adg3 .js-issue.ghx-issue-compact:hover .ghx-items-container {
        background-color: #444;
    }

    /* "Active Sprints" header row buttons */
    #ghx-quick-filters > ul > li > button,
    /* quick filters main toggle */
    .complete-sprint-container > button,
    /* "complete sprint" btn */
    .ghx-view-section > button {
        /* "..." board menu */
        background-color: #444;
    }

    #ghx-quick-filters > ul > li > button:hover,
    .complete-sprint-container > button:hover,
    .ghx-view-section > button:hover {
        background-color: #555;
    }

    #ghx-quick-filters > ul > li > button span,
    #ghx-quick-filters > ul > li > button,
    .complete-sprint-container > button,
    .ghx-view-section > button span {
        color: #8ec4fd !important;
    }

    #ghx-quick-filters > ul:first-child > li:first-child {
        padding-right: 0;
    }

    #ghx-quick-filters > ul:first-child > li:last-child {
        margin-top: 0 !important;
    }

    #ghx-quick-filters > ul:first-child > li:last-child {
        content: unset;
    }

    #ghx-quick-filters > ul > li button {
        padding: 0 10px;
    }

    form.aui input[type="text"],
    form.aui .multi-select,
    form.aui .password,
    form.aui .select,
    form.aui .text,
    form.aui .textarea,
    form.aui .upfile {
        background-color: #171717;
        color: #ccc;
    }

    form.aui input[type="text"]:hover,
    form.aui .multi-select:hover,
    form.aui .password:hover,
    form.aui .select:hover,
    form.aui .text:hover,
    form.aui .textarea:hover,
    form.aui .upfile:hover,
    form.aui .multi-select:focus,
    form.aui .password:focus,
    form.aui .select:focus,
    form.aui .text:focus,
    form.aui .textarea:focus,
    form.aui .upfile:focus {
        background-color: #111;
        color: #ccc;
    }

    form.aui .field-group div.checkbox label,
    form.aui .field-group div.radio label,
    form.aui fieldset.group div.checkbox label,
    form.aui fieldset.group div.radio label {
        color: #8ec4fd;
    }

    .adg3 .ghx-issue-compact.ghx-flagged,
    .adg3 .ghx-issue.ghx-flagged {
        background-color: #2d2c1e;
    }

    /* Issue - right hand column */
    #jira-issue-header-actions {
        background: transparent;
    }

    [class^="ReadViewContentWrapper"] {
        background-color: #1c1c1c;
    }

    div[data-test-id="issue.views.issue-base.context.status-and-approvals-wrapper.status-and-approval"] div[data-test-id="issue.views.issue-base.foundation.status.status-field-wrapper"] button[aria-label="En Desarrollo - Change status"] {
        background-color: #333 !important;
    }

    div[data-test-id="issue.views.issue-base.context.status-and-approvals-wrapper.status-and-approval"] div[data-test-id="issue.views.issue-base.foundation.status.status-field-wrapper"] button span {
        color: #8ec4fd;
    }

    div[data-test-id="issue.views.issue-base.context.status-and-approvals-wrapper.status-and-approval"] div[data-test-id="issue.views.issue-base.foundation.status.status-field-wrapper"] button:hover {
        background-color: #444 !important;
    }

    /* Linked Issues */
    div[data-test-id="issue.views.issue-details.issue-layout.issue-layout"] div:first-child > div:first-child > div:first-child {
        flex-grow: 8;
    }

    div[data-test-id="issue.views.issue-details.issue-layout.issue-layout"] div:first-child > div:first-child > div:last-child {
        width: auto;
        padding-right: 0;
    }

    .ReadViewContentWrapper-xymwx5-0 {
        margin-right: 6px;
    }

    .Content__ChildWrapper-ve26fj-0,
    .Content-ve26fj-1,
    .ReadViewContentWrapper-xymwx5-0 {
        background-color: #222!important;
    }

    div[data-test-id="issue.views.issue-details.issue-layout.left-most-column"] div > ul {
        background-color: #222;
    }

    div[data-test-id="issue.views.issue-details.issue-layout.left-most-column"] div > ul > div {
        background-color: #333;
        border-radius: 3px;
    }

    /*** Activity ***/
    /* Nav buttons (show) */
    div[data-test-id="issue.views.issue-details.issue-layout.left-most-column"] > div > div > div > button {
        background-color: #333;
        border-radius: 3px 3px 0 0;
    }

    /* button:hover */
    div[data-test-id="issue.views.issue-details.issue-layout.left-most-column"] > div > div > div > button.css-jhagr1 {
        background-color: #555;
    }

    div[data-test-id="issue.views.issue-details.issue-layout.left-most-column"] > div > div > div > button.css-jhagr1 span {
        color: #FFF;
    }

    /* Comments */
    div[data-test-id="issue.views.issue-details.issue-layout.left-most-column"] > span > span > div,
    div[data-test-id="issue.views.issue-details.issue-layout.left-most-column"] > span > span > div > div {
        background-color: #333;
        padding: 10px 5px;
        border-radius: 3px;
    }

    .ghx-zone-cell {
        background-color: #222;
    }

    .ghx-zone-row.ghx-target-hover .ghx-zone-cell {
        background-color: #111;
    }

    [data-testid^="inline-card"] {
        background-color: #111;
    }

    .hlcLVe {
        background-color: #222;
    }

    [data-test-id="common.components.virtual-table.table.content.scrollbars.vertical.virtual-table-scrollbar-wrapper"] [role="presentation"],
    [data-test-id="common.components.virtual-table.table.content.scrollbars.vertical.virtual-table-scrollbar-wrapper"] [role="presentation"] {
        background-color: #333 !important;
    }

    [data-test-id="issue.views.issue-details.issue-layout.issue-layout"] div::-webkit-scrollbar {
        width: 15px;
    }

    [data-test-id="issue.views.issue-details.issue-layout.issue-layout"] div {
        scrollbar-width: thin;
        scrollbar-color: var(--thumbBG) var(--scrollbarBG);
    }

    [data-test-id="issue.views.issue-details.issue-layout.issue-layout"] div::-webkit-scrollbar-track {
        background: var(--scrollbarBG);
    }

    [data-test-id="issue.views.issue-details.issue-layout.issue-layout"] div::-webkit-scrollbar-thumb {
        background-color: var(--thumbBG);
        border: 0px solid var(--scrollbarBG);
    }

    .sc-gvDkQG.ktIPzl {
        background: transparent !important;
    }

    .sc-cECzWn {
        background: transparent !important;
    }

    .virtual-table-row:hover,
    .virtual-table-row:hover {
        background-color: #222 !important;
    }

    button {
        background-color: #333 !important;
    }

    form.aui input[type="text"]:focus {
        background-color: #111;
    }

    .css-1pjvlzd-menu {
        background-color: #333;
    }

    .css-ouvcov-option,
    .css-ouvcov-option:hover {
        background-color: #666;
    }

    /* Main search dropdown */
    [data-test-id='search-dialog-dialog-wrapper'] {
        background-color: #222;
    }

    [data-test-id='search-dialog-advanced-search-link'] {
        background-color: #333;
    }

    [data-test-id='search-dialog-dialog-wrapper'] a:hover {
        background-color: #333;
    }
    [data-test-id='search-dialog-dialog-wrapper'] label,
    [data-test-id='search-dialog-dialog-wrapper'] span {
        color: #8ec4fd !important;
    }

    /* 
       Many classes with font color scattered 
       throught the search options :/ 
    */
    .css-lvvrvua,
    .css-1ol1n65,
    .css-1vvrvua,
    .css-1gs3kbj {
        color: #8ec4fd !important;
    }

    .ghx-sprint-meta .time {
        background-color: #222;
        padding: 2px 10px;
        border-radius: 2px;
        color: #8ec4fd !important;
    }

    /* pills */
    .ictwIf,
    .bUBHcu {
        background-color: #111;
    }

    /* "Your work" tab */
    .dnTWtq {
        background-color: #333;
    }

    /* dropdowns */
    .eKyyuE {
        color: #8ec4fd;
    }
    .css-13623lg {
        background-color: #333 !important;
    }

    .vYgnQ {

        color: #8ec4fd;
    }

    .ekNyYA:hover {
        background-color: #333;
    }

    [data-role="droplistContent"] {
        background-color: #222;
    }

    /* pop up from dropdowns */
    .eJTYOk.eJTYOk {
        background-color: #222 !important;
        border-color: #222 !important;
    }

    [data-test-id="global-pages.home.ui.home"] a,
    [data-test-id="global-pages.home.ui.home"] a * {
        color: #8ec4fd !important;
    }

    [data-test-id="global-pages.home.ui.home"] section {
        background-color: #444;
    }

    /* project cards */
    [data-test-id="global-pages.home.ui.home"] section section > div {
        background-color: #222;
        border-color: #292929;
    }

    /* issues view */
    .fbqYhg {
        background-color: #222;
    }

    /* search */
    .hIWHrB {
        background-color: #222;
    }

    .hIWHrB:focus {
        background-color: #1c1c1c;
    }

    /* welcome right panel */
    .uwCBB {
        background-color: #222;
    }

    .uwCBB * {
        color: #8ec4fd !important;
    }

    .bBnubg {
        background-color: #333;
    }

    .dqYoil {
        background-color: #333;
        color: #8ec4fd !important;
    }


    [data-ds--page-layout--slot="right-sidebar"] {
        background-color: #222;
    }
}

@-moz-document regexp(".*.atlassian.net/projects.*") {
    body,
    nav,
    [role="banner"],
    .aui-page-panel {
        background-color: #333 !important;
        color: #ccc !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: #ddd;
    }

    .aui-page-header,
    .aui-page-panel,
    .aui-page-panel-nav {
        background-color: #333;
    }

    [role='group'] a,
    .css-b6ncbb,
    [role='group'] button {
        color: #8ec4fd !important;
        background-color: #444;
        margin-top: 5px;
    }

    .css-b6ncbb:hover,
    button:hover {
        background-color: #555 !important;
    }


    .css-b6ncbb * {
        color: #8ec4fd !important;
    }
    .css-ojvx30 {
        background-color: #333;
    }

    [role='group'] a:hover {
        background-color: #555;
    }

    [data-enter-from="right"] [draggable] {
        background-color: #444;
        margin-top: 5px;
    }

    [data-enter-from="right"] [draggable]:hover {
        background-color: #555;
        cursor: pointer;
    }

    a > *,
    span {
        color: #8ec4fd !important;
    }

    .css-1764c62::after {
        background: none;
    }
}


@-moz-document regexp(".*.atlassian.net/issues.*") {
    html,
    body,
    .navigator-body,
    header[role="banner"] {
        background-color: #333 !important;
        color: #ccc !important;
    }

    nav ::after {
        background: transparent !important;
    }

    a > * {
        color: #8ec4fd !important;
    }

    nav,
    .css-194d9bm {
        background-color: #333 !important;
        color: #ccc !important;
    }
    .css-1b03djw:hover {
        background-color: #222 !important;
    }

    nav a,
    nav a > *,
    nav button,
    nav button *,
    svg,
    svg path,
    svg g,
    svg * {
        color: #8ec4fd !important;
        fill: #8ec4fd !important;
    }

    nav button:hover,
    nav button:active,
    [aria-expanded="true"] {
        background-color: #222 !important;
    }
}

Based on: https://github.com/aalvarado/JiraDarkTheme