/* https://github.com/alecthomas/chroma/blob/6428fb4e65f3c1493491571c8a6a8f1add1da822/types.go#L208 */ .chroma .bp { color: #fabd2f; } /* NameBuiltinPseudo */ .chroma .c { color: #777e94; } /* Comment */ .chroma .c1 { color: #777e94; } /* CommentSingle */ .chroma .ch { color: #777e94; } /* CommentHashbang */ .chroma .cm { color: #777e94; } /* CommentMultiline */ .chroma .cp { color: #8ec07c; } /* CommentPreproc */ .chroma .cpf { color: #649bc4; } /* CommentPreprocFile */ .chroma .cs { color: #9075cd; } /* CommentSpecial */ .chroma .dl { color: #649bc4; } /* LiteralStringDelimiter */ .chroma .fm {} /* NameFunctionMagic */ .chroma .g {} /* Generic */ .chroma .gd { color: #ffffff; background-color: #5f3737; } /* GenericDeleted */ .chroma .ge { color: #ddee30; } /* GenericEmph */ .chroma .gh { color: #ffaa10; } /* GenericHeading */ .chroma .gi { color: #ffffff; background-color: #3a523a; } /* GenericInserted */ .chroma .gl {} /* GenericUnderline */ .chroma .go { color: #777e94; } /* GenericOutput */ .chroma .gp { color: #ebdbb2; } /* GenericPrompt */ .chroma .gr { color: #ff4433; } /* GenericError */ .chroma .gs { color: #ebdbb2; } /* GenericStrong */ .chroma .gt { color: #ff7540; } /* GenericTraceback */ .chroma .gu { color: #b8bb26; } /* GenericSubheading */ .chroma .il { color: #649bc4; } /* LiteralNumberIntegerLong */ .chroma .k { color: #ff7540; } /* Keyword */ .chroma .kc { color: #649bc4; } /* KeywordConstant */ .chroma .kd { color: #ff7540; } /* KeywordDeclaration */ .chroma .kn { color: #ffaa10; } /* KeywordNamespace */ .chroma .kp { color: #5f8700; } /* KeywordPseudo */ .chroma .kr { color: #ff7540; } /* KeywordReserved */ .chroma .kt { color: #ff7b72; } /* KeywordType */ .chroma .l {} /* Literal */ .chroma .ld {} /* LiteralDate */ .chroma .m { color: #649bc4; } /* LiteralNumber */ .chroma .mb { color: #649bc4; } /* LiteralNumberBin */ .chroma .mf { color: #649bc4; } /* LiteralNumberFloat */ .chroma .mh { color: #649bc4; } /* LiteralNumberHex */ .chroma .mi { color: #649bc4; } /* LiteralNumberInteger */ .chroma .mo { color: #649bc4; } /* LiteralNumberOct */ .chroma .n { color: #c9d1d9; } /* Name */ .chroma .na { color: #fabd2f; } /* NameAttribute */ .chroma .nb { color: #fabd2f; } /* NameBuiltin */ .chroma .nc { color: #ffaa10; } /* NameClass */ .chroma .nd { color: #8ec07c; } /* NameDecorator */ .chroma .ne { color: #ff7540; } /* NameException */ .chroma .nf { color: #fabd2f; } /* NameFunction */ .chroma .ni { color: #fabd2f; } /* NameEntity */ .chroma .nl { color: #ff7540; } /* NameLabel */ .chroma .nn { color: #c9d1d9; } /* NameNamespace */ .chroma .no { color: #649bc4; } /* NameConstant */ .chroma .nt { color: #ff7540; } /* NameTag */ .chroma .nv { color: #ebdbb2; } /* NameVariable */ .chroma .nx { color: #b6bac5; } /* NameOther */ .chroma .o { color: #ff7540; } /* Operator */ .chroma .ow { color: #5f8700; } /* OperatorWord */ .chroma .p { color: #d2d4db; } /* Punctuation */ .chroma .py {} /* NameProperty */ .chroma .s { color: #b8bb26; } /* LiteralString */ .chroma .s1 { color: #b8bb26; } /* LiteralStringSingle */ .chroma .s2 { color: #b8bb26; } /* LiteralStringDouble */ .chroma .sa { color: #ffaa10; } /* LiteralStringAffix */ .chroma .sb { color: #b8bb26; } /* LiteralStringBacktick */ .chroma .sc { color: #ffaa10; } /* LiteralStringChar */ .chroma .sd { color: #b8bb26; } /* LiteralStringDoc */ .chroma .se { color: #ff8540; } /* LiteralStringEscape */ .chroma .sh { color: #b8bb26; } /* LiteralStringHeredoc */ .chroma .si { color: #ffaa10; } /* LiteralStringInterpol */ .chroma .sr { color: #9075cd; } /* LiteralStringRegex */ .chroma .ss { color: #ff8540; } /* LiteralStringSymbol */ .chroma .sx { color: #ffaa10; } /* LiteralStringOther */ .chroma .vc { color: #649bee; } /* NameVariableClass */ .chroma .vg { color: #649bee; } /* NameVariableGlobal */ .chroma .vi { color: #649bee; } /* NameVariableInstance */ .chroma .vm {} /* NameVariableMagic */ .chroma .w { color: #7f8699; } /* TextWhitespace */ .chroma .err { /* not styled because Chroma uses it on too many things like JSX */ } /* Error */ .CodeMirror.cm-s-default .cm-property, .CodeMirror.cm-s-paper .cm-property { color: #a0cc75; } .CodeMirror.cm-s-default .cm-header, .CodeMirror.cm-s-paper .cm-header { color: #9daccc; } .CodeMirror.cm-s-default .cm-quote, .CodeMirror.cm-s-paper .cm-quote { color: #009900; } .CodeMirror.cm-s-default .cm-keyword, .CodeMirror.cm-s-paper .cm-keyword { color: #cc8a61; } .CodeMirror.cm-s-default .cm-atom, .CodeMirror.cm-s-paper .cm-atom { color: #ef5e77; } .CodeMirror.cm-s-default .cm-number, .CodeMirror.cm-s-paper .cm-number { color: #ff5656; } .CodeMirror.cm-s-default .cm-def, .CodeMirror.cm-s-paper .cm-def { color: #e4e4e4; } .CodeMirror.cm-s-default .cm-variable-2, .CodeMirror.cm-s-paper .cm-variable-2 { color: #00bdbf; } .CodeMirror.cm-s-default .cm-variable-3, .CodeMirror.cm-s-paper .cm-variable-3 { color: #008855; } .CodeMirror.cm-s-default .cm-comment, .CodeMirror.cm-s-paper .cm-comment { color: #8e9ab3; } .CodeMirror.cm-s-default .cm-string, .CodeMirror.cm-s-paper .cm-string { color: #a77272; } .CodeMirror.cm-s-default .cm-string-2, .CodeMirror.cm-s-paper .cm-string-2 { color: #ff5500; } .CodeMirror.cm-s-default .cm-meta, .CodeMirror.cm-s-paper .cm-meta, .CodeMirror.cm-s-default .cm-qualifier, .CodeMirror.cm-s-paper .cm-qualifier { color: #ffb176; } .CodeMirror.cm-s-default .cm-builtin, .CodeMirror.cm-s-paper .cm-builtin { color: #b7c951; } .CodeMirror.cm-s-default .cm-bracket, .CodeMirror.cm-s-paper .cm-bracket { color: #999977; } .CodeMirror.cm-s-default .cm-tag, .CodeMirror.cm-s-paper .cm-tag { color: #f1d273; } .CodeMirror.cm-s-default .cm-attribute, .CodeMirror.cm-s-paper .cm-attribute { color: #bfcc70; } .CodeMirror.cm-s-default .cm-hr, .CodeMirror.cm-s-paper .cm-hr { color: #999999; } .CodeMirror.cm-s-default .cm-url, .CodeMirror.cm-s-paper .cm-url { color: #c5cfd0; } .CodeMirror.cm-s-default .cm-link, .CodeMirror.cm-s-paper .cm-link { color: #d8c792; } .CodeMirror.cm-s-default .cm-error, .CodeMirror.cm-s-paper .cm-error { color: #dbdbeb; } :root { --is-dark-theme: true; --color-primary: hsl(23, 88%, 58%); --color-primary-contrast: #000000; --color-primary-dark-1: hsl(23, 88%, 63%); --color-primary-dark-2: hsl(23, 88%, 68%); --color-primary-dark-3: hsl(23, 88%, 73%); --color-primary-dark-4: hsl(23, 88%, 75%); --color-primary-dark-5: hsl(23, 88%, 83%); --color-primary-dark-6: hsl(23, 88%, 90%); --color-primary-dark-7: hsl(23, 88%, 98%); --color-primary-light-1: hsl(23, 88%, 53%); --color-primary-light-2: hsl(23, 88%, 48%); --color-primary-light-3: hsl(23, 88%, 42%); --color-primary-light-4: hsl(23, 88%, 33%); --color-primary-light-5: hsl(23, 88%, 23%); --color-primary-light-6: hsl(23, 88%, 13%); --color-primary-light-7: hsl(23, 88%, 3%); --color-primary-alpha-10: hsla(23, 88%, 63%, 0.9); --color-primary-alpha-20: hsla(23, 88%, 63%, 0.8); --color-primary-alpha-30: hsla(23, 88%, 63%, 0.7); --color-primary-alpha-40: hsla(23, 88%, 63%, 0.6); --color-primary-alpha-50: hsla(23, 88%, 63%, 0.5); --color-primary-alpha-60: hsla(23, 88%, 63%, 0.4); --color-primary-alpha-70: hsla(23, 88%, 63%, 0.3); --color-primary-alpha-80: hsla(23, 88%, 63%, 0.2); --color-primary-alpha-90: hsla(23, 88%, 63%, 0.1); --color-primary-hover: var(--color-primary-dark-1); --color-primary-active: var(--color-primary-light-1); --color-secondary: hsl(208, 10%, 21%); --color-secondary-dark-1: hsl(208, 10%, 24%); --color-secondary-dark-2: hsl(208, 10%, 30%); --color-secondary-dark-3: hsl(208, 10%, 37%); --color-secondary-dark-4: hsl(208, 10%, 44%); --color-secondary-dark-5: hsl(208, 10%, 49%); --color-secondary-dark-6: hsl(208, 10%, 55%); --color-secondary-dark-7: hsl(208, 10%, 60%); --color-secondary-dark-8: hsl(208, 10%, 65%); --color-secondary-dark-9: hsl(208, 10%, 68%); --color-secondary-dark-10: hsl(208, 10%, 73%); --color-secondary-dark-11: hsl(208, 10%, 78%); --color-secondary-dark-12: hsl(208, 10%, 82%); --color-secondary-dark-13: hsl(208, 10%, 85%); --color-secondary-light-1: hsl(208, 10%, 18%); --color-secondary-light-2: hsl(208, 10%, 15%); --color-secondary-light-3: hsl(208, 10%, 11%); --color-secondary-light-4: hsl(208, 10%, 8%); --color-secondary-alpha-10: hsla(208, 10%, 21%, 0.1); --color-secondary-alpha-20: hsla(208, 10%, 21%, 0.2); --color-secondary-alpha-30: hsla(208, 10%, 21%, 0.3); --color-secondary-alpha-40: hsla(208, 10%, 21%, 0.4); --color-secondary-alpha-50: hsla(208, 10%, 21%, 0.5); --color-secondary-alpha-60: hsla(208, 10%, 21%, 0.6); --color-secondary-alpha-70: hsla(208, 10%, 21%, 0.7); --color-secondary-alpha-80: hsla(208, 10%, 21%, 0.8); --color-secondary-alpha-90: hsla(208, 10%, 21%, 0.9); --color-secondary-button: var(--color-secondary-dark-4); --color-secondary-hover: var(--color-secondary-dark-3); --color-secondary-active: var(--color-secondary-dark-2); /* console colors - used for actions console and console files */ --color-console-fg: #f7f8f9; --color-console-fg-subtle: #bdc4cc; --color-console-bg: #171b1e; --color-console-border: #2e353b; --color-console-hover-bg: #272d33; --color-console-active-bg: #2e353b; --color-console-menu-bg: #262b31; --color-console-menu-border: #414b55; /* named colors */ --color-red: hsl(0, 62%, 45%); --color-orange: hsl(24, 89%, 42%); --color-yellow: hsl(49, 96%, 41%); --color-olive: hsl(68, 50%, 43%); --color-green: hsl(144, 57%, 28%); --color-teal: hsl(177, 90%, 27%); --color-blue: hsl(206, 55%, 50%); --color-violet: hsl(259, 66%, 65%); --color-purple: hsl(285, 56%, 58%); --color-pink: hsl(326, 54%, 49%); --color-brown: hsl(24, 39%, 49%); --color-black: hsl(350, 10%, 11%); --color-red-light: hsl(0, 62%, 55%); --color-orange-light: hsl(24, 89%, 52%); --color-yellow-light: hsl(49, 96%, 51%); --color-olive-light: hsl(68, 50%, 53%); --color-green-light: hsl(144, 57%, 38%); --color-teal-light: sl(177, 90%, 37%); --color-blue-light: sl(206, 55%, 60%); --color-violet-light: hsl(259, 66%, 75%); --color-purple-light: hsl(285, 56%, 68%); --color-pink-light: sl(326, 54%, 59%); --color-brown-light: hsl(24, 39%, 59%); --color-black-light: hsl(350, 10%, 21%); --color-red-dark-1: hsl(0, 62%, 35%); --color-orange-dark-1: hsl(24, 89%, 32%); --color-yellow-dark-1: hsl(49, 96%, 31%); --color-olive-dark-1: hsl(68, 50%, 33%); --color-green-dark-1: hsl(144, 57%, 18%); --color-teal-dark-1: hsl(177, 90%, 17%); --color-blue-dark-1: hsl(206, 55%, 40%); --color-violet-dark-1: hsl(259, 66%, 55%); --color-purple-dark-1: hsl(285, 56%, 48%); --color-pink-dark-1: hsl(326, 54%, 39%); --color-brown-dark-1: hsl(24, 39%, 39%); --color-black-dark-1: hsl(0, 20%, 6%); --color-red-dark-2: hsl(0, 62%, 25%); --color-orange-dark-2: hsl(24, 89%, 22%); --color-yellow-dark-2: hsl(49, 96%, 21%); --color-olive-dark-2: hsl(68, 50%, 23%); --color-green-dark-2: hsl(144, 57%, 11%); --color-teal-dark-2: hsl(177, 90%, 7%); --color-blue-dark-2: hsl(206, 55%, 20%); --color-violet-dark-2: hsl(259, 66%, 45%); --color-purple-dark-2: hsl(285, 56%, 38%); --color-pink-dark-2: hsl(326, 54%, 29%); --color-brown-dark-2: hsl(24, 39%, 29%); --color-black-dark-2: hsl(0, 20%, 1%); /* ansi colors used for actions console and console files */ --color-ansi-black: #1e2327; --color-ansi-red: #cc4848; --color-ansi-green: #87ab63; --color-ansi-yellow: #cc9903; --color-ansi-blue: #3a8ac6; --color-ansi-magenta: #d22e8b; --color-ansi-cyan: #00918a; --color-ansi-white: var(--color-console-fg-subtle); --color-ansi-bright-black: #424851; --color-ansi-bright-red: #d15a5a; --color-ansi-bright-green: #93b373; --color-ansi-bright-yellow: #eaaf03; --color-ansi-bright-blue: #4e96cc; --color-ansi-bright-magenta: #d74397; --color-ansi-bright-cyan: #00b6ad; --color-ansi-bright-white: var(--color-console-fg); /* other colors */ --color-grey: #384149; --color-grey-light: #818f9e; --color-gold: #b1983b; --color-white: #ffffff; --color-diff-added-linenum-bg: #274227; --color-diff-added-row-bg: #203224; --color-diff-added-row-border: #314a37; --color-diff-added-word-bg: #3c653c; --color-diff-moved-row-bg: #818044; --color-diff-moved-row-border: #bcca6f; --color-diff-removed-linenum-bg: #482121; --color-diff-removed-row-bg: #301e1e; --color-diff-removed-row-border: #634343; --color-diff-removed-word-bg: #6f3333; --color-diff-inactive: #22282d; --color-error-border: #923636; --color-error-bg: #8b2a2a; --color-error-bg-active: #974646; --color-error-bg-hover: #8d3535; --color-error-text: #ffefef; --color-success-border: #375840; --color-success-bg: #0d402b; --color-success-text: #a6d7a1; --color-warning-border: #bb9d00; --color-warning-bg: #3a3a30; --color-warning-text: #fbbd08; --color-info-border: #306090; --color-info-bg: #26354c; --color-info-text: #38a8e8; --color-red-badge: #db2828; --color-red-badge-bg: #db28281a; --color-red-badge-hover-bg: #db28284d; --color-green-badge: #21ba45; --color-green-badge-bg: #21ba451a; --color-green-badge-hover-bg: #21ba454d; --color-yellow-badge: #fbbd08; --color-yellow-badge-bg: #fbbd081a; --color-yellow-badge-hover-bg: #fbbd084d; --color-orange-badge: #f2711c; --color-orange-badge-bg: #f2711c1a; --color-orange-badge-hover-bg: #f2711c4d; --color-git: #f05133; /* target-based colors */ --color-body: rgb(21, 25, 28); --color-box-header: rgb(20, 23, 25); --color-box-body: rgb(18, 20, 22); --color-box-body-highlight: #1e2226; --color-text-dark: #fcfcfd; --color-text: #e1e2e3; --color-text-light: #d0d1d2; --color-text-light-1: #bbbdbe; --color-text-light-2: #a9abad; --color-text-light-3: #919497; --color-footer: var(--color-nav-bg); --color-timeline: #343c44; --color-input-text: var(--color-text-dark); --color-input-background: #171a1e; --color-input-toggle-background: #2e353c; --color-input-border: var(--color-secondary); --color-input-border-hover: var(--color-secondary-dark-1); --color-light: #00001728; --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-border: #e8f3ff28; --color-hover: #e8f3ff16; --color-active: #e8f3ff20; --color-menu: #171a1e; --color-card: #171a1e; --color-markup-table-row: #e8f3ff0f; --color-markup-code-block: #e8f3ff12; --color-markup-code-inline: #e8f3ff28; --color-button: #171a1e; --color-code-bg: #101214; --color-shadow: #00001758; --color-secondary-bg: #2a3137; --color-expand-button: #2f363d; --color-placeholder-text: var(--color-text-light-3); --color-editor-line-highlight: var(--color-primary-light-5); --color-project-column-bg: var(--color-secondary-light-2); --color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */ --color-reaction-bg: #e8f3ff12; --color-reaction-hover-bg: var(--color-primary-light-4); --color-reaction-active-bg: var(--color-primary-light-5); --color-tooltip-text: #f9fafb; --color-tooltip-bg: #131518f2; --color-nav-bg: rgb(19, 21, 23); --color-nav-hover-bg: var(--color-secondary-light-1); --color-nav-text: var(--color-text); --color-secondary-nav-bg: rgb(20, 23, 25); --color-label-text: var(--color-text); --color-label-bg: #7c30e691; /*--color-label-bg: #7282924b;*/ --color-label-hover-bg: #7940c9e3; /*--color-label-hover-bg: #728292a0;*/ --color-label-active-bg: #701de491; /*--color-accent: var(--color-primary-light-1);*/ --color-accent: var(--color-label-bg); --color-small-accent: var(--color-label-active-bg); --color-highlight-fg: #87651e; --color-highlight-bg: #352c1c; --color-overlay-backdrop: #080808c0; accent-color: var(--color-accent); color-scheme: dark; } /* invert emojis that are hard to read otherwise */ .emoji[aria-label="check mark"], .emoji[aria-label="currency exchange"], .emoji[aria-label="TOP arrow"], .emoji[aria-label="END arrow"], .emoji[aria-label="ON! arrow"], .emoji[aria-label="SOON arrow"], .emoji[aria-label="heavy dollar sign"], .emoji[aria-label="copyright"], .emoji[aria-label="registered"], .emoji[aria-label="trade mark"], .emoji[aria-label="multiply"], .emoji[aria-label="plus"], .emoji[aria-label="minus"], .emoji[aria-label="divide"], .emoji[aria-label="curly loop"], .emoji[aria-label="double curly loop"], .emoji[aria-label="wavy dash"], .emoji[aria-label="paw prints"], .emoji[aria-label="musical note"], .emoji[aria-label="musical notes"] { filter: invert(100%) hue-rotate(180deg); }