A crisp dark mode for Atlassian's Cloud Jira.
Purple Rain ~ Jira Cloud Dark Mode by levee
Details
Authorlevee
LicenseMIT
CategoryJira Cloud
Created
Updated
Size25 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Heavily work-in-progress
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Purple Rain ~ Jira Cloud Dark Mode
@version 1.0.0
@namespace userstyles.world/user/levee
@description A crisp dark mode for Jira Cloud.
@author levee
@license MIT
==/UserStyle== */
:root {
--l-surface-primary: #111111;
--l-surface-primary-light: #171717;
--l-surface-primary-lighter: #222222;
--l-surface-secondary: #333333;
--l-surface-secondary-light: #555555;
--l-surface-secondary-lighter: #777777;
--l-surface-secondary-lightest: #aaaaaa;
--l-background-primary: #241a38;
--l-background-secondary: #493775;
--l-background-secondary-light: #a476ff;
--l-background-secondary-light-a: #a476ff80;
--l-resize-control: #a476ff;
--l-text-primary: #8ec4fd;
--l-text-primary-dark: #5c80ac;
--l-text-primary-darker: #4a678b;
--l-text-primary-light: #cae4ff;
--l-text-secondary: #a476ff;
--l-text-neutral: #eeeeee;
--l-text-neutral-dark: #6B778C;
--l-text-neutral-light: #ffffff;
--l-box-shadow-primary: 0 1px 2px 0 #241a3880;
--l-box-shadow-supplement: 0 0 1px #241a3899;
--l-box-shadow-elevation-1: 0 1px 1px #241a3880;
--l-box-shadow-elevation-2: 0 2px 4px #241a3880;
--l-box-shadow-focus: 0 0 0 2px var(--l-text-primary) !important;
--l-terminal: #032a1a;
--ds-surface: var(--l-surface-primary);
--ds-surface-overlay: var(--l-surface-primary-lighter);
--ds-background-default: var(--l-surface-primary);
--ds-background-neutral: var(--l-surface-secondary-light);
--ds-background-brand: var(--l-text-primary-dark);
--ds-text: var(--l-text-neutral);
--ds-text-selected: var(--l-text-primary);
--ds-text-subtle: var(--l-text-primary);
--ds-text-subtlest: var(--l-text-neutral-dark);
--ds-menu-seperator-color: var(--l-surface-primary-light);
--ds-border: var(--l-surface-primary-light);
--ds-border-focused: var(--l-text-primary-dark);
}
@-moz-document regexp(".*.atlassian.net/jira.*"), regexp(".*.atlassian.net/browse.*"), regexp(".*.atlassian.net/secure.*"), regexp(".*.atlassian.net/projects.*"), regexp(".*.atlassian.net/issues.*") {
body {
color: var(--l-text-neutral);
}
body::before {
background-color: var(--l-text-secondary);
border-bottom: 1px solid var(--l-text-neutral);
}
h1, h2, h3 {
color: var(--l-text-neutral);
}
a,
a *,
a > div > p[data-testid*='deep-dive-card-content'] {
color: var(--l-text-primary) !important;
}
a:hover {
color: var(--l-text-primary);
}
a:focus {
box-shadow: none;
}
button:focus {
box-shadow: var(--l-box-shadow-focus);
}
code[class] {
color: var(--l-text-neutral);
background-color: var(--l-terminal);
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background: var(--l-surface-primary-light);
border-radius: 4px;
}
::-webkit-scrollbar:hover ::-webkit-scrollbar-thumb {
background: var(--l-background-primary);
}
/*
COMPONENT STYLES
*/
.aui-button,
.aui-button:visited,
a.aui-button,
[data-testid*='insights-button'] {
color: var(--l-text-neutral);
background-color: var(--l-text-primary-darker);
}
.aui-button:focus,
.aui-button:visited:focus,
a.aui-button:focus,
[data-testid*='insights-button']:focus,
[data-testid*='insights-button']:visited:focus {
background-color: var(--l-text-primary-darker);
}
.aui-button .aui-icon,
.aui-button:visited .aui-icon,
a.aui-button .aui-icon,
[data-testid*='insights-button'] {
color: var(--l-text-neutral);
}
.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,
[data-testid*='insights-button']:hover {
background-color: var(--l-text-primary-darker);
filter: brightness(110%);
}
.aui-button-subtle.aui-button.active,
.aui-button-subtle.aui-button:active,
.aui-button.active,
.aui-button:active,
.aui-buttons .aui-button.active:not(.aui-button-primary):not(.aui-button-link),
.aui-header .aui-button-split-more.active,
.aui-theme-default .aui-button.aui-button-subtle.active,
[data-testid*='insights-button']:active {
background-color: var(--l-text-primary-darker);
filter: brightness(90%);
}
.css-goggrm,
.css-goggrm:hover,
.css-goggrm:active {
color: var(--l-text-primary) !important;
background-color: var(--l-surface-secondary);
}
.bRoiHT,
.bAYMzn {
background-color: var(--l-surface-secondary-light) !important;
}
[role*='separator'][data-test-id*='resizer']:hover > div,
[data-resize-control] [data-grab-area]:enabled:hover [data-grab-area-line],
[data-resize-control] [data-resize-button]:enabled:hover {
background-color: var(--l-resize-control);
}
[data-test-id*='dropdown.dropdown'] > :not(:first-child),
[data-testid*='menu.content'] > :not(:first-child) {
border-top: 1px solid var(--l-text-primary-dark);
}
.e1rno5601 > div > a:hover {
background-color: var(--l-surface-primary-lighter);
}
.e1rno5601 > div > a > p {
color: var(--l-text-primary-light);
}
.e1rno5600 > button[class] {
color: var(--l-text-primary) !important;
}
.e1rno5600::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
border-bottom: 1px solid var(--l-text-neutral-dark);
}
.e1rno5600 {
margin-bottom: 10px;
}
[data-ds--text-field--container] {
color: var(--l-text-neutral-dark);
background-color: var(--l-surface-secondary);
border-color: var(--l-text-neutral-dark);
}
[data-ds--text-field--container]:hover {
background-color: var(--l-surface-primary);
}
section h1 {
color: var(--l-text-neutral);
}
label[data-testid*='checkbox'] > span {
color: var(--l-text-neutral);
}
span[role='img'][aria-label] > svg,
label[data-testid*='checkbox'] > input[type='checkbox'] + svg {
--checkbox-background-color: var(--l-text-neutral-light);
--checkbox-border-color: var(--l-text-neutral);
}
label[data-testid*='checkbox'] > input[type='checkbox']:active + svg {
--checkbox-background-color: var(--l-text-primary-light);
--checkbox-border-color: var(--l-text-primary-light);
}
label[data-testid*='checkbox'] > input[type='checkbox']:checked + svg {
--checkbox-background-color: var(--l-text-primary);
--checkbox-border-color: var(--l-text-primary);
--checkbox-tick-color: var(--l-surface-primary);
}
label[data-testid*='checkbox'] > input[type='checkbox']:checked:active + svg,
label[data-testid*='checkbox']:active > input[type='checkbox']:checked + svg {
--checkbox-tick-color: var(--l-surface-secondary-light);
}
label[data-testid*='checkbox'] > input[type='checkbox']:focus + svg,
label[data-testid*='checkbox'] > input[type='checkbox']:focus:checked + svg {
--checkbox-border-color: var(--l-text-primary);
}
[data-testid*='-scrollable']:focus-visible {
box-shadow: none;
}
[class*='container'] [class*='control'],
[class*='container'][id*='-picker'][id*='-select'] [class*='control'] {
background-color: var(--l-surface-secondary-light);
border: 2px solid var(--l-text-neutral-dark);
}
[class*='container'] [class*='control']:hover,
[class*='container'][id*='-picker'][id*='-select'] [class*='control']:hover {
border: 2px solid var(--l-text-primary);
}
[class*='container'] [class*='control'] [class$='multiValue'] {
background-color: var(--l-text-primary-darker);
}
[class$='menu'] {
background-color: var(--l-surface-secondary);
}
[class$='menu'] [class$='option'] {
background: none;
box-shadow: none;
}
[class$='menu'] [class$='option'] > span > div[color] {
min-width: 20px;
outline: 1px solid var(--l-text-neutral);
}
[class$='menu'] [class*='option'][class*='is-focused'],
[class$='menu'] [class$='option']:hover {
background-color: var(--l-surface-secondary-light);
box-shadow: inset 2px 0 0 var(--l-text-secondary);
}
/*
MAIN PAGE ( YOUR WORK )
*/
#ak-main-content img[alt*='Loading'] {
filter: brightness(25%);
}
[data-test-id='global-pages.home.ui.home'] > div > div > div > div > section {
margin: 0 0 32px 0;
background-color: var(--l-surface-primary);
outline: 1px solid var(--l-surface-secondary);
border-radius: 4px;
}
[data-test-id='global-pages.home.ui.home'] > div > div > div > div > section a {
color: var(--l-text-primary);
}
[data-test-id='global-pages.home.ui.home'] section section > div {
background-color: var(--l-surface-secondary);
border-left: 20px solid var(--l-surface-secondary-light);
box-shadow: var(--l-box-shadow-elevation-1), var(--l-box-shadow-supplement);
transition: box-shadow 0.3s ease-in-out;
}
[data-test-id='global-pages.home.ui.home'] section section > div:hover {
box-shadow: var(--l-box-shadow-elevation-2), var(--l-box-shadow-supplement);
}
[data-test-id='global-pages.home.ui.home'] section section > div > :last-child {
border-top: 1px solid var(--l-surface-secondary-light);
}
[data-test-id='global-pages.home.ui.home'] > div > div > div > div > section a[data-testid*='deep-dive-card-content']:hover {
background-color: var(--l-background-secondary);
}
[data-test-id='global-pages.home.ui.home'] > div > div > div > div > section a[data-testid*='deep-dive-card-content'] > [data-testid*='count-badge'] {
display: flex;
justify-content: center;
align-items: center;
color: var(--l-text-neutral);
background-color: var(--l-text-neutral-dark);
font-weight: bold;
}
[data-test-id*='tab-container.navigation'] > div > div > div > span {
height: 3px;
background-color: var(--l-text-neutral-dark);
}
[data-test-id*='tab-container.navigation'] [data-test-id*='tab-container.navigation.item'] span[data-selected='true'] {
height: 3px;...