Skip to content

Jira Dark Gray But better by the-edev

Details

Authorthe-edev

LicenseBSD

Categoryjira

Created

Updated

Size26 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

An improved dark theme for Jira

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==	
@name         Jira Better Dark Gray 
@namespace    github.com/the-edev
@version      1.15.3
@license      BSD
@author       @the-edev
@preprocessor default

@var color base-color "Base color" #8ec4fd
==/UserStyle== */
@-moz-document regexp(".*.atlassian.net/jira.*"),
regexp(".*.atlassian.net/browse.*"),
regexp(".*.atlassian.net/secure.*"), regexp(".*.atlassian.net/issues.*") {

    :root {
        --ds-background-selected: #333;
        --ds-background-selected-hovered: #444;
        --ds-surface: #333;
        --ds-surface-raised: #444;
        --ds-text-subtlest: #ccc;
        --ds-text-lowEmphasis: #aaa;
        --ds-background-neutral-subtle-hovered: #334;
        --ds-background-input-hovered: #555;
        --ds-text-highEmphasis: var(--base-color);
        --ds-text: #ddd;
        --ds-surface-overlay: #3d3d3d;
        --ds-background-input: #222;
        --ds-border: #555;
        --ds-surface-sunken: #333;
        --ds-background-subtleWarning-resting: #222;
        --ds-background-subtleBrand-resting: var(--base-color);
        --ds-background-subtleNeutral-hover: rgba(255, 255, 255, 0.1);
        --ds-iconBorder-brand: var(--base-color);
        --ds-background-neutral-subtle: #333;
        --ds-background-neutral-subtle-pressed: #555;
        --ds-background-information: #0747A6;
        --ds-text-information: #ddd;
        --ds-background-success: #006644;
        --ds-text-success: #ddd;
        --ds-background-input-pressed: #333;
        --ds-background-success-bold: #006629;
        --ds-background-success-bold-hovered: #008033;
        --ds-background-information-bold: #0747A6;
        --ds-background-information-bold-hovered: #0851bf;
        --ds-background-neutral: #444;
        --ds-background-neutral-hovered: #525252;
        --ds-background-brand-bold: var(--base-color);
        --ds-background-boldBrand-resting: var(--base-color);
        --ds-background-brand-bold-hovered: var(--base-color);
        --ds-background-boldBrand-hover: var(--base-color);
        --ds-text-selected: var(--base-color);
        --ds-border-selected: var(--base-color);
        --ds-text-subtle: #d9d9d9;
        
        /*--ds-UNSAFE_util-MISSING_TOKEN: #f00;*/
    }

    header[role="banner"] {
        background-color: #3d3d3d !important;
    }
    [data-testid="Content"],
    html,
    body {
        background-color: #222 !important;
    }
    
    .css-gx4kh2[aria-current="page"] {
        background-color: #444 !important;
    }

    header a span,
    .dqyfbQ,
    .css-pjv25p,
    .jRBaLt {
        color: var(--base-color) /*#8ec4fd*/;
    }
    
    .cIXrpR {
        background-color: var(--ds-surface-sunken);
    }
    
    .kJyKCi {
        background-color: var(--ds-surface-overlay);
    }
    
    .jkFyKR span {
        color: var(--ds-text)
    }
    
    .css-1bx7l6n-control {
        background-color: #222;
    }
    
    .css-1263v6n-control {
        background-color: #222;
    }
    
    .css-1y4q788 {
        background-color: transparent;
    }

    .cBstTO {
        background-color: #333;
    }

    .duAyEw {
        box-shadow: var(--ds-UNSAFE_util-MISSING_TOKEN, 0 2px #555);
    }

    .fswAWM {
        background-color: #666;
        border: solid;
        border-width: thin;
        border-radius: 20px;
        border-color: #555;
    }

    .jaYKcG {
        border-top: 1px solid #555;
        border-left: 1px solid #555;
    }

    .jnkpdy {
        border-bottom: 1px solid #555;
    }

    .gkWEKe {
        border-bottom: 1px solid #555;
    }

    .jLnYtV {
        border-bottom: 1px solid #555;
    }

    .gQUkHt {
        border-bottom: 1px solid #555;
    }

    .dCygxK {
        border-top: 1px solid #555;
    }

    .lPyQE {
        background-color: #333;
    }
    
    .css-1vkzvss {
        background-color: #444;
    }

    .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: var(--base-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: #333 !important;
    }

    [class^='FieldBaseWrapper'] [tabindex] span + span {
        color: var(--base-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: var(--base-color) /*#8ec4fd*/ !important;
    }

    svg {
        color: var(--base-color) /*#8ec4fd*/;
    }

    span[role="presentation"] {
        fill: var(--base-color) /*#8ec4fd*/;
    }

    header button span {
        /*color: var(--base-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: var(--base-color) /*#8ec4fd*/;
    }

    [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;
    }

    .adg3 .ghx-columns {
        margin-top: .4em;
    }
    .adg3 .ghx-columns .ghx-column {
        padding-top: .1em;
    }

    /* Swimlane headers */
    .ghx-swimlane-header {
        background-color: #333 !important;
        border: 1px solid #444;
    }

    .ghx-swimlane-header .ghx-expander {
        left: 1em;
    }

    .ghx-swimlane-header .ghx-heading {
        margin-left: 1.6em;
    }
    .ghx-heading span {
        color: #bbb !important;
    }

    /* Swimlane Inner */
    .ReactVirtualized__Grid__innerScrollContainer {
        background-color: #555 !important;
    }

    /* 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: #222;
    }

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

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

    [data-testid="ContextualNavigation"] div:first-child {
        background-color: #333;
        color: var(--base-color) /*#8ec4fd*/;
    }

    [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: #3d3d3d;
    }

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

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

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

    [role="presentation"] a {
        color: var(--base-color) /*#8ec4fd*/;
    }

    a[href^="/issues/?jql=labels"] {
        filter: invert(1);
    }

    [data-test-id="issue.views.field.select.common.select-inline-edit.components"] [role="presentation"] a {
        filter: invert(1);
    }

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

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

    [data-rbd-draggable-context-id] {
        /*background-color: #222;*/
    }

    .dKslwV {
        background-color: #333;
    }
    
    .dhuviV {
        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"] 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: var(--base-color) /*#8ec4fd*/ !important;
    }

    /* comment editor */
    /* Doesn't have any data property or anything else :/ */
    [data-test-id="issue.activity.comments-list...

Reviews

No reviews yet.