diff --git a/web_src/less/chroma/base.less b/web_src/less/chroma/base.less
index 597ee2a72d05e..a6730e7da99bf 100644
--- a/web_src/less/chroma/base.less
+++ b/web_src/less/chroma/base.less
@@ -1,3 +1,13 @@
+/*
+maintain the themes:
+1. Get chroma binary with the same version
+2. Output CSS styles (https://github.com/alecthomas/chroma/tree/master/styles)
+  * ./chroma --html-styles --style=github
+  * ./chroma --html-styles --style=github-dark
+3. Remove unnecessary styles like ".bg"
+4. Add the style name to the code
+*/
+
 .chroma {
   background-color: var(--color-code-bg);
 }
diff --git a/web_src/less/chroma/dark.less b/web_src/less/chroma/dark.less
index 4be9cf7912e0b..0583b21a351c5 100644
--- a/web_src/less/chroma/dark.less
+++ b/web_src/less/chroma/dark.less
@@ -1,70 +1,75 @@
-.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 .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 .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 .hl { background-color: #3f424d; } /* LineHighlight */
-.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: #fabd2f; } /* KeywordType */
-.chroma .ln { color: #7f8699; } /* LineNumbers */
-.chroma .lnt { color: #7f8699; } /* LineNumbersTable */
-.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: #fabd2f; } /* Name */
-.chroma .na { color: #b8bb26; } /* 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: #ffaa10; } /* 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 .s { color: #b8bb26; } /* LiteralString */
-.chroma .s1 { color: #b8bb26; } /* LiteralStringSingle */
-.chroma .s2 { color: #b8bb26; } /* LiteralStringDouble */
-.chroma .sa { color: #649bc4; } /* LiteralStringAffix */
-.chroma .sb { color: #b8bb26; } /* LiteralStringBacktick */
-.chroma .sc { color: #649bc4; } /* LiteralStringChar */
-.chroma .sd { color: #777e94; } /* LiteralStringDoc */
-.chroma .se { color: #ff7540; } /* LiteralStringEscape */
-.chroma .sh { color: #649bc4; } /* LiteralStringHeredoc */
-.chroma .si { color: #ffaa10; } /* LiteralStringInterpol */
-.chroma .sr { color: #9075cd; } /* LiteralStringRegex */
-.chroma .ss { color: #ff7540; } /* LiteralStringSymbol */
-.chroma .sx { color: #ffaa10; } /* LiteralStringOther */
-.chroma .vc { color: #ff7540; } /* NameVariableClass */
-.chroma .vg { color: #ffaa10; } /* NameVariableGlobal */
-.chroma .vi { color: #ffaa10; } /* NameVariableInstance */
-.chroma .w { color: #7f8699; } /* TextWhitespace */
+// style=github-dark
+
+/* stylelint-disable */
+
+/* PreWrapper */ .chroma { color: #c9d1d9; }
+/* Error */ .chroma .err { color: #f85149 }
+/* 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 { color: #6e7681 }
+/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #64686c }
+/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #6e7681 }
+/* Line */ .chroma .line { display: flex; }
+/* Keyword */ .chroma .k { color: #ff7b72 }
+/* KeywordConstant */ .chroma .kc { color: #79c0ff }
+/* KeywordDeclaration */ .chroma .kd { color: #ff7b72 }
+/* KeywordNamespace */ .chroma .kn { color: #ff7b72 }
+/* KeywordPseudo */ .chroma .kp { color: #79c0ff }
+/* KeywordReserved */ .chroma .kr { color: #ff7b72 }
+/* KeywordType */ .chroma .kt { color: #ff7b72 }
+/* NameClass */ .chroma .nc { color: #f0883e; font-weight: bold }
+/* NameConstant */ .chroma .no { color: #79c0ff; font-weight: bold }
+/* NameDecorator */ .chroma .nd { color: #d2a8ff; font-weight: bold }
+/* NameEntity */ .chroma .ni { color: #ffa657 }
+/* NameException */ .chroma .ne { color: #f0883e; font-weight: bold }
+/* NameFunction */ .chroma .nf { color: #d2a8ff; font-weight: bold }
+/* NameLabel */ .chroma .nl { color: #79c0ff; font-weight: bold }
+/* NameNamespace */ .chroma .nn { color: #ff7b72 }
+/* NameProperty */ .chroma .py { color: #79c0ff }
+/* NameTag */ .chroma .nt { color: #7ee787 }
+/* NameVariable */ .chroma .nv { color: #79c0ff }
+/* Literal */ .chroma .l { color: #a5d6ff }
+/* LiteralDate */ .chroma .ld { color: #79c0ff }
+/* LiteralString */ .chroma .s { color: #a5d6ff }
+/* LiteralStringAffix */ .chroma .sa { color: #79c0ff }
+/* LiteralStringBacktick */ .chroma .sb { color: #a5d6ff }
+/* LiteralStringChar */ .chroma .sc { color: #a5d6ff }
+/* LiteralStringDelimiter */ .chroma .dl { color: #79c0ff }
+/* LiteralStringDoc */ .chroma .sd { color: #a5d6ff }
+/* LiteralStringDouble */ .chroma .s2 { color: #a5d6ff }
+/* LiteralStringEscape */ .chroma .se { color: #79c0ff }
+/* LiteralStringHeredoc */ .chroma .sh { color: #79c0ff }
+/* LiteralStringInterpol */ .chroma .si { color: #a5d6ff }
+/* LiteralStringOther */ .chroma .sx { color: #a5d6ff }
+/* LiteralStringRegex */ .chroma .sr { color: #79c0ff }
+/* LiteralStringSingle */ .chroma .s1 { color: #a5d6ff }
+/* LiteralStringSymbol */ .chroma .ss { color: #a5d6ff }
+/* LiteralNumber */ .chroma .m { color: #a5d6ff }
+/* LiteralNumberBin */ .chroma .mb { color: #a5d6ff }
+/* LiteralNumberFloat */ .chroma .mf { color: #a5d6ff }
+/* LiteralNumberHex */ .chroma .mh { color: #a5d6ff }
+/* LiteralNumberInteger */ .chroma .mi { color: #a5d6ff }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #a5d6ff }
+/* LiteralNumberOct */ .chroma .mo { color: #a5d6ff }
+/* Operator */ .chroma .o { color: #ff7b72; font-weight: bold }
+/* OperatorWord */ .chroma .ow { color: #ff7b72; font-weight: bold }
+/* Comment */ .chroma .c { color: #8b949e; font-style: italic }
+/* CommentHashbang */ .chroma .ch { color: #8b949e; font-style: italic }
+/* CommentMultiline */ .chroma .cm { color: #8b949e; font-style: italic }
+/* CommentSingle */ .chroma .c1 { color: #8b949e; font-style: italic }
+/* CommentSpecial */ .chroma .cs { color: #8b949e; font-weight: bold; font-style: italic }
+/* CommentPreproc */ .chroma .cp { color: #8b949e; font-weight: bold; font-style: italic }
+/* CommentPreprocFile */ .chroma .cpf { color: #8b949e; font-weight: bold; font-style: italic }
+/* GenericDeleted */ .chroma .gd { color: #ffa198; background-color: #490202 }
+/* GenericEmph */ .chroma .ge { font-style: italic }
+/* GenericError */ .chroma .gr { color: #ffa198 }
+/* GenericHeading */ .chroma .gh { color: #79c0ff; font-weight: bold }
+/* GenericInserted */ .chroma .gi { color: #56d364; background-color: #0f5323 }
+/* GenericOutput */ .chroma .go { color: #8b949e }
+/* GenericPrompt */ .chroma .gp { color: #8b949e }
+/* GenericStrong */ .chroma .gs { font-weight: bold }
+/* GenericSubheading */ .chroma .gu { color: #79c0ff }
+/* GenericTraceback */ .chroma .gt { color: #ff7b72 }
+/* GenericUnderline */ .chroma .gl { text-decoration: underline }
+/* TextWhitespace */ .chroma .w { color: #6e7681 }
diff --git a/web_src/less/chroma/light.less b/web_src/less/chroma/light.less
index 2e811844c2ddd..019fbd9bf480e 100644
--- a/web_src/less/chroma/light.less
+++ b/web_src/less/chroma/light.less
@@ -1,67 +1,78 @@
-.chroma .bp { color: #999999; } /* NameBuiltinPseudo */
-.chroma .c { color: #6a737d; } /* Comment */
-.chroma .c1 { color: #6a737d; } /* CommentSingle */
-.chroma .ch { color: #6a737d; } /* CommentHashbang */
-.chroma .cm { color: #999988; } /* CommentMultiline */
-.chroma .cp { color: #109295; } /* CommentPreproc */
-.chroma .cpf { color: #4c4dbc; } /* CommentPreprocFile */
-.chroma .cs { color: #999999; } /* CommentSpecial */
-.chroma .dl { color: #106303; } /* LiteralStringDelimiter */
-.chroma .gd { color: #000000; background-color: #ffdddd; } /* GenericDeleted */
-.chroma .ge { color: #000000; } /* GenericEmph */
-.chroma .gh { color: #999999; } /* GenericHeading */
-.chroma .gi { color: #000000; background-color: #ddffdd; } /* GenericInserted */
-.chroma .go { color: #888888; } /* GenericOutput */
-.chroma .gp { color: #555555; } /* GenericPrompt */
-.chroma .gr { color: #aa0000; } /* GenericError */
-.chroma .gt { color: #aa0000; } /* GenericTraceback */
-.chroma .gu { color: #aaaaaa; } /* GenericSubheading */
-.chroma .hl { background-color: #e5e5e5; } /* LineHighlight */
-.chroma .il { color: #009999; } /* LiteralNumberIntegerLong */
-.chroma .k { color: #d73a49; } /* Keyword */
-.chroma .kc { color: #d73a49; } /* KeywordConstant */
-.chroma .kd { color: #d73a49; } /* KeywordDeclaration */
-.chroma .kn { color: #d73a49; } /* KeywordNamespace */
-.chroma .kp { color: #d73a49; } /* KeywordPseudo */
-.chroma .kr { color: #d73a49; } /* KeywordReserved */
-.chroma .kt { color: #445588; } /* KeywordType */
-.chroma .ln { color: #7f7f7f; } /* LineNumbers */
-.chroma .lnt { color: #7f7f7f; } /* LineNumbersTable */
-.chroma .m { color: #009999; } /* LiteralNumber */
-.chroma .mb { color: #009999; } /* LiteralNumberBin */
-.chroma .mf { color: #009999; } /* LiteralNumberFloat */
-.chroma .mh { color: #009999; } /* LiteralNumberHex */
-.chroma .mi { color: #009999; } /* LiteralNumberInteger */
-.chroma .mo { color: #009999; } /* LiteralNumberOct */
-.chroma .na { color: #d73a49; } /* NameAttribute */
-.chroma .nb { color: #005cc5; } /* NameBuiltin */
-.chroma .nc { color: #445588; } /* NameClass */
-.chroma .nd { color: #3c5d5d; } /* NameDecorator */
-.chroma .ne { color: #990000; } /* NameException */
-.chroma .nf { color: #005cc5; } /* NameFunction */
-.chroma .ni { color: #6f42c1; } /* NameEntity */
-.chroma .nl { color: #990000; } /* NameLabel */
-.chroma .nn { color: #555555; } /* NameNamespace */
-.chroma .no { color: #008080; } /* NameConstant */
-.chroma .nt { color: #22863a; } /* NameTag */
-.chroma .nv { color: #008080; } /* NameVariable */
-.chroma .nx { color: #24292e; } /* NameOther */
-.chroma .o { color: #d73a49; } /* Operator */
-.chroma .ow { color: #d73a49; } /* OperatorWord */
-.chroma .s { color: #106303; } /* LiteralString */
-.chroma .s1 { color: #cc7a00; } /* LiteralStringSingle */
-.chroma .s2 { color: #106303; } /* LiteralStringDouble */
-.chroma .sa { color: #106303; } /* LiteralStringAffix */
-.chroma .sb { color: #106303; } /* LiteralStringBacktick */
-.chroma .sc { color: #106303; } /* LiteralStringChar */
-.chroma .sd { color: #106303; } /* LiteralStringDoc */
-.chroma .se { color: #106303; } /* LiteralStringEscape */
-.chroma .sh { color: #106303; } /* LiteralStringHeredoc */
-.chroma .si { color: #106303; } /* LiteralStringInterpol */
-.chroma .sr { color: #22863a; } /* LiteralStringRegex */
-.chroma .ss { color: #106303; } /* LiteralStringSymbol */
-.chroma .sx { color: #106303; } /* LiteralStringOther */
-.chroma .vc { color: #008080; } /* NameVariableClass */
-.chroma .vg { color: #008080; } /* NameVariableGlobal */
-.chroma .vi { color: #008080; } /* NameVariableInstance */
-.chroma .w { color: #bbbbbb; } /* TextWhitespace */
+// style=github
+
+/* stylelint-disable */
+
+/* PreWrapper */ .chroma { }
+/* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 }
+/* 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: #e5e5e5 }
+/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; 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: #000000; font-weight: bold }
+/* KeywordConstant */ .chroma .kc { color: #000000; font-weight: bold }
+/* KeywordDeclaration */ .chroma .kd { color: #000000; font-weight: bold }
+/* KeywordNamespace */ .chroma .kn { color: #000000; font-weight: bold }
+/* KeywordPseudo */ .chroma .kp { color: #000000; font-weight: bold }
+/* KeywordReserved */ .chroma .kr { color: #000000; font-weight: bold }
+/* KeywordType */ .chroma .kt { color: #445588; font-weight: bold }
+/* NameAttribute */ .chroma .na { color: #008080 }
+/* NameBuiltin */ .chroma .nb { color: #0086b3 }
+/* NameBuiltinPseudo */ .chroma .bp { color: #999999 }
+/* NameClass */ .chroma .nc { color: #445588; font-weight: bold }
+/* NameConstant */ .chroma .no { color: #008080 }
+/* NameDecorator */ .chroma .nd { color: #3c5d5d; font-weight: bold }
+/* NameEntity */ .chroma .ni { color: #800080 }
+/* NameException */ .chroma .ne { color: #990000; font-weight: bold }
+/* NameFunction */ .chroma .nf { color: #990000; font-weight: bold }
+/* NameLabel */ .chroma .nl { color: #990000; font-weight: bold }
+/* NameNamespace */ .chroma .nn { color: #555555 }
+/* NameTag */ .chroma .nt { color: #000080 }
+/* NameVariable */ .chroma .nv { color: #008080 }
+/* NameVariableClass */ .chroma .vc { color: #008080 }
+/* NameVariableGlobal */ .chroma .vg { color: #008080 }
+/* NameVariableInstance */ .chroma .vi { color: #008080 }
+/* LiteralString */ .chroma .s { color: #dd1144 }
+/* LiteralStringAffix */ .chroma .sa { color: #dd1144 }
+/* LiteralStringBacktick */ .chroma .sb { color: #dd1144 }
+/* LiteralStringChar */ .chroma .sc { color: #dd1144 }
+/* LiteralStringDelimiter */ .chroma .dl { color: #dd1144 }
+/* LiteralStringDoc */ .chroma .sd { color: #dd1144 }
+/* LiteralStringDouble */ .chroma .s2 { color: #dd1144 }
+/* LiteralStringEscape */ .chroma .se { color: #dd1144 }
+/* LiteralStringHeredoc */ .chroma .sh { color: #dd1144 }
+/* LiteralStringInterpol */ .chroma .si { color: #dd1144 }
+/* LiteralStringOther */ .chroma .sx { color: #dd1144 }
+/* LiteralStringRegex */ .chroma .sr { color: #009926 }
+/* LiteralStringSingle */ .chroma .s1 { color: #dd1144 }
+/* LiteralStringSymbol */ .chroma .ss { color: #990073 }
+/* LiteralNumber */ .chroma .m { color: #009999 }
+/* LiteralNumberBin */ .chroma .mb { color: #009999 }
+/* LiteralNumberFloat */ .chroma .mf { color: #009999 }
+/* LiteralNumberHex */ .chroma .mh { color: #009999 }
+/* LiteralNumberInteger */ .chroma .mi { color: #009999 }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #009999 }
+/* LiteralNumberOct */ .chroma .mo { color: #009999 }
+/* Operator */ .chroma .o { color: #000000; font-weight: bold }
+/* OperatorWord */ .chroma .ow { color: #000000; font-weight: bold }
+/* Comment */ .chroma .c { color: #999988; font-style: italic }
+/* CommentHashbang */ .chroma .ch { color: #999988; font-style: italic }
+/* CommentMultiline */ .chroma .cm { color: #999988; font-style: italic }
+/* CommentSingle */ .chroma .c1 { color: #999988; font-style: italic }
+/* CommentSpecial */ .chroma .cs { color: #999999; font-weight: bold; font-style: italic }
+/* CommentPreproc */ .chroma .cp { color: #999999; font-weight: bold; font-style: italic }
+/* CommentPreprocFile */ .chroma .cpf { color: #999999; font-weight: bold; font-style: italic }
+/* GenericDeleted */ .chroma .gd { color: #000000; background-color: #ffdddd }
+/* GenericEmph */ .chroma .ge { color: #000000; font-style: italic }
+/* GenericError */ .chroma .gr { color: #aa0000 }
+/* GenericHeading */ .chroma .gh { color: #999999 }
+/* GenericInserted */ .chroma .gi { color: #000000; background-color: #ddffdd }
+/* GenericOutput */ .chroma .go { color: #888888 }
+/* GenericPrompt */ .chroma .gp { color: #555555 }
+/* GenericStrong */ .chroma .gs { font-weight: bold }
+/* GenericSubheading */ .chroma .gu { color: #aaaaaa }
+/* GenericTraceback */ .chroma .gt { color: #aa0000 }
+/* GenericUnderline */ .chroma .gl { text-decoration: underline }
+/* TextWhitespace */ .chroma .w { color: #bbbbbb }