Skip to content

Jira / Atlassian clean dark catppuccin by sonho

Write a review Install Get Stylus

Details

Authorsonho

LicenseNo License

Categoryatlassian.net

Created

Updated

Code size26 kB

Code checksum372bee1e

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Dark theme / Catppucin Macchiato

With some added improvements e.g. wider modals

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 / Atlassian clean dark catppuccin
@version      20250404.12.44
@namespace    ?
@description  Dark theme / Catppucin Macchiato with some added improvemets
==/UserStyle== */

@-moz-document domain("atlassian.net") {
@import url('https://cdn.jsdelivr.net/npm/@catppuccin/palette/css/catppuccin.css');

html[data-color-mode="light"][data-theme~="light:light"],
html[data-color-mode="dark"][data-theme~="dark:light"] {
  color-scheme: dark;
  --ds-text: var(--ctp-macchiato-text);
  --ds-text-accent-lime: var(--ctp-macchiato-green);
  --ds-text-accent-lime-bolder: var(--ctp-macchiato-teal);
  --ds-text-accent-red: var(--ctp-macchiato-red);
  --ds-text-accent-red-bolder: var(--ctp-macchiato-maroon);
  --ds-text-accent-orange: var(--ctp-macchiato-peach);
  --ds-text-accent-orange-bolder: var(--ctp-macchiato-yellow);
  --ds-text-accent-yellow: var(--ctp-macchiato-yellow);
  --ds-text-accent-yellow-bolder: var(--ctp-macchiato-peach);
  --ds-text-accent-green: var(--ctp-macchiato-green);
  --ds-text-accent-green-bolder: var(--ctp-macchiato-teal);
  --ds-text-accent-teal: var(--ctp-macchiato-teal);
  --ds-text-accent-teal-bolder: var(--ctp-macchiato-sky);
  --ds-text-accent-blue: var(--ctp-macchiato-blue);
  --ds-text-accent-blue-bolder: var(--ctp-macchiato-sapphire);
  --ds-text-accent-purple: var(--ctp-macchiato-mauve);
  --ds-text-accent-purple-bolder: var(--ctp-macchiato-lavender);
  --ds-text-accent-magenta: var(--ctp-macchiato-pink);
  --ds-text-accent-magenta-bolder: var(--ctp-macchiato-flamingo);
  --ds-text-accent-gray: var(--ctp-macchiato-overlay0);
  --ds-text-accent-gray-bolder: var(--ctp-macchiato-overlay2);
  --ds-text-disabled: var(--ctp-macchiato-overlay0);
  --ds-text-inverse: var(--ctp-macchiato-crust);
  --ds-text-selected: var(--ctp-macchiato-blue);
  --ds-text-brand: var(--ctp-macchiato-blue);
  --ds-text-danger: var(--ctp-macchiato-red);
  --ds-text-warning: var(--ctp-macchiato-peach);
  --ds-text-warning-inverse: var(--ctp-macchiato-crust);
  --ds-text-success: var(--ctp-macchiato-green);
  --ds-text-discovery: var(--ctp-macchiato-mauve);
  --ds-text-information: var(--ctp-macchiato-blue);
  --ds-text-subtlest: var(--ctp-macchiato-subtext0);
  --ds-text-subtle: var(--ctp-macchiato-subtext1);
  
  /* Links */
  --ds-link: var(--ctp-macchiato-blue);
  --ds-link-pressed: var(--ctp-macchiato-lavender);
  --ds-link-visited: var(--ctp-macchiato-mauve);
  --ds-link-visited-pressed: var(--ctp-macchiato-lavender);
  
  /* Icons */
  --ds-icon: var(--ctp-macchiato-subtext0);
  --ds-icon-accent-lime: var(--ctp-macchiato-green);
  --ds-icon-accent-red: var(--ctp-macchiato-red);
  --ds-icon-accent-orange: var(--ctp-macchiato-peach);
  --ds-icon-accent-yellow: var(--ctp-macchiato-yellow);
  --ds-icon-accent-green: var(--ctp-macchiato-green);
  --ds-icon-accent-teal: var(--ctp-macchiato-teal);
  --ds-icon-accent-blue: var(--ctp-macchiato-blue);
  --ds-icon-accent-purple: var(--ctp-macchiato-mauve);
  --ds-icon-accent-magenta: var(--ctp-macchiato-pink);
  --ds-icon-accent-gray: var(--ctp-macchiato-overlay1);
  --ds-icon-disabled: var(--ctp-macchiato-overlay0);
  --ds-icon-inverse: var(--ctp-macchiato-crust);
  --ds-icon-selected: var(--ctp-macchiato-blue);
  --ds-icon-brand: var(--ctp-macchiato-blue);
  --ds-icon-danger: var(--ctp-macchiato-red);
  --ds-icon-warning: var(--ctp-macchiato-peach);
  --ds-icon-warning-inverse: var(--ctp-macchiato-crust);
  --ds-icon-success: var(--ctp-macchiato-green);
  --ds-icon-discovery: var(--ctp-macchiato-mauve);
  --ds-icon-information: var(--ctp-macchiato-blue);
  --ds-icon-subtlest: var(--ctp-macchiato-overlay0);
  --ds-icon-subtle: var(--ctp-macchiato-overlay1);
  
  /* Borders */
  --ds-border: rgba(203, 166, 247, 0.2);
  --ds-border-accent-lime: var(--ctp-macchiato-green);
  --ds-border-accent-red: var(--ctp-macchiato-red);
  --ds-border-accent-orange: var(--ctp-macchiato-peach);
  --ds-border-accent-yellow: var(--ctp-macchiato-yellow);
  --ds-border-accent-green: var(--ctp-macchiato-green);
  --ds-border-accent-teal: var(--ctp-macchiato-teal);
  --ds-border-accent-blue: var(--ctp-macchiato-blue);
  --ds-border-accent-purple: var(--ctp-macchiato-mauve);
  --ds-border-accent-magenta: var(--ctp-macchiato-pink);
  --ds-border-accent-gray: var(--ctp-macchiato-overlay1);
  --ds-border-disabled: rgba(203, 166, 247, 0.1);
  --ds-border-focused: var(--ctp-macchiato-lavender);
  --ds-border-input: var(--ctp-macchiato-overlay1);
  --ds-border-inverse: var(--ctp-macchiato-crust);
  --ds-border-selected: var(--ctp-macchiato-blue);
  --ds-border-brand: var(--ctp-macchiato-blue);
  --ds-border-danger: var(--ctp-macchiato-red);
  --ds-border-warning: var(--ctp-macchiato-peach);
  --ds-border-success: var(--ctp-macchiato-green);
  --ds-border-discovery: var(--ctp-macchiato-mauve);
  --ds-border-information: var(--ctp-macchiato-blue);
  --ds-border-bold: var(--ctp-macchiato-overlay1);
  
  /* Background Accents - Lime */
  --ds-background-accent-lime-subtlest: rgba(166, 218, 149, 0.1);
  --ds-background-accent-lime-subtlest-hovered: rgba(166, 218, 149, 0.2);
  --ds-background-accent-lime-subtlest-pressed: rgba(166, 218, 149, 0.3);
  --ds-background-accent-lime-subtler: rgba(166, 218, 149, 0.2);
  --ds-background-accent-lime-subtler-hovered: rgba(166, 218, 149, 0.3);
  --ds-background-accent-lime-subtler-pressed: rgba(166, 218, 149, 0.4);
  --ds-background-accent-lime-subtle: rgba(166, 218, 149, 0.4);
  --ds-background-accent-lime-subtle-hovered: rgba(166, 218, 149, 0.5);
  --ds-background-accent-lime-subtle-pressed: rgba(166, 218, 149, 0.6);
  --ds-background-accent-lime-bolder: var(--ctp-macchiato-green);
  --ds-background-accent-lime-bolder-hovered: var(--ctp-macchiato-teal);
  --ds-background-accent-lime-bolder-pressed: var(--ctp-macchiato-sky);
  
  /* Background Accents - Red */
  --ds-background-accent-red-subtlest: rgba(237, 135, 150, 0.1);
  --ds-background-accent-red-subtlest-hovered: rgba(237, 135, 150, 0.2);
  --ds-background-accent-red-subtlest-pressed: rgba(237, 135, 150, 0.3);
  --ds-background-accent-red-subtler: rgba(237, 135, 150, 0.2);
  --ds-background-accent-red-subtler-hovered: rgba(237, 135, 150, 0.3);
  --ds-background-accent-red-subtler-pressed: rgba(237, 135, 150, 0.4);
  --ds-background-accent-red-subtle: rgba(237, 135, 150, 0.4);
  --ds-background-accent-red-subtle-hovered: rgba(237, 135, 150, 0.5);
  --ds-background-accent-red-subtle-pressed: rgba(237, 135, 150, 0.6);
  --ds-background-accent-red-bolder: var(--ctp-macchiato-red);
  --ds-background-accent-red-bolder-hovered: var(--ctp-macchiato-maroon);
  --ds-background-accent-red-bolder-pressed: var(--ctp-macchiato-flamingo);
  
  /* Background Accents - Orange */
  --ds-background-accent-orange-subtlest: rgba(245, 169, 127, 0.1);
  --ds-background-accent-orange-subtlest-hovered: rgba(245, 169, 127, 0.2);
  --ds-background-accent-orange-subtlest-pressed: rgba(245, 169, 127, 0.3);
  --ds-background-accent-orange-subtler: rgba(245, 169, 127, 0.2);
  --ds-background-accent-orange-subtler-hovered: rgba(245, 169, 127, 0.3);
  --ds-background-accent-orange-subtler-pressed: rgba(245, 169, 127, 0.4);
  --ds-background-accent-orange-subtle: rgba(245, 169, 127, 0.4);
  --ds-background-accent-orange-subtle-hovered: rgba(245, 169, 127, 0.5);
  --ds-background-accent-orange-subtle-pressed: rgba(245, 169, 127, 0.6);
  --ds-background-accent-orange-bolder: var(--ctp-macchiato-peach);
  --ds-background-accent-orange-bolder-hovered: var(--ctp-macchiato-yellow);
  --ds-background-accent-orange-bolder-pressed: var(--ctp-macchiato-rosewater);
  
  /* Background Accents - Yellow */
  --ds-background-accent-yellow-subtlest: rgba(238, 212, 159, 0.1);
  --ds-background-accent-yellow-subtlest-hovered: rgba(238, 212, 159, 0.2);
  --ds-background-accent-yellow-subtlest-pressed: rgba(238, 212, 159, 0.3);
  --ds-background-accent-yellow-subtler: rgba(238, 212, 159, 0.2);
  --ds-background-accent-yellow-subtler-hovered: rgba(238, 212, 159, 0.3);
  --ds-background-accent-yellow-subtler-pressed: rgba(238, 212, 159, 0.4);
  --ds-background-accent-yellow-subtle: rgba(238, 212, 159, 0.4);
  --ds-background-accent-yellow-subtle-hovered: rgba(238, 212, 159, 0.5);
  --ds-background-accent-yellow-subtle-pressed: rgba(238, 212, 159, 0.6);
  --ds-background-accent-yellow-bolder: var(--ctp-macchiato-yellow);
  --ds-background-accent-yellow-bolder-hovered: var(--ctp-macchiato-peach);
  --ds-background-accent-yellow-bolder-pressed: var(--ctp-macchiato-rosewater);
  
  /* Background Accents - Green */
  --ds-background-accent-green-subtlest: rgba(166, 218, 149, 0.1);
  --ds-background-accent-green-subtlest-hovered: rgba(166, 218, 149, 0.2);
  --ds-background-accent-green-subtlest-pressed: rgba(166, 218, 149, 0.3);
  --ds-background-accent-green-subtler: rgba(166, 218, 149, 0.2);
  --ds-background-accent-green-subtler-hovered: rgba(166, 218, 149, 0.3);
  --ds-background-accent-green-subtler-pressed: rgba(166, 218, 149, 0.4);
  --ds-background-accent-green-subtle: rgba(166, 218, 149, 0.4);
  --ds-background-accent-green-subtle-hovered: rgba(166, 218, 149, 0.5);
  --ds-background-accent-green-subtle-pressed: rgba(166, 218, 149, 0.6);
  --ds-background-accent-green-bolder: var(--ctp-macchiato-green);
  --ds-background-accent-green-bolder-hovered: var(--ctp-macchiato-teal);
  --ds-background-accent-green-bolder-pressed: var(--ctp-macchiato-sky);
  
  /* Background Accents - Teal */
  --ds-background-accent-teal-subtlest: rgba(139, 213, 202, 0.1);
  --ds-background-accent-teal-subtlest-hovered: rgba(139, 213, 202, 0.2);
  --ds-background-accent-teal-subtlest-pressed: rgba(139, 213, 202, 0.3);
  --ds-background-accent-teal-subtler: rgba(139, 213, 202, 0.2);
  --ds-background-accent-teal-subtler-hovered: rgba(139, 213, 202, 0.3);
  --ds-background-accent-teal-subtler-pressed: rgba(139, 213, 202, 0.4);
  --ds-background-accent-teal-subtle: rgba(139, 213, 202, 0.4);
  --ds-background-accent-teal-subtle-hovered: rgba(139, 213, 202, 0....

Reviews

No reviews yet.