From 0547c3d73d558937d0073c5811ce0bf5dbd8d178 Mon Sep 17 00:00:00 2001 From: leafee98 Date: Wed, 15 Mar 2023 16:24:06 +0800 Subject: [PATCH] Respect browser's prefered color scheme now - Use gruvbox highlight theme when dark --- static/css/style.css | 132 ++++++++++++++++----- static/css/syntax.css | 262 ++++++++++++++++++++++++++++-------------- 2 files changed, 281 insertions(+), 113 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index 163001b..48075aa 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,3 +1,75 @@ +/* defines light color */ +:root { + --color-light-bg-page: #EBEBEB; + --color-light-bg-content: #F4F4F4; + --color-light-bg-block: #EBEBEB; + --color-light-bg-shadow: #E0E0E0; + --color-light-fg-font-normal: #4E403E; + --color-light-fg-font-hover: #555555; + --color-light-fg-font-block: #53504D; + --color-light-fg-font-quote: #57606A; + --color-light-fg-tiny-line: #e0e0e0; + --color-light-fg-marker-quote: #BFBFBF; + --color-light-fg-hyperlink: #FF5F61; + --color-light-fg-hyperlink-hover: #FC3134; + --color-light-bg-pager: #000000; + --color-light-fg-pager: #000000; +} + +/* defines dark color */ +:root { + --color-dark-bg-page: #2F2F2F; + --color-dark-bg-content: #453B3B; + --color-dark-bg-block: #4E403E; + --color-dark-bg-shadow: #505050; + --color-dark-fg-font-normal: #E8E8E8; + --color-dark-fg-font-hover: #CECECD; + --color-dark-fg-font-block: #E8E8E8; + --color-dark-fg-font-quote: #8B8680; + --color-dark-fg-tiny-line: #585858; + --color-dark-fg-marker-quote: #6F6B66; + --color-dark-fg-hyperlink: #FF5F61; + --color-dark-fg-hyperlink-hover: #FC3134; + --color-dark-bg-pager: #000000; + --color-dark-fg-pager: #000000; +} + +:root { + --color-bg-page: var(--color-light-bg-page); + --color-bg-content: var(--color-light-bg-content); + --color-bg-block: var(--color-light-bg-block); + --color-bg-shadow: var(--color-light-bg-shadow); + --color-fg-font-normal: var(--color-light-fg-font-normal); + --color-fg-font-hover: var(--color-light-fg-font-hover); + --color-fg-font-block: var(--color-light-fg-font-block); + --color-fg-font-quote: var(--color-light-fg-font-quote); + --color-fg-tiny-line: var(--color-light-fg-tiny-line); + --color-fg-marker-quote: var(--color-light-fg-marker-quote); + --color-fg-hyperlink: var(--color-light-fg-hyperlink); + --color-fg-hyperlink-hover: var(--color-light-fg-hyperlink-hover); + --color-bg-pager: var(--color-light-bg-pager); + --color-fg-pager: var(--color-light-fg-pager); +} + +@media (prefers-color-scheme: dark) { + :root { + --color-bg-page: var(--color-dark-bg-page); + --color-bg-content: var(--color-dark-bg-content); + --color-bg-block: var(--color-dark-bg-block); + --color-bg-shadow: var(--color-dark-bg-shadow); + --color-fg-font-normal: var(--color-dark-fg-font-normal); + --color-fg-font-hover: var(--color-dark-fg-font-hover); + --color-fg-font-block: var(--color-dark-fg-font-block); + --color-fg-font-quote: var(--color-dark-fg-font-quote); + --color-fg-tiny-line: var(--color-dark-fg-tiny-line); + --color-fg-marker-quote: var(--color-dark-fg-marker-quote); + --color-fg-hyperlink: var(--color-dark-fg-hyperlink); + --color-fg-hyperlink-hover: var(--color-dark-fg-hyperlink-hover); + --color-bg-pager: var(--color-dark-bg-pager); + --color-fg-pager: var(--color-dark-fg-pager); + } +} + :root { --fonts-sans-en: "Noto Sans", "Droid Sans", "Calibri", "Arial"; --fonts-sans-zh: "WenQuanYi Zen Hei", "WenQuanYi Micro Hei", @@ -46,6 +118,7 @@ --font-size-6: 2.000rem; } + *, ::before, ::after { font-family: inherit; box-sizing: border-box; @@ -54,7 +127,7 @@ html { font-family: var(--fonts-sans); font-size: 16px; - color: var(--color-black-3); + color: var(--color-fg-font-normal); } /**************************************************************/ @@ -70,7 +143,7 @@ body { align-items: center; - background-color: var(--color-light-4); + background-color: var(--color-bg-page); } /* set up padding and margin of some main elements */ @@ -101,7 +174,9 @@ body { .side-recent, .side-categories, .side-tags -{ background-color: var(--color-light-5); } +{ + background-color: var(--color-bg-content); +} /* place header in the center of header-wrapper */ .header-wrapper { @@ -164,7 +239,7 @@ body { margin-top: var(--len-3); padding-top: var(--len-3); - border-top: 1px solid var(--color-light-1); + border-top: 1px solid var(--color-fg-tiny-line); } } @@ -206,9 +281,9 @@ body { /* beautify sub menu style */ .header .sub-menu { - background-color: var(--color-light-5); + background-color: var(--color-bg-content); padding: var(--len-2) var(--len-4); - box-shadow: var(--color-light-1) 0px 0px 3px 1px; + box-shadow: var(--color-bg-shadow) 0px 0px 3px 1px; border-radius: 3px; } @@ -219,8 +294,8 @@ body { font-weight: bold; } -.header a { color: var(--color-black-3); text-decoration: none; } -.header a:hover { color: var(--color-fav-2); } +.header a { color: var(--color-fg-font-normal); text-decoration: none; } +.header a:hover { color: var(--color-fg-font-hover); } /************************/ /* set up footer layout */ @@ -243,7 +318,7 @@ body { .footer .footer-item:last-child { margin-right: 0; } /* beautify hyper link style */ -.footer { color: var(--color-black-1) } +.footer { color: var(--color-fg-font-normal) } .footer a { color: var(--color-fav-2); text-decoration: none; } .footer a:hover { color: var(--color-fav-3); } @@ -265,14 +340,14 @@ body { align-items: flex-start; font-size: var(--font-size-1); - color: var(--color-black-1); + color: var(--color-fg-font-quote); } .list-item .tips > * { margin-right: var(--len-3); } .list-item .tips > *:last-child { margin-right: 0; } -.list-item .title a { text-decoration: none; color: var(--color-black-2); } -.list-item .title a:hover { color: var(--color-fav-2); } +.list-item .title a { text-decoration: none; color: var(--color-fg-font-normal); } +.list-item .title a:hover { color: var(--color-fg-font-hover); } .list-item .tips a { text-decoration: none; color: var(--color-fav-2) } .list-item .tips a:hover { color: var(--color-fav-3) } @@ -286,7 +361,7 @@ body { .list-item .title { margin: 0 0 var(--len-2) 0; } .list-item .tips { margin: 0 0 var(--len-3) 0; } -.list-item { border-bottom: 1px solid var(--color-light-2); } +.list-item { border-bottom: 1px solid var(--color-fg-tiny-line); } .list-item:last-child { border-bottom: 0; } .list-item:first-child { padding-top: 0;} @@ -307,7 +382,7 @@ body { .side hr { border: none; height: 1px; - background-color: var(--color-light-2); + background-color: var(--color-bg-content); margin: var(--len-2) 0; } @@ -317,7 +392,7 @@ body { .side > * { margin-bottom: var(--len-3); } .side > *:last-child { margin-bottom: 0; } -.side a { color: var(--color-black-3); text-decoration: none; } +.side a { color: var(--color-fg-font-normal); text-decoration: none; } .side a:hover { color: var(--color-fav-2); } /* horizontally place tags */ @@ -360,7 +435,7 @@ body { .single .tip, .single .taxonomies -{ color: var(--color-black-1)} +{ color: var(--color-fg-font-normal)} .single .taxonomies > * { display: inline-block; } @@ -382,10 +457,10 @@ body { .content code { font-family: var(--fonts-mono); - background-color: var(--color-light-4); + background-color: var(--color-bg-block); padding: 0 2px; - border: 1px solid var(--color-light-1); + border: 1px solid var(--color-fg-tiny-line); border-radius: 2px; line-height: inherit; word-wrap: break-word; @@ -400,6 +475,7 @@ body { padding: var(--len-3); border: none; + background-color: var(--color-bg-block); border-radius: 3px; overflow: auto; @@ -411,14 +487,14 @@ body { margin-bottom: 5px; padding-left: 1em; margin-left: 0px; - border-left: 3px solid #eee; - color: var(--color-black-1); + border-left: 3px solid var(--color-fg-marker-quote); + color: var(--color-fg-font-quote); } .content hr { border: none; height: 2px; - background-color: var(--color-light-4); + background-color: var(--color-fg-tiny-line); width: 80%; margin: var(--len-2) auto; @@ -526,11 +602,11 @@ body { #archive .group .value .date { display: inline-block; width: 60px; } #archive .group .value .title { display: inline; } -#archive .group .value .date { color: var(--color-black-0); } +#archive .group .value .date { color: var(--color-fg-font-normal); } #archive .group .value a { text-decoration: none; } -#archive .group .value a { color: var(--color-black-3); } +#archive .group .value a { color: var(--color-fg-font-normal); } #archive .group .value a:hover { color: var(--color-fav-2); } #archive .group .value .tags { @@ -538,7 +614,7 @@ body { margin-left: 7px; } #archive .group .value .tags { - background: var(--color-light-4); + background: var(--color-bg-block); border-radius: 2px; padding: 4px 7px; font-size: var(--font-size-1); @@ -607,8 +683,8 @@ body { text-decoration: none; - color: var(--color-black-2); - background-color: var(--color-light-3); + color: var(--color-fg-font-normal); + background-color: var(--color-fg-hyperlink-hover); transition: background-color 0.25s; } @@ -620,7 +696,7 @@ body { .pagination a.current { background-color: var(--color-fav-1); pointer-events: none; - color: var(--color-black-1); + color: var(--color-fg-font-normal); cursor: default; } @@ -635,7 +711,7 @@ body { /* keep content style from being affected by remark42 style */ .content pre { background-color: transparent; - color: var(--color-black-3) + color: var(--color-fg-font-normal) } /**********/ diff --git a/static/css/syntax.css b/static/css/syntax.css index 8fa11f4..322f0ee 100644 --- a/static/css/syntax.css +++ b/static/css/syntax.css @@ -1,85 +1,177 @@ -/* Background */ .bg { color: #272822; } -/* PreWrapper */ .chroma { color: #272822; } -/* Other */ .chroma .x { } -/* Error */ .chroma .err { color: #960050; background-color: #1e0010 } -/* CodeLine */ .chroma .cl { } -/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } -/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } -/* LineHighlight */ .chroma .hl { background-color: #ffffcc } -/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } -/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } -/* Line */ .chroma .line { display: flex; } -/* Keyword */ .chroma .k { color: #00a8c8 } -/* KeywordConstant */ .chroma .kc { color: #00a8c8 } -/* KeywordDeclaration */ .chroma .kd { color: #00a8c8 } -/* KeywordNamespace */ .chroma .kn { color: #f92672 } -/* KeywordPseudo */ .chroma .kp { color: #00a8c8 } -/* KeywordReserved */ .chroma .kr { color: #00a8c8 } -/* KeywordType */ .chroma .kt { color: #00a8c8 } -/* Name */ .chroma .n { color: #111111 } -/* NameAttribute */ .chroma .na { color: #75af00 } -/* NameBuiltin */ .chroma .nb { color: #111111 } -/* NameBuiltinPseudo */ .chroma .bp { color: #111111 } -/* NameClass */ .chroma .nc { color: #75af00 } -/* NameConstant */ .chroma .no { color: #00a8c8 } -/* NameDecorator */ .chroma .nd { color: #75af00 } -/* NameEntity */ .chroma .ni { color: #111111 } -/* NameException */ .chroma .ne { color: #75af00 } -/* NameFunction */ .chroma .nf { color: #75af00 } -/* NameFunctionMagic */ .chroma .fm { color: #111111 } -/* NameLabel */ .chroma .nl { color: #111111 } -/* NameNamespace */ .chroma .nn { color: #111111 } -/* NameOther */ .chroma .nx { color: #75af00 } -/* NameProperty */ .chroma .py { color: #111111 } -/* NameTag */ .chroma .nt { color: #f92672 } -/* NameVariable */ .chroma .nv { color: #111111 } -/* NameVariableClass */ .chroma .vc { color: #111111 } -/* NameVariableGlobal */ .chroma .vg { color: #111111 } -/* NameVariableInstance */ .chroma .vi { color: #111111 } -/* NameVariableMagic */ .chroma .vm { color: #111111 } -/* Literal */ .chroma .l { color: #ae81ff } -/* LiteralDate */ .chroma .ld { color: #d88200 } -/* LiteralString */ .chroma .s { color: #d88200 } -/* LiteralStringAffix */ .chroma .sa { color: #d88200 } -/* LiteralStringBacktick */ .chroma .sb { color: #d88200 } -/* LiteralStringChar */ .chroma .sc { color: #d88200 } -/* LiteralStringDelimiter */ .chroma .dl { color: #d88200 } -/* LiteralStringDoc */ .chroma .sd { color: #d88200 } -/* LiteralStringDouble */ .chroma .s2 { color: #d88200 } -/* LiteralStringEscape */ .chroma .se { color: #8045ff } -/* LiteralStringHeredoc */ .chroma .sh { color: #d88200 } -/* LiteralStringInterpol */ .chroma .si { color: #d88200 } -/* LiteralStringOther */ .chroma .sx { color: #d88200 } -/* LiteralStringRegex */ .chroma .sr { color: #d88200 } -/* LiteralStringSingle */ .chroma .s1 { color: #d88200 } -/* LiteralStringSymbol */ .chroma .ss { color: #d88200 } -/* LiteralNumber */ .chroma .m { color: #ae81ff } -/* LiteralNumberBin */ .chroma .mb { color: #ae81ff } -/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff } -/* LiteralNumberHex */ .chroma .mh { color: #ae81ff } -/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff } -/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff } -/* LiteralNumberOct */ .chroma .mo { color: #ae81ff } -/* Operator */ .chroma .o { color: #f92672 } -/* OperatorWord */ .chroma .ow { color: #f92672 } -/* Punctuation */ .chroma .p { color: #111111 } -/* Comment */ .chroma .c { color: #75715e } -/* CommentHashbang */ .chroma .ch { color: #75715e } -/* CommentMultiline */ .chroma .cm { color: #75715e } -/* CommentSingle */ .chroma .c1 { color: #75715e } -/* CommentSpecial */ .chroma .cs { color: #75715e } -/* CommentPreproc */ .chroma .cp { color: #75715e } -/* CommentPreprocFile */ .chroma .cpf { color: #75715e } -/* Generic */ .chroma .g { } -/* GenericDeleted */ .chroma .gd { } -/* GenericEmph */ .chroma .ge { font-style: italic } -/* GenericError */ .chroma .gr { } -/* GenericHeading */ .chroma .gh { } -/* GenericInserted */ .chroma .gi { } -/* GenericOutput */ .chroma .go { } -/* GenericPrompt */ .chroma .gp { } -/* GenericStrong */ .chroma .gs { font-weight: bold } -/* GenericSubheading */ .chroma .gu { } -/* GenericTraceback */ .chroma .gt { } -/* GenericUnderline */ .chroma .gl { } -/* TextWhitespace */ .chroma .w { } +@media (prefers-color-scheme: light) { + /* Background */ .bg { color: #272822; } + /* PreWrapper */ .chroma { color: #272822; } + /* Other */ .chroma .x { } + /* Error */ .chroma .err { color: #960050; background-color: #1e0010 } + /* CodeLine */ .chroma .cl { } + /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } + /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } + /* LineHighlight */ .chroma .hl { background-color: #ffffcc } + /* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } + /* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } + /* Line */ .chroma .line { display: flex; } + /* Keyword */ .chroma .k { color: #00a8c8 } + /* KeywordConstant */ .chroma .kc { color: #00a8c8 } + /* KeywordDeclaration */ .chroma .kd { color: #00a8c8 } + /* KeywordNamespace */ .chroma .kn { color: #f92672 } + /* KeywordPseudo */ .chroma .kp { color: #00a8c8 } + /* KeywordReserved */ .chroma .kr { color: #00a8c8 } + /* KeywordType */ .chroma .kt { color: #00a8c8 } + /* Name */ .chroma .n { color: #111111 } + /* NameAttribute */ .chroma .na { color: #75af00 } + /* NameBuiltin */ .chroma .nb { color: #111111 } + /* NameBuiltinPseudo */ .chroma .bp { color: #111111 } + /* NameClass */ .chroma .nc { color: #75af00 } + /* NameConstant */ .chroma .no { color: #00a8c8 } + /* NameDecorator */ .chroma .nd { color: #75af00 } + /* NameEntity */ .chroma .ni { color: #111111 } + /* NameException */ .chroma .ne { color: #75af00 } + /* NameFunction */ .chroma .nf { color: #75af00 } + /* NameFunctionMagic */ .chroma .fm { color: #111111 } + /* NameLabel */ .chroma .nl { color: #111111 } + /* NameNamespace */ .chroma .nn { color: #111111 } + /* NameOther */ .chroma .nx { color: #75af00 } + /* NameProperty */ .chroma .py { color: #111111 } + /* NameTag */ .chroma .nt { color: #f92672 } + /* NameVariable */ .chroma .nv { color: #111111 } + /* NameVariableClass */ .chroma .vc { color: #111111 } + /* NameVariableGlobal */ .chroma .vg { color: #111111 } + /* NameVariableInstance */ .chroma .vi { color: #111111 } + /* NameVariableMagic */ .chroma .vm { color: #111111 } + /* Literal */ .chroma .l { color: #ae81ff } + /* LiteralDate */ .chroma .ld { color: #d88200 } + /* LiteralString */ .chroma .s { color: #d88200 } + /* LiteralStringAffix */ .chroma .sa { color: #d88200 } + /* LiteralStringBacktick */ .chroma .sb { color: #d88200 } + /* LiteralStringChar */ .chroma .sc { color: #d88200 } + /* LiteralStringDelimiter */ .chroma .dl { color: #d88200 } + /* LiteralStringDoc */ .chroma .sd { color: #d88200 } + /* LiteralStringDouble */ .chroma .s2 { color: #d88200 } + /* LiteralStringEscape */ .chroma .se { color: #8045ff } + /* LiteralStringHeredoc */ .chroma .sh { color: #d88200 } + /* LiteralStringInterpol */ .chroma .si { color: #d88200 } + /* LiteralStringOther */ .chroma .sx { color: #d88200 } + /* LiteralStringRegex */ .chroma .sr { color: #d88200 } + /* LiteralStringSingle */ .chroma .s1 { color: #d88200 } + /* LiteralStringSymbol */ .chroma .ss { color: #d88200 } + /* LiteralNumber */ .chroma .m { color: #ae81ff } + /* LiteralNumberBin */ .chroma .mb { color: #ae81ff } + /* LiteralNumberFloat */ .chroma .mf { color: #ae81ff } + /* LiteralNumberHex */ .chroma .mh { color: #ae81ff } + /* LiteralNumberInteger */ .chroma .mi { color: #ae81ff } + /* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff } + /* LiteralNumberOct */ .chroma .mo { color: #ae81ff } + /* Operator */ .chroma .o { color: #f92672 } + /* OperatorWord */ .chroma .ow { color: #f92672 } + /* Punctuation */ .chroma .p { color: #111111 } + /* Comment */ .chroma .c { color: #75715e } + /* CommentHashbang */ .chroma .ch { color: #75715e } + /* CommentMultiline */ .chroma .cm { color: #75715e } + /* CommentSingle */ .chroma .c1 { color: #75715e } + /* CommentSpecial */ .chroma .cs { color: #75715e } + /* CommentPreproc */ .chroma .cp { color: #75715e } + /* CommentPreprocFile */ .chroma .cpf { color: #75715e } + /* Generic */ .chroma .g { } + /* GenericDeleted */ .chroma .gd { } + /* GenericEmph */ .chroma .ge { font-style: italic } + /* GenericError */ .chroma .gr { } + /* GenericHeading */ .chroma .gh { } + /* GenericInserted */ .chroma .gi { } + /* GenericOutput */ .chroma .go { } + /* GenericPrompt */ .chroma .gp { } + /* GenericStrong */ .chroma .gs { font-weight: bold } + /* GenericSubheading */ .chroma .gu { } + /* GenericTraceback */ .chroma .gt { } + /* GenericUnderline */ .chroma .gl { } + /* TextWhitespace */ .chroma .w { } +} + +/* use monokai highlight theme in dark */ +@media (prefers-color-scheme: dark) { + /* Background */ .bg { color: #f8f8f2; background-color: #272822; } + /* PreWrapper */ .chroma { color: #f8f8f2; background-color: #272822; } + /* Other */ .chroma .x { } + /* Error */ .chroma .err { color: #960050; background-color: #1e0010 } + /* CodeLine */ .chroma .cl { } + /* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit } + /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } + /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } + /* LineHighlight */ .chroma .hl { background-color: #ffffcc } + /* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } + /* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } + /* Line */ .chroma .line { display: flex; } + /* Keyword */ .chroma .k { color: #66d9ef } + /* KeywordConstant */ .chroma .kc { color: #66d9ef } + /* KeywordDeclaration */ .chroma .kd { color: #66d9ef } + /* KeywordNamespace */ .chroma .kn { color: #f92672 } + /* KeywordPseudo */ .chroma .kp { color: #66d9ef } + /* KeywordReserved */ .chroma .kr { color: #66d9ef } + /* KeywordType */ .chroma .kt { color: #66d9ef } + /* Name */ .chroma .n { } + /* NameAttribute */ .chroma .na { color: #a6e22e } + /* NameBuiltin */ .chroma .nb { } + /* NameBuiltinPseudo */ .chroma .bp { } + /* NameClass */ .chroma .nc { color: #a6e22e } + /* NameConstant */ .chroma .no { color: #66d9ef } + /* NameDecorator */ .chroma .nd { color: #a6e22e } + /* NameEntity */ .chroma .ni { } + /* NameException */ .chroma .ne { color: #a6e22e } + /* NameFunction */ .chroma .nf { color: #a6e22e } + /* NameFunctionMagic */ .chroma .fm { } + /* NameLabel */ .chroma .nl { } + /* NameNamespace */ .chroma .nn { } + /* NameOther */ .chroma .nx { color: #a6e22e } + /* NameProperty */ .chroma .py { } + /* NameTag */ .chroma .nt { color: #f92672 } + /* NameVariable */ .chroma .nv { } + /* NameVariableClass */ .chroma .vc { } + /* NameVariableGlobal */ .chroma .vg { } + /* NameVariableInstance */ .chroma .vi { } + /* NameVariableMagic */ .chroma .vm { } + /* Literal */ .chroma .l { color: #ae81ff } + /* LiteralDate */ .chroma .ld { color: #e6db74 } + /* LiteralString */ .chroma .s { color: #e6db74 } + /* LiteralStringAffix */ .chroma .sa { color: #e6db74 } + /* LiteralStringBacktick */ .chroma .sb { color: #e6db74 } + /* LiteralStringChar */ .chroma .sc { color: #e6db74 } + /* LiteralStringDelimiter */ .chroma .dl { color: #e6db74 } + /* LiteralStringDoc */ .chroma .sd { color: #e6db74 } + /* LiteralStringDouble */ .chroma .s2 { color: #e6db74 } + /* LiteralStringEscape */ .chroma .se { color: #ae81ff } + /* LiteralStringHeredoc */ .chroma .sh { color: #e6db74 } + /* LiteralStringInterpol */ .chroma .si { color: #e6db74 } + /* LiteralStringOther */ .chroma .sx { color: #e6db74 } + /* LiteralStringRegex */ .chroma .sr { color: #e6db74 } + /* LiteralStringSingle */ .chroma .s1 { color: #e6db74 } + /* LiteralStringSymbol */ .chroma .ss { color: #e6db74 } + /* LiteralNumber */ .chroma .m { color: #ae81ff } + /* LiteralNumberBin */ .chroma .mb { color: #ae81ff } + /* LiteralNumberFloat */ .chroma .mf { color: #ae81ff } + /* LiteralNumberHex */ .chroma .mh { color: #ae81ff } + /* LiteralNumberInteger */ .chroma .mi { color: #ae81ff } + /* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff } + /* LiteralNumberOct */ .chroma .mo { color: #ae81ff } + /* Operator */ .chroma .o { color: #f92672 } + /* OperatorWord */ .chroma .ow { color: #f92672 } + /* Punctuation */ .chroma .p { } + /* Comment */ .chroma .c { color: #75715e } + /* CommentHashbang */ .chroma .ch { color: #75715e } + /* CommentMultiline */ .chroma .cm { color: #75715e } + /* CommentSingle */ .chroma .c1 { color: #75715e } + /* CommentSpecial */ .chroma .cs { color: #75715e } + /* CommentPreproc */ .chroma .cp { color: #75715e } + /* CommentPreprocFile */ .chroma .cpf { color: #75715e } + /* Generic */ .chroma .g { } + /* GenericDeleted */ .chroma .gd { color: #f92672 } + /* GenericEmph */ .chroma .ge { font-style: italic } + /* GenericError */ .chroma .gr { } + /* GenericHeading */ .chroma .gh { } + /* GenericInserted */ .chroma .gi { color: #a6e22e } + /* GenericOutput */ .chroma .go { } + /* GenericPrompt */ .chroma .gp { } + /* GenericStrong */ .chroma .gs { font-weight: bold } + /* GenericSubheading */ .chroma .gu { color: #75715e } + /* GenericTraceback */ .chroma .gt { } + /* GenericUnderline */ .chroma .gl { } + /* TextWhitespace */ .chroma .w { } +}