diff --git a/src/themes/scss/dark.scss b/src/themes/scss/dark.scss index 0ab8b53..58d6b28 100644 --- a/src/themes/scss/dark.scss +++ b/src/themes/scss/dark.scss @@ -4,41 +4,41 @@ @use './vars' as vars; $is-dark: true; -$brand: #a6c6f7; +$brand: hsl(204deg, 90%, 60%); $colors: ( primary: c.variants($brand), - secondary: c.variants(hsl(240, 18%, 14%)), // same as elevation/6 - text: #e6edf3, - subtle: hsl(240, 10%, 70%), // same as elevation/10 + secondary: c.variants(hsl(213, 12%, 25%)), + text: #bbc0ca, + subtle: hsl(224, 9.2%, 60%), palette: ( - 'red': c.variants(#f38ba8), // red - 'orange': c.variants(#fab387), // peach - 'yellow': c.variants(#f9e2af), // yellow - 'olive': c.variants(#e2f095), - 'green': c.variants(#00E676), // green - 'teal': c.variants(#94e2d5), // teal - 'blue': c.variants(#89b4fa), // blue - 'violet': c.variants(#b4befe), // lavender - 'purple': c.variants(#9b6bf5), // mauve - 'pink': c.variants(#f5c2e7), // pink - 'brown': c.variants(#f2cdcd), // flamingo - 'black': c.variants(#181825), // black - 'white': c.variants(#e6edf3), // white + 'red': c.variants(hsl(0, 56.4%, 50%)), + 'orange': c.variants(hsl(23.8, 89%, 38%)), + 'yellow': c.variants(hsl(44.8, 97%, 38%)), + 'olive': c.variants(hsl(67.5, 79.1%, 32%)), + 'green': c.variants(hsl(124deg, 41%, 30%)), + 'teal': c.variants(hsl(177, 100%, 25%)), + 'blue': c.variants(hsl(206, 56%, 45%)), + 'violet': c.variants(hsl(259.2, 66.5%, 60%)), + 'purple': c.variants(hsl(285, 55.9%, 53%)), + 'pink': c.variants(hsl(326, 64.6%, 47%)), + 'brown': c.variants(hsl(23.4, 33%, 43%)), + 'black': c.variants(hsl(213, 21%, 12%)), + 'white': c.variants(#f0f0f0), ), elevation: ( - '1': hsl(240, 33%, 01%), - '2': hsl(240, 33%, 04%), - '3': hsl(240, 33%, 06%), - '4': hsl(240, 30%, 08%), - '5': hsl(240, 28%, 12%), - '6': hsl(240, 25%, 14%), - '7': hsl(240, 20%, 30%), - '8': hsl(240, 20%, 40%), - '9': hsl(240, 10%, 50%), - '10': hsl(240, 10%, 70%), - '11': hsl(240, 10%, 80%), - '12': hsl(240, 10%, 90%), + '1': hsl(213, 10%, 7%), + '2': hsl(213, 12%, 8%), + '3': hsl(213, 12%, 10%), + '4': hsl(213, 12%, 13%), + '5': hsl(213, 12%, 18%), + '6': hsl(213, 12%, 25%), + '7': hsl(213, 12%, 35%), + '8': hsl(213, 12%, 45%), + '9': hsl(213, 12%, 55%), + '10': hsl(213, 12%, 65%), + '11': hsl(213, 12%, 75%), + '12': hsl(213, 12%, 85%), ) ); diff --git a/src/themes/scss/theme/index.scss b/src/themes/scss/theme/index.scss index de82a20..e8a935c 100644 --- a/src/themes/scss/theme/index.scss +++ b/src/themes/scss/theme/index.scss @@ -19,9 +19,11 @@ @include components.markup; // styling rendered for markdown content // code highlighting - @include modules.chroma($is-dark); // syntax highlighting - @include modules.codemirror; // code editor - @include modules.monaco; // vscode-like code editor + // @include modules.chroma($is-dark); // syntax highlighting + // @include modules.codemirror; // code editor + // @include modules.monaco; // vscode-like code editor + + @include modules.syntax; // syntax highlighting @include modules.settings; // settings & profile pages // customized pages diff --git a/src/themes/scss/theme/modules/_syntax.scss b/src/themes/scss/theme/modules/_syntax.scss new file mode 100644 index 0000000..4ceea2b --- /dev/null +++ b/src/themes/scss/theme/modules/_syntax.scss @@ -0,0 +1,469 @@ +@mixin syntax { + /* Code syntax highlighting. */ + .tag-code .code-inner { + opacity: 0.5; + } + + .same-code .lines-num.lines-num-old, + .same-code .lines-num.lines-num-new { + color: var(--color-text-light-3) !important; + } + + .add-code .lines-num.lines-num-old, + .add-code .lines-num.lines-num-new { + background-color: var(--color-diff-added-row-linesnum-bg); + color: var(--color-text-dark-2) !important; + } + + .del-code .lines-num.lines-num-old, + .diff-unified .del-code .lines-num.lines-num-old, + .del-code .lines-num.lines-num-new { + background-color: var(--color-diff-removed-row-linesnum-bg); + color: var(--color-text-dark-2) !important; + } + + .repository + .diff-file-box + .file-body.file-code + table + tbody + tr.add-code:hover + .lines-num, + .repository + .diff-file-box + .file-body.file-code + table + tbody + tr.del-code:hover + .lines-num, + .repository + .diff-file-box + .file-body.file-code + table + tbody + tr.same-code:hover + .lines-num, + .repository + .diff-file-box + .file-body.file-code + table + tbody + .diff-unified + tr:hover + .del-code + .lines-num { + color: var(--color-text-dark) !important; + } + + .repository + .diff-file-box + .file-body.file-code + table + tbody + tr.same-code:hover + .lines-num { + color: var(--color-text-dark-2) !important; + } + + .repository + .diff-file-box + .file-body.file-code + table + tbody + tr.same-code:hover + .lines-code, + .repository + .diff-file-box + .file-body.file-code + table + tbody + tr.same-code:hover + .lines-num, + .repository + .diff-file-box + .file-body.file-code + table + tbody + tr.same-code:hover + .lines-type-marker { + background-color: var(--color-code-line-bg-hover) !important; + } + + /* From web_src/less/themes/chroma/dark.less */ + :root { + --color-syntax-NameBuiltinPseudo: #fabd2f; + --color-syntax-Comment: #777e94; + --color-syntax-CommentSingle: #777e94; + --color-syntax-CommentHashbang: #777e94; + --color-syntax-CommentMultiline: #777e94; + --color-syntax-CommentPreproc: #8ec07c; + --color-syntax-CommentPreprocFile: #649bc4; + --color-syntax-CommentSpecial: #9075cd; + --color-syntax-LiteralStringDelimiter: #649bc4; + + --color-syntax-GenericDeleted-text: #fff; + --color-syntax-GenericDeleted-bg: #5f3737; + --color-syntax-GenericEmph: #ddee30; + --color-syntax-GenericHeading: #ffaa10; + --color-syntax-GenericInserted-text: #fff; + --color-syntax-GenericInserted-bg: #3a523a; + --color-syntax-GenericOutput: #777e94; + --color-syntax-GenericPrompt: #ebdbb2; + --color-syntax-GenericError: #ff4433; + --color-syntax-GenericStrong: #ebdbb2; + --color-syntax-GenericTraceback: #ff7540; + --color-syntax-GenericSubheading: #b8bb26; + --color-syntax-LineHighlight: #3f424d; + --color-syntax-LiteralNumberIntegerLong: #649bc4; + --color-syntax-Keyword: #f47067; + --color-syntax-KeywordConstant: #649bc4; + --color-syntax-KeywordDeclaration: #ff7540; + --color-syntax-KeywordNamespace: #ffaa10; + --color-syntax-KeywordPseudo: #5f8700; + --color-syntax-KeywordReserved: #ff7540; + --color-syntax-KeywordType: #fabd2f; + --color-syntax-LineNumbers: #7f8699; + --color-syntax-LineNumbersTable: #7f8699; + --color-syntax-LiteralNumber: #649bc4; + --color-syntax-LiteralNumberBin: #649bc4; + --color-syntax-LiteralNumberFloat: #649bc4; + --color-syntax-LiteralNumberHex: #649bc4; + --color-syntax-LiteralNumberInteger: #649bc4; + --color-syntax-LiteralNumberOct: #649bc4; + --color-syntax-Name: #adbac7; + --color-syntax-NameAttribute: #b8bb26; + --color-syntax-NameBuiltin: #fabd2f; + --color-syntax-NameClass: #f69d50; + --color-syntax-NameDecorator: #dcbdfb; + --color-syntax-NameException: #ff7540; + --color-syntax-NameFunction: #dcbdfb; + --color-syntax-NameEntity: #fabd2f; + --color-syntax-NameLabel: #ff7540; + --color-syntax-NameNamespace: #ffaa10; + --color-syntax-NameConstant: #649bc4; + --color-syntax-NameTag: #ff7540; + --color-syntax-NameVariable: #ebdbb2; + --color-syntax-NameOther: #b6bac5; + --color-syntax-Operator: #6cb6ff; + --color-syntax-OperatorWord: #6cb6ff; + --color-syntax-Punctuation: #d2d4db; + --color-syntax-LiteralString: #b8bb26; + --color-syntax-LiteralStringSingle: #96d0ff; + --color-syntax-LiteralStringDouble: #96d0ff; + --color-syntax-LiteralStringAffix: #649bc4; + --color-syntax-LiteralStringBacktick: #b8bb26; + --color-syntax-LiteralStringChar: #649bc4; + --color-syntax-LiteralStringDoc: #777e94; + --color-syntax-LiteralStringEscape: #ff7540; + --color-syntax-LiteralStringHeredoc: #649bc4; + --color-syntax-LiteralStringInterpol: #ffaa10; + --color-syntax-LiteralStringRegex: #9075cd; + --color-syntax-LiteralStringSymbol: #ff7540; + --color-syntax-LiteralStringOther: #ffaa10; + --color-syntax-NameVariableClass: #ff7540; + --color-syntax-NameVariableGlobal: #ffaa10; + --color-syntax-NameVariableInstance: #ffaa10; + --color-syntax-TextWhitespace: #7f8699; + } + + .chroma .bp { + color: var(--color-syntax-NameBuiltinPseudo); + } /* NameBuiltinPseudo */ + .chroma .c { + color: var(--color-syntax-Comment); + } /* Comment */ + .chroma .c1 { + color: var(--color-syntax-CommentSingle); + } /* CommentSingle */ + .chroma .ch { + color: var(--color-syntax-CommentHashbang); + } /* CommentHashbang */ + .chroma .cm { + color: var(--color-syntax-CommentMultiline); + } /* CommentMultiline */ + .chroma .cp { + color: var(--color-syntax-CommentPreproc); + } /* CommentPreproc */ + .chroma .cpf { + color: var(--color-syntax-CommentPreprocFile); + } /* CommentPreprocFile */ + .chroma .cs { + color: var(--color-syntax-CommentSpecial); + } /* CommentSpecial */ + .chroma .dl { + color: var(--color-syntax-LiteralStringDelimiter); + } /* LiteralStringDelimiter */ + .chroma .gd { + color: var(--color-syntax-GenericDeleted-text); + background-color: var(--color-syntax-GenericDeleted-bg); + } /* GenericDeleted */ + .chroma .ge { + color: var(--color-syntax-GenericEmph); + } /* GenericEmph */ + .chroma .gh { + color: var(--color-syntax-GenericHeading); + } /* GenericHeading */ + .chroma .gi { + color: var(--color-syntax-GenericInserted-text); + background-color: var(--color-syntax-GenericInserted-bg); + } /* GenericInserted */ + .chroma .go { + color: var(--color-syntax-GenericOutput); + } /* GenericOutput */ + .chroma .gp { + color: var(--color-syntax-GenericPrompt); + } /* GenericPrompt */ + .chroma .gr { + color: var(--color-syntax-GenericError); + } /* GenericError */ + .chroma .gs { + color: var(--color-syntax-GenericStrong); + } /* GenericStrong */ + .chroma .gt { + color: var(--color-syntax-GenericTraceback); + } /* GenericTraceback */ + .chroma .gu { + color: var(--color-syntax-GenericSubheading); + } /* GenericSubheading */ + .chroma .hl { + background-color: var(--color-syntax-LineHighlight); + } /* LineHighlight */ + .chroma .il { + color: var(--color-syntax-LiteralNumberIntegerLong); + } /* LiteralNumberIntegerLong */ + .chroma .k { + color: var(--color-syntax-Keyword); + } /* Keyword */ + .chroma .kc { + color: var(--color-syntax-KeywordConstant); + } /* KeywordConstant */ + .chroma .kd { + color: var(--color-syntax-KeywordDeclaration); + } /* KeywordDeclaration */ + .chroma .kn { + color: var(--color-syntax-KeywordNamespace); + } /* KeywordNamespace */ + .chroma .kp { + color: var(--color-syntax-KeywordPseudo); + } /* KeywordPseudo */ + .chroma .kr { + color: var(--color-syntax-KeywordReserved); + } /* KeywordReserved */ + .chroma .kt { + color: var(--color-syntax-KeywordType); + } /* KeywordType */ + .chroma .ln { + color: var(--color-syntax-LineNumbers); + } /* LineNumbers */ + .chroma .lnt { + color: var(--color-syntax-LineNumbersTable); + } /* LineNumbersTable */ + .chroma .m { + color: var(--color-syntax-LiteralNumber); + } /* LiteralNumber */ + .chroma .mb { + color: var(--color-syntax-LiteralNumberBin); + } /* LiteralNumberBin */ + .chroma .mf { + color: var(--color-syntax-LiteralNumberFloat); + } /* LiteralNumberFloat */ + .chroma .mh { + color: var(--color-syntax-LiteralNumberHex); + } /* LiteralNumberHex */ + .chroma .mi { + color: var(--color-syntax-LiteralNumberInteger); + } /* LiteralNumberInteger */ + .chroma .mo { + color: var(--color-syntax-LiteralNumberOct); + } /* LiteralNumberOct */ + .chroma .n { + color: var(--color-syntax-Name); + } /* Name */ + .chroma .na { + color: var(--color-syntax-NameAttribute); + } /* NameAttribute */ + .chroma .nb { + color: var(--color-syntax-NameBuiltin); + } /* NameBuiltin */ + .chroma .nc { + color: var(--color-syntax-NameClass); + } /* NameClass */ + .chroma .nd { + color: var(--color-syntax-NameDecorator); + } /* NameDecorator */ + .chroma .ne { + color: var(--color-syntax-NameException); + } /* NameException */ + .chroma .nf { + color: var(--color-syntax-NameFunction); + } /* NameFunction */ + .chroma .ni { + color: var(--color-syntax-NameEntity); + } /* NameEntity */ + .chroma .nl { + color: var(--color-syntax-NameLabel); + } /* NameLabel */ + .chroma .nn { + color: var(--color-syntax-NameNamespace); + } /* NameNamespace */ + .chroma .no { + color: var(--color-syntax-NameConstant); + } /* NameConstant */ + .chroma .nt { + color: var(--color-syntax-NameTag); + } /* NameTag */ + .chroma .nv { + color: var(--color-syntax-NameVariable); + } /* NameVariable */ + .chroma .nx { + color: var(--color-syntax-NameOther); + } /* NameOther */ + .chroma .o { + color: var(--color-syntax-Operator); + } /* Operator */ + .chroma .ow { + color: var(--color-syntax-OperatorWord); + } /* OperatorWord */ + .chroma .p { + color: var(--color-syntax-Punctuation); + } /* Punctuation */ + .chroma .s { + color: var(--color-syntax-LiteralString); + } /* LiteralString */ + .chroma .s1 { + color: var(--color-syntax-LiteralStringSingle); + } /* LiteralStringSingle */ + .chroma .s2 { + color: var(--color-syntax-LiteralStringDouble); + } /* LiteralStringDouble */ + .chroma .sa { + color: var(--color-syntax-LiteralStringAffix); + } /* LiteralStringAffix */ + .chroma .sb { + color: var(--color-syntax-LiteralStringBacktick); + } /* LiteralStringBacktick */ + .chroma .sc { + color: var(--color-syntax-LiteralStringChar); + } /* LiteralStringChar */ + .chroma .sd { + color: var(--color-syntax-LiteralStringDoc); + } /* LiteralStringDoc */ + .chroma .se { + color: var(--color-syntax-LiteralStringEscape); + } /* LiteralStringEscape */ + .chroma .sh { + color: var(--color-syntax-LiteralStringHeredoc); + } /* LiteralStringHeredoc */ + .chroma .si { + color: var(--color-syntax-LiteralStringInterpol); + } /* LiteralStringInterpol */ + .chroma .sr { + color: var(--color-syntax-LiteralStringRegex); + } /* LiteralStringRegex */ + .chroma .ss { + color: var(--color-syntax-LiteralStringSymbol); + } /* LiteralStringSymbol */ + .chroma .sx { + color: var(--color-syntax-LiteralStringOther); + } /* LiteralStringOther */ + .chroma .vc { + color: var(--color-syntax-NameVariableClass); + } /* NameVariableClass */ + .chroma .vg { + color: var(--color-syntax-NameVariableGlobal); + } /* NameVariableGlobal */ + .chroma .vi { + color: var(--color-syntax-NameVariableInstance); + } /* NameVariableInstance */ + .chroma .w { + color: var(--color-syntax-TextWhitespace); + } /* TextWhitespace */ + + /* From web_src/less/codemirror/dark.less */ + .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-default .cm-qualifier, + .CodeMirror.cm-s-paper .cm-meta, + .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; + } +} \ No newline at end of file diff --git a/src/themes/scss/theme/modules/index.scss b/src/themes/scss/theme/modules/index.scss index 37593a0..9253054 100644 --- a/src/themes/scss/theme/modules/index.scss +++ b/src/themes/scss/theme/modules/index.scss @@ -3,4 +3,5 @@ @forward './chroma'; @forward './codemirror'; @forward './monaco'; -@forward './settings'; \ No newline at end of file +@forward './settings'; +@forward './syntax'; \ No newline at end of file diff --git a/src/themes/scss/theme/vars/_colors.scss b/src/themes/scss/theme/vars/_colors.scss index d956642..18128b0 100644 --- a/src/themes/scss/theme/vars/_colors.scss +++ b/src/themes/scss/theme/vars/_colors.scss @@ -377,9 +377,14 @@ } } + // ::selection { + // background-color: #{color.get('primary/dark/60%')}; + // color: #{color.get('primary/dark/60%', 'contrast')}; + // } + ::selection { - background-color: #{color.get('primary/dark/60%')}; - color: #{color.get('primary/dark/60%', 'contrast')}; + background-color: #{color.get('primary/dark/30%')}; + color: #{color.get('white/base')}; } // // In dark mode, invert emojis that are hard to read otherwise