1 :root, [data-theme="dark"] { 2 --bg-color: #191919; 3 --fg-color: antiquewhite; 4 --selection-fg-color: #ffffff; 5 --selection-bg-color: #564c44; 6 --accent-color: crimson; 7 --secondary-accent-color: peru; 8 --hover-fg-color: peru; 9 --hover-bg-color: #443A32; 10 --hover-brightness: 1.25; 11 --code-bg: #262626; 12 --link-color: peru; 13 --link-hover-color: crimson; 14 --title-color: #DAA520; 15 --pre-bg-color: #292929; 16 --pre-border-color: #6A6A6A; 17 --article-date: #9D96B8; 18 --grey1: #3C3C3C; 19 20 /* Gruvbox dark theme */ 21 /* Background */ .bg { color: #ebdbb2; background-color: var(--code-bg); -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4 } 22 /* PreWrapper */ .chroma { color: #ebdbb2; background-color: var(--code-bg); -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; } 23 /* Punctuation */ .chroma .p { color: #ebdbb2; } 24 /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } 25 /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } 26 /* LineHighlight */ .chroma .hl { background-color: var(--fg-color) } 27 /* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; color: #928374 } 28 /* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; color: #928374 } 29 /* Line */ .chroma .line { display: flex; } 30 /* Keyword */ .chroma .k { color: #fb4934 } 31 /* KeywordConstant */ .chroma .kc { color: #fabd2f; font-weight: bold } 32 /* KeywordDeclaration */ .chroma .kd { color: #fb4934 } 33 /* KeywordNamespace */ .chroma .kn { color: #fb4934 } 34 /* KeywordPseudo */ .chroma .kp { color: #fb4934 } 35 /* KeywordReserved */ .chroma .kr { color: #fb4934 } 36 /* KeywordType */ .chroma .kt { color: #8ec07c } 37 /* Name */ .chroma .n { color: #ebdbb2 } 38 /* NameAttribute */ .chroma .na { color: #b8bb26 } 39 /* NameBuiltin */ .chroma .nb { color: #8ec07c } 40 /* NameBuiltinPseudo */ .chroma .bp { color: #83a598 } 41 /* NameClass */ .chroma .nc { color: #fabd2f } 42 /* NameConstant */ .chroma .no { color: #d3869b; font-weight: bold } 43 /* NameDecorator */ .chroma .nd { color: #fabd2f } 44 /* NameEntity */ .chroma .ni { color: #83a598 } 45 /* NameException */ .chroma .ne { color: #fb4934; font-weight: bold } 46 /* NameFunction */ .chroma .nf { color: #b8bb26 } 47 /* NameFunctionMagic */ .chroma .fm { color: #b8bb26 } 48 /* NameLabel */ .chroma .nl { color: #8ec07c } 49 /* NameNamespace */ .chroma .nn { color: #fabd2f } 50 /* NameOther */ .chroma .nx { color: #ebdbb2 } 51 /* NameProperty */ .chroma .py { color: #83a598 } 52 /* NameTag */ .chroma .nt { color: #fb4934 } 53 /* NameVariable */ .chroma .nv { color: #83a598 } 54 /* NameVariableClass */ .chroma .vc { color: #83a598 } 55 /* NameVariableGlobal */ .chroma .vg { color: #83a598; font-weight: bold } 56 /* NameVariableInstance */ .chroma .vi { color: #83a598 } 57 /* NameVariableMagic */ .chroma .vm { color: #83a598 } 58 /* Literal */ .chroma .l { color: #d3869b } 59 /* LiteralDate */ .chroma .ld { color: #b8bb26 } 60 /* LiteralString */ .chroma .s { color: #b8bb26 } 61 /* LiteralStringAffix */ .chroma .sa { color: #b8bb26 } 62 /* LiteralStringBacktick */ .chroma .sb { color: #b8bb26 } 63 /* LiteralStringChar */ .chroma .sc { color: #b8bb26 } 64 /* LiteralStringDelimiter */ .chroma .dl { color: #b8bb26 } 65 /* LiteralStringDoc */ .chroma .sd { color: #83a598 } 66 /* LiteralStringDouble */ .chroma .s2 { color: #b8bb26 } 67 /* LiteralStringEscape */ .chroma .se { color: #fe8019; font-weight: bold } 68 /* LiteralStringHeredoc */ .chroma .sh { color: #b8bb26 } 69 /* LiteralStringInterpol */ .chroma .si { color: #b8bb26 } 70 /* LiteralStringOther */ .chroma .sx { color: #b8bb26 } 71 /* LiteralStringRegex */ .chroma .sr { color: #8ec07c } 72 /* LiteralStringSingle */ .chroma .s1 { color: #b8bb26 } 73 /* LiteralStringSymbol */ .chroma .ss { color: #8ec07c } 74 /* LiteralNumber */ .chroma .m { color: #d3869b } 75 /* LiteralNumberBin */ .chroma .mb { color: #d3869b } 76 /* LiteralNumberFloat */ .chroma .mf { color: #d3869b } 77 /* LiteralNumberHex */ .chroma .mh { color: #d3869b } 78 /* LiteralNumberInteger */ .chroma .mi { color: #d3869b } 79 /* LiteralNumberIntegerLong */ .chroma .il { color: #d3869b } 80 /* LiteralNumberOct */ .chroma .mo { color: #d3869b } 81 /* Operator */ .chroma .o { color: #fe8019 } 82 /* OperatorWord */ .chroma .ow { color: #fb4934; font-weight: bold } 83 /* Comment */ .chroma .c { color: #928374; font-style: italic } 84 /* CommentHashbang */ .chroma .ch { color: #928374; font-weight: bold; font-style: italic } 85 /* CommentMultiline */ .chroma .cm { color: #928374; font-style: italic } 86 /* CommentSingle */ .chroma .c1 { color: #928374; font-style: italic } 87 /* CommentSpecial */ .chroma .cs { color: #928374; font-style: italic } 88 /* CommentPreproc */ .chroma .cp { color: #8ec07c; font-style: italic } 89 /* CommentPreprocFile */ .chroma .cpf { color: #8ec07c; font-style: italic } 90 /* GenericEmph */ .chroma .ge { font-style: italic } 91 /* GenericHeading */ .chroma .gh { color: #fabd2f; font-weight: bold } 92 /* GenericInserted */ .chroma .gi { color: #b8bb26 } 93 /* Generic X (used for diff file remove line) */ .chroma .gd { color: #fb4934 } 94 /* GenericOutput */ .chroma .go { color: #8ec07c } 95 /* GenericPrompt */ .chroma .gp { color: #8ec07c } 96 /* GenericStrong */ .chroma .gs { font-weight: bold } 97 /* GenericSubheading */ .chroma .gu { color: #83a598 } 98 /* GenericTraceback */ .chroma .gt { color: #fb4934 } 99 /* GenericUnderline */ .chroma .gl { text-decoration: underline } 100 } 101 102 [data-theme="light"] { 103 --fg-color: #000000; 104 --bg-color: white; 105 --accent-color: #CC2936; 106 --secondary-accent-color: #141414; 107 --hover-fg-color: #A04A00; 108 --hover-bg-color: #E9E9E9; 109 --hover-brightness: 0.95; 110 --link-hover-color: #CC2936; 111 --link-color: #A04A00; 112 --title-color: #000000; 113 --pre-color: rgba(190,198,219,0.2); 114 --pre-border-color: #aaa; 115 /* --code-bg: #656c76; */ 116 --code-bg: rgba(190,198,219,0.2); 117 --code-bg: #fdf6dc; 118 --article-date: #7E5A9B; 119 --grey1: #D0D0D0; 120 121 /* Gruvbox light theme */ 122 /* Background */ .bg { color: var(--fg-color); background-color: var(--code-bg); -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4 } 123 /* PreWrapper */ .chroma { color: var(--fg-color); background-color: var(--code-bg); -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; } 124 /* Error */ .chroma .err { color: #9d0006; background-color: #fbf1c7 } 125 /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } 126 /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } 127 /* LineHighlight */ .chroma .hl { background-color: #ebdbb2 } 128 /* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; color: #928374 } 129 /* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em; color: #928374 } 130 /* Line */ .chroma .line { display: flex; } 131 /* Keyword */ .chroma .k { color: #9d0006 } 132 /* KeywordConstant */ .chroma .kc { color: #9d0006 } 133 /* KeywordDeclaration */ .chroma .kd { color: #9d0006 } 134 /* KeywordNamespace */ .chroma .kn { color: #9d0006 } 135 /* KeywordPseudo */ .chroma .kp { color: #9d0006 } 136 /* KeywordReserved */ .chroma .kr { color: #9d0006 } 137 /* KeywordType */ .chroma .kt { color: #b57614 } 138 /* Name */ .chroma .n { color: var(--fg-color) } 139 /* NameAttribute */ .chroma .na { color: #79740e } 140 /* NameBuiltin */ .chroma .nb { color: #076678 } 141 /* NameBuiltinPseudo */ .chroma .bp { color: #076678 } 142 /* NameClass */ .chroma .nc { color: #8f3f71 } 143 /* NameConstant */ .chroma .no { color: #8f3f71 } 144 /* NameDecorator */ .chroma .nd { color: #79740e } 145 /* NameEntity */ .chroma .ni { color: #427b58 } 146 /* NameException */ .chroma .ne { color: #9d0006 } 147 /* NameFunction */ .chroma .nf { color: #427b58 } 148 /* NameFunctionMagic */ .chroma .fm { color: #427b58 } 149 /* NameLabel */ .chroma .nl { color: #9d0006 } 150 /* NameNamespace */ .chroma .nn { color: #8f3f71 } 151 /* NameOther */ .chroma .nx { color: var(--fg-color) } 152 /* NameProperty */ .chroma .py { color: var(--fg-color) } 153 /* NameTag */ .chroma .nt { color: #9d0006 } 154 /* NameVariable */ .chroma .nv { color: #8f3f71 } 155 /* NameVariableClass */ .chroma .vc { color: #8f3f71 } 156 /* NameVariableGlobal */ .chroma .vg { color: #8f3f71 } 157 /* NameVariableInstance */ .chroma .vi { color: #8f3f71 } 158 /* NameVariableMagic */ .chroma .vm { color: #8f3f71 } 159 /* Literal */ .chroma .l { color: #8f3f71 } 160 /* LiteralDate */ .chroma .ld { color: #79740e } 161 /* LiteralString */ .chroma .s { color: #79740e } 162 /* LiteralStringAffix */ .chroma .sa { color: #79740e } 163 /* LiteralStringBacktick */ .chroma .sb { color: #79740e } 164 /* LiteralStringChar */ .chroma .sc { color: #79740e } 165 /* LiteralStringDelimiter */ .chroma .dl { color: #79740e } 166 /* LiteralStringDoc */ .chroma .sd { color: #79740e } 167 /* LiteralStringDouble */ .chroma .s2 { color: #79740e } 168 /* LiteralStringEscape */ .chroma .se { color: #b57614 } 169 /* LiteralStringHeredoc */ .chroma .sh { color: #79740e } 170 /* LiteralStringInterpol */ .chroma .si { color: #79740e } 171 /* LiteralStringOther */ .chroma .sx { color: #79740e } 172 /* LiteralStringRegex */ .chroma .sr { color: #8f3f71 } 173 /* LiteralStringSingle */ .chroma .s1 { color: #79740e } 174 /* LiteralStringSymbol */ .chroma .ss { color: #79740e } 175 /* LiteralNumber */ .chroma .m { color: #8f3f71 } 176 /* LiteralNumberBin */ .chroma .mb { color: #8f3f71 } 177 /* LiteralNumberFloat */ .chroma .mf { color: #8f3f71 } 178 /* LiteralNumberHex */ .chroma .mh { color: #8f3f71 } 179 /* LiteralNumberInteger */ .chroma .mi { color: #8f3f71 } 180 /* LiteralNumberIntegerLong */ .chroma .il { color: #8f3f71 } 181 /* LiteralNumberOct */ .chroma .mo { color: #8f3f71 } 182 /* Operator */ .chroma .o { color: #9d0006 } 183 /* OperatorWord */ .chroma .ow { color: #9d0006 } 184 /* Punctuation */ .chroma .p { color: var(--fg-color) } 185 /* Comment */ .chroma .c { color: #928374 } 186 /* CommentHashbang */ .chroma .ch { color: #928374 } 187 /* CommentMultiline */ .chroma .cm { color: #928374 } 188 /* CommentSingle */ .chroma .c1 { color: #928374 } 189 /* CommentSpecial */ .chroma .cs { color: #928374 } 190 /* CommentPreproc */ .chroma .cp { color: #928374 } 191 /* CommentPreprocFile */ .chroma .cpf { color: #928374 } 192 /* GenericEmph */ .chroma .ge { font-style: italic } 193 /* GenericStrong */ .chroma .gs { font-weight: bold } 194 /* GenericInserted */ .chroma .gi { color: #79740e } 195 }
