:root { --color-primary: #c2410c; --color-primary-contrast: #ffffff; --color-primary-dark-1: #c2410c; --color-primary-dark-2: #9a3412; --color-primary-dark-3: #9a3412; --color-primary-dark-4: #7c2d12; --color-primary-dark-5: #7c2d12; --color-primary-dark-6: #7c2d12; --color-primary-dark-7: #7c2d12; --color-primary-light-1: #ea580c; --color-primary-light-2: #f97316; --color-primary-light-3: #fb923c; --color-primary-light-4: #fdba74; --color-primary-light-5: #fed7aa; --color-primary-light-6: #ffedd5; --color-primary-light-7: #fff7ed; --color-primary-alpha-10: #c2410c19; --color-primary-alpha-20: #c2410c33; --color-primary-alpha-30: #c2410c4b; --color-primary-alpha-40: #c2410c66; --color-primary-alpha-50: #c2410c80; --color-primary-alpha-60: #c2410c99; --color-primary-alpha-70: #c2410cb3; --color-primary-alpha-80: #c2410ccc; --color-primary-alpha-90: #c2410ce1; --color-primary-hover: var(--color-primary-dark-2); --color-primary-active: var(--color-primary-dark-4); --color-diff-removed-word-bg: hsl(340, 94%, 82%); --color-diff-added-word-bg: hsl(192, 77%, 73%); --color-diff-removed-row-bg: hsl(340, 93%, 94%); --color-diff-moved-row-bg: hsl(55, 97%, 88%); --color-diff-added-row-bg: hsl(191, 84%, 93%); --color-diff-removed-row-border: hsl(340, 94%, 82%); --color-diff-moved-row-border: hsl(50, 98%, 64%); --color-diff-added-row-border: hsl(192, 77%, 73%); --color-diff-inactive: var(--zinc-100); } @media(prefers-color-scheme:dark) { :root { --zinc-50: hsl(0, 0%, 98%); --zinc-100: hsl(240, 5%, 96%); --zinc-150: hsl(240, 6%, 93%); --zinc-200: hsl(240, 6%, 90%); --zinc-250: hsl(240, 6%, 87%); --zinc-300: hsl(240, 5%, 84%); --zinc-350: hsl(240, 5%, 74%); --zinc-400: hsl(240, 5%, 65%); --zinc-450: hsl(240, 4%, 53%); --zinc-500: hsl(240, 4%, 42%); --zinc-550: hsl(240, 4%, 33%); --zinc-600: hsl(240, 5%, 26%); --zinc-650: hsl(240, 5%, 20%); --zinc-700: hsl(240, 5%, 15%); --zinc-750: hsl(240, 5%, 13%); --zinc-800: hsl(240, 4%, 10%); --zinc-850: hsl(240, 6%, 8%); --zinc-900: hsl(240, 6%, 5%); --clean-sky: hsl(192, 96%, 50%); --burning-passion: hsl(340, 96%, 61%); --color-primary: hsl(340, 96%, 61%); --color-primary-contrast: #000; --color-primary-dark-1: hsl(340, 96%, 66%); --color-primary-dark-2: hsl(340, 96%, 72%); --color-primary-dark-3: hsl(340, 96%, 77%); --color-primary-dark-4: hsl(340, 96%, 83%); --color-primary-dark-5: hsl(340, 96%, 86%); --color-primary-dark-6: hsl(340, 96%, 92%); --color-primary-dark-7: hsl(340, 96%, 96%); --color-primary-light-1: hsl(340, 96%, 55%); --color-primary-light-2: hsl(340, 96%, 48%); --color-primary-light-3: hsl(340, 96%, 40%); --color-primary-light-4: hsl(340, 96%, 34%); --color-primary-light-5: hsl(340, 96%, 31%); --color-primary-light-6: hsl(340, 96%, 28%); --color-primary-light-7: hsl(340, 96%, 25%); --color-primary-alpha-10: hsla(340, 96%, 61%, 0.098); --color-primary-alpha-20: hsla(340, 96%, 61%, 0.2); --color-primary-alpha-30: hsla(340, 96%, 61%, 0.294); --color-primary-alpha-40: hsla(340, 96%, 61%, 0.4); --color-primary-alpha-50: hsla(340, 96%, 61%, 0.502); --color-primary-alpha-60: hsla(340, 96%, 61%, 0.6); --color-primary-alpha-70: hsla(340, 96%, 61%, 0.702); --color-primary-alpha-80: hsla(340, 96%, 61%, 0.8); --color-primary-alpha-90: hsla(340, 96%, 61%, 0.882); --color-primary-hover: var(--color-primary-light-1); --color-primary-active: var(--color-primary-light-2); --color-secondary: var(--zinc-700); --color-secondary-dark-1: var(--zinc-550); --color-secondary-dark-2: var(--zinc-500); --color-secondary-dark-3: var(--zinc-450); --color-secondary-dark-4: var(--zinc-400); --color-secondary-dark-5: var(--zinc-350); --color-secondary-dark-6: var(--zinc-300); --color-secondary-dark-7: var(--zinc-250); --color-secondary-dark-8: var(--zinc-200); --color-secondary-dark-9: var(--zinc-150); --color-secondary-dark-10: var(--zinc-100); --color-secondary-dark-11: var(--zinc-100); --color-secondary-dark-12: var(--zinc-100); --color-secondary-dark-13: var(--zinc-100); --color-secondary-light-1: var(--zinc-650); --color-secondary-light-2: var(--zinc-700); --color-secondary-light-3: var(--zinc-750); --color-secondary-light-4: var(--zinc-800); --color-secondary-alpha-10: #2b364219; --color-secondary-alpha-20: #2b364233; --color-secondary-alpha-30: #2b36424b; --color-secondary-alpha-40: #2b364266; --color-secondary-alpha-50: #2b364280; --color-secondary-alpha-60: #2b364299; --color-secondary-alpha-70: #2b3642b3; --color-secondary-alpha-80: #2b3642cc; --color-secondary-alpha-90: #2b3642e1; --color-secondary-hover: var(--color-secondary-light-1); --color-secondary-active: var(--color-secondary-light-2); --color-console-fg: #eeeff2; --color-console-fg-subtle: #959cab; --color-console-bg: #1f212b; --color-console-border: #383c47; --color-console-hover-bg: #ffffff16; --color-console-active-bg: #454a57; --color-console-menu-bg: #383c47; --color-console-menu-border: #5c6374; --color-diff-removed-word-bg: hsl(340, 43%, 33%); --color-diff-added-word-bg: hsl(192, 43%, 25%); --color-diff-removed-row-bg: hsl(340, 34%, 20%); --color-diff-moved-row-bg: hsl(36, 69%, 30%); --color-diff-added-row-bg: hsl(192, 33%, 16%); --color-diff-removed-row-border: hsl(340, 43%, 33%); --color-diff-moved-row-border: hsl(41, 70%, 38%); --color-diff-added-row-border: hsl(192, 43%, 25%); --color-diff-inactive: var(--zinc-650); --color-body: var(--zinc-800); --color-box-header: var(--zinc-700); --color-box-body: var(--zinc-750); --color-box-body-highlight: var(--zinc-650); --color-text-dark: #fff; --color-text: var(--zinc-100); --color-text-light: var(--zinc-150); --color-text-light-1: var(--zinc-150); --color-text-light-2: var(--zinc-200); --color-text-light-3: var(--zinc-200); --color-footer: var(--zinc-900); --color-timeline: var(--zinc-650); --color-input-text: var(--zinc-100); --color-input-background: var(--zinc-650); --color-input-toggle-background: var(--zinc-650); --color-input-border: var(--zinc-550); --color-input-border-hover: var(--zinc-450); --color-header-wrapper: var(--zinc-850); --color-header-wrapper-transparent: #242d3800; --color-light: #00000028; --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-border: #ffffff28; --color-hover: var(--zinc-600); --color-active: var(--zinc-650); --color-menu: var(--zinc-700); --color-card: var(--zinc-700); --fancy-card-bg: var(--zinc-650); --fancy-card-border: var(--zinc-600); --color-markup-table-row: #ffffff06; --color-markup-code-block: var(--zinc-800); --color-markup-code-inline: var(--zinc-850); --color-button: var(--zinc-600); --color-code-bg: var(--zinc-750); --color-shadow: #00000060; --color-secondary-bg: var(--zinc-700); --color-text-focus: #fff; --color-expand-button: #3c404d; --color-placeholder-text: var(--color-text-light-3); --color-editor-line-highlight: var(--zinc-700); --color-project-board-bg: var(--color-secondary-light-3); --color-project-board-dark-label: var(--color-text-light-3); --color-caret: var(--color-text); --color-reaction-bg: #ffffff12; --color-reaction-active-bg: var(--color-primary-alpha-30); --color-reaction-hover-bg: var(--color-primary-alpha-40); --color-tooltip-text: #ffffff; --color-tooltip-bg: #000000f0; --color-nav-bg: var(--zinc-900); --color-nav-hover-bg: var(--zinc-600); --color-secondary-nav-bg: var(--color-body); --color-label-text: #fff; --color-label-bg: var(--zinc-600); --color-label-hover-bg: var(--zinc-550); --color-label-active-bg: var(--zinc-500); --color-label-bg-alt: var(--zinc-550); --color-accent: var(--color-primary-light-1); --color-small-accent: var(--color-primary-light-5); --color-highlight-fg: var(--color-primary-light-4); --color-highlight-bg: var(--color-primary-alpha-20); --color-overlay-backdrop: #080808c0; --color-selection-bg: var(--zinc-100); --color-selection-fg: var(--color-pure-black); --checkerboard-color-1: #474747; --checkerboard-color-2: #313131; --color-indicator-offline: #a1a1aa; --color-indicator-offline-20: #a1a1aa1a; --color-indicator-idle: #16a34a; --color-indicator-idle-20: #16a34a1a; --color-indicator-active: #2185d0; --color-indicator-active-20: #2185d033; /* Monokai Terminal ANSI Colors */ --monokai-ansi-black: #333333; --monokai-ansi-blue: #6a7ec8; --monokai-ansi-bright-black: #666666; --monokai-ansi-bright-blue: #819aff; --monokai-ansi-bright-cyan: #66d9ef; --monokai-ansi-bright-green: #a6e22e; --monokai-ansi-bright-magenta: #ae81ff; --monokai-ansi-bright-red: #f92672; --monokai-ansi-bright-white: #f8f8f2; --monokai-ansi-bright-yellow: #e6db74; /* #e2e22e */ --monokai-ansi-cyan: #56adbc; --monokai-ansi-green: #86b42b; --monokai-ansi-magenta: #8c6bc8; --monokai-ansi-red: #c4265e; --monokai-ansi-white: #e3e3dd; --monokai-ansi-yellow: #b3b42b; } .chroma .bp { color: var(--monokai-ansi-bright-red); /* #fabd2f */ } .chroma .c, .chroma .c1, .chroma .ch, .chroma .cm { color: #777e94 } .chroma .cp { color: #8ec07c } .chroma .cpf { color: var(--monokai-ansi-bright-magenta); /* #649bc4 */ } .chroma .cs { color: #9075cd } .chroma .dl { color: var(--monokai-ansi-bright-magenta); /* #649bc4 */ } .chroma .gd { color: #fff; background-color: #5f3737 } .chroma .ge { color: #ddee30 } .chroma .gh { color: #ffaa10 } .chroma .gi { color: #fff; background-color: #3a523a } .chroma .go { color: #777e94 } .chroma .gp { color: #ebdbb2 } .chroma .gr { color: #f43 } .chroma .gs { color: #ebdbb2 } .chroma .gt { color: var(--monokai-ansi-bright-red); /* #ff7540 */ } .chroma .gu { color: var(--monokai-ansi-bright-yellow); /* #b8bb26 */ } .chroma .il { color: var(--monokai-ansi-bright-magenta); /* #649bc4 */ } .chroma .k { color: var(--monokai-ansi-bright-red); /* #ff7540 */ } .chroma .kc { color: var(--monokai-ansi-bright-magenta); /* #649bc4 */ } .chroma .kd { color: var(--monokai-ansi-bright-cyan); /* #ff7540 */ } .chroma .kn { color: var(--monokai-ansi-bright-green); /* #ffaa10 */ } .chroma .kp { color: #5f8700 } .chroma .kr { color: var(--monokai-ansi-bright-cyan); /* #ff7540 */ } .chroma .kt { color: var(--monokai-ansi-bright-green); /* #ff7b72 */ } .chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .mo { color: var(--monokai-ansi-bright-magenta); /* #649bc4 */ } .chroma .n { color: #c9d1d9 } .chroma .na, .chroma .nb { color: var(--monokai-ansi-bright-green); /* #fabd2f */ } .chroma .nc { color: var(--monokai-ansi-bright-green); /* #ffaa10 */ } .chroma .nd { color: #8ec07c } .chroma .ne { color: var(--monokai-ansi-bright-red); /* #ff7540 */ } .chroma .nf, .chroma .ni { color: var(--monokai-ansi-bright-green); /* #fabd2f */ } .chroma .nl { color: var(--monokai-ansi-bright-red); /* #ff7540 */ } .chroma .nn { color: #c9d1d9 } .chroma .no { color: #649bc4 } .chroma .nt { color: var(--monokai-ansi-bright-red); /* #ff7540 */ } .chroma .nv { color: #ebdbb2 } .chroma .nx { color: #b6bac5 } .chroma .o { color: var(--monokai-ansi-bright-red); /* #ff7540 */ } .chroma .ow { color: var(--monokai-ansi-bright-red); /* #5f8700 */ } .chroma .p { color: #d2d4db } .chroma .s, .chroma .s1, .chroma .s2 { color: var(--monokai-ansi-bright-yellow); /* #b8bb26 */ } .chroma .sa { color: var(--monokai-ansi-bright-green); /* #ffaa10 */ } .chroma .sb { color: var(--monokai-ansi-bright-yellow); /* #b8bb26 */ } .chroma .sc { color: var(--monokai-ansi-bright-green); /* #ffaa10 */ } .chroma .sd { color: var(--monokai-ansi-bright-yellow); /* #b8bb26 */ } .chroma .se { color: #ff8540 } .chroma .sh { color: var(--monokai-ansi-bright-yellow); /* #b8bb26 */ } .chroma .si { color: var(--monokai-ansi-bright-green); /* #ffaa10 */ } .chroma .sr { color: #9075cd } .chroma .ss { color: #ff8540 } .chroma .sx { color: var(--monokai-ansi-bright-green); /* #ffaa10 */ } .chroma .vc, .chroma .vg, .chroma .vi { color: #649bee } .chroma .w { color: #7f8699 } .repository .diff-detail-box .diff-detail-stats strong:nth-of-type(2) { color: var(--clean-sky); } .repository .diff-detail-box .diff-detail-stats strong:nth-of-type(3) { color: var(--burning-passion); } .diff-stats-bar { background-color: var(--burning-passion); } .diff-stats-bar .diff-stats-add-bar { background-color: var(--clean-sky); } .text.green { color: var(--clean-sky) !important; } .text.red { color: var(--burning-passion) !important; } .ui.primary.labels .label, .ui.ui.ui.primary.label, .ui.primary.button, .ui.primary.buttons .button { background: var(--color-primary-light-6); color: var(--color-white); } .primary.sha.label { border: none; background: var(--color-primary-light-6); color: var(--color-white); } }