Skip to main content
Coding Theme

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.activeBackground#3b4049
  • activityBar.activeFocusBorder#756565
  • activityBar.background#282c34
  • activityBar.foreground#526981
  • activityBar.inactiveForeground#585a5d
  • activityBarBadge.background#6d98c2
  • activityBarBadge.foreground#3a3b3b
  • diffEditor.border#568af2
  • editor.background#282c34
  • editor.findMatchBackground#42557b
  • editor.findMatchHighlightBackground#314365
  • editor.foreground#abb2bf
  • editor.hoverHighlightBackground#314365
  • editor.lineHighlightBackground#2c323c
  • editor.selectionBackground#3d4148
  • editorBracketMatch.border#53725f
  • editorCursor.foreground#f8f8f0
  • editorGroupHeader.tabsBackground#2c323c
  • editorGroupHeader.tabsBorder#323e63
  • editorGutter.addedBackground#6e6e6e
  • editorGutter.deletedBackground#6e6e6e
  • editorGutter.modifiedBackground#424242
  • editorIndentGuide.activeBackground#9d550fb0
  • editorIndentGuide.background#383c44
  • editorInfo.foreground#6e6e6e
  • editorOverviewRuler.addedForeground#00000000
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.bracketMatchForeground#00000000
  • editorOverviewRuler.commonContentForeground#00000000
  • editorOverviewRuler.currentContentForeground#00000000
  • editorOverviewRuler.deletedForeground#00000000
  • editorOverviewRuler.findMatchForeground#00000000
  • editorOverviewRuler.incomingContentForeground#00000000
  • editorOverviewRuler.infoForeground#00000000
  • editorOverviewRuler.modifiedForeground#00000000
  • editorOverviewRuler.rangeHighlightForeground#00000000
  • editorOverviewRuler.selectionHighlightForeground#6e6e6e
  • editorOverviewRuler.warningForeground#00000000
  • editorOverviewRuler.wordHighlightForeground#00000000
  • editorOverviewRuler.wordHighlightStrongForeground#00000000
  • editorSuggestWidget.highlightForeground#61afef
  • editorWhitespace.foreground#383c44
  • editorWidget.background#282c34
  • editorWidget.resizeBorder#568af2
  • gitDecoration.addedResourceForeground#bdbdbd
  • gitDecoration.modifiedResourceForeground#65c991
  • gitDecoration.untrackedResourceForeground#60c1d7
  • input.background#1b1d23
  • input.border#181a1f
  • list.activeSelectionBackground#3a3f4b
  • list.activeSelectionForeground#cbd1db
  • list.errorForeground#ca7732
  • list.focusBackground#3a3f4b
  • list.hoverBackground#00000000
  • list.inactiveSelectionBackground#3a3f4b
  • list.inactiveSelectionForeground#cbd1db
  • pickerGroup.border#568af2
  • scrollbar.shadow#00000000
  • scrollbarSlider.background#4b5362
  • sideBar.background#21252b
  • statusBar.background#282c34
  • statusBar.border#3b3b4d
  • statusBar.debuggingBackground#282c34
  • statusBar.debuggingForeground#63b9e1
  • statusBar.foreground#677083
  • statusBar.noFolderBackground#252526
  • tab.activeBackground#2c323c
  • tab.activeBorder#568af2
  • tab.inactiveBackground#2c323c
  • tab.inactiveForeground#cbd1db
  • tab.unfocusedActiveBorder#568af2
  • titleBar.activeBackground#31363b
  • titleBar.activeForeground#585a5d
  • titleBar.border#31363b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5C6370italic
comment.line.double-dash.sql#F95B88
string.quoted.docstring.multi.python, string.quoted.docstring.multi.python keyword.control.flow.python#5C6370italic
meta.brace.round.begin, meta.brace.round.end, meta.brace.square.begin, meta.brace.square.end, meta.brace.curly.begin.js, meta.brace.curly.end.js, meta.group.braces.round.function.arguments#ABB2BF
string#98C379
string.regexp#98C379
string.detected-link#C678DD
constant.numeric, constant.language, markdown.python.constant.numeric, constant.boolean#D19A66
constant.character#56B6C2
constant.character.escape.backslash.regexp#98C379
constant.character.format.placeholder.other.python#D19A66
constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#56B6C2
variable.other.object#E06C75
meta.property.object.js#D19A66
variable.other.class, meta.class.property variable.other.property#E06C75
variable.other, meta.class.object.property.js, meta.property.class variable.other.property.static#D19A66
variable.other.readwrite#ABB2BF
meta.group.braces variable.other.readwrite#ABB2BF
variable.language, meta.class variable.other.readwrite#E06C75
variable.language.prototype#E06C75
python.support.magic.variable#E06C75
variable.function, entity.name.function, entity.name.function.arrow, meta.class-method.js entity.name.function.js, meta.method.property.js entity.name.function.js#61AFEF
meta.function-call.generic.python#61AFEF
meta.function.decorator.python#56B6C2
variable.function.constructor#E5C07B
keyword.control, keyword.operator.new, keyword.operator.module, variable.language.super#C678DD
meta.preprocessor, entity.name.function.preprocessor#C678DD
entity.name.function.preprocessor#E5C07B
meta.namespace.identifier entity.name.type, entity.name.variable#E5C07B
cs.meta.namespace.function.identifier.body.class.method#61AFEF
storage.type.cs, storage.type.variable.cs#56B6C2
keyword, keyword.other.namespace, storage.modifier#C678DD
keyword.operator.logical.python#C678DD
keyword.other.substitution.begin, keyword.other.substitution.end#56B6C2
keyword.operator.accessor#ABB2BF
keyword.operator, constant.other.color, punctuation.separator.key-value#56B6C2
keyword.regexp, keyword.operator.quantifier.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp#98C379
python.keyword.operator#56B6C2
storage.type#C678DD
entity.name.class, meta.class.extends variable.other.readwrite#E5C07B
entity.other.inherited-class#E5C07Bitalic underline
variable.parameter#ABB2BF
variable.parameter.function.language.python#D19A66
entity.name.tag#E06C75
entity.other.attribute-name.html, entity.other.attribute-name.js, entity.other.attribute-name.jsx#D19A66italic
selector.css.entity.other.attribute-name#E5C07B
support.function, support.class support.function#56B6C2
python.builtin.support.function#C678DD
python.meta.function-call.builtin.support.function, python.meta.type.support.function-call, python.meta.variable.function-call.legacy.builtin#E5C07B
meta.type.support.inheritance.python#56B6C2
entity.name.type.class.python#E5C07B
support.constant#D19A66
support.type, support.class#E5C07B
support.other.variable
css.property-list.property-name#56B6C2
invalid#FFFFFF
invalid.deprecated#523D14
meta.structure.dictionary.json support.type.property-name#E06C75
meta.structure.dictionary.json string.quoted.double.json#98C379
meta.structure.dictionary.json string.quoted.double.detected-link#C678DD
markup.heading#E06C75
string.other.link.title.markdown, string.other.link.description.markdown, meta.paragraph.markdown entity.name.tag.inline.any#61AFEF
markup.underline.link.markdown, markup.underline.link.image.markdown#C678DD
markup.bold.markdownbold
markup.fenced_code.block.markdown, markup.fenced.code.block.markdown, markup.raw.inline.markdown, markdown.block.raw#56B6C2
markup.fenced_code.block.markdown fenced_code.block.language, markup.fenced.code.block.markdown fenced.code.block.language#D19A66
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown, punctuation.definition.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.raw.markdown, meta.paragraph.markdown punctuation.definition.tag#56B6C2
markdown.fenced_code.block.markdown constant.numeric, markdown.fenced.code.block.markdown constant.numeric, markdown.fenced_code.block.markdown constant.language, markdown.fenced.code.block.markdown constant.language#D19A66
markdown.block.fenced.code.string, markdown.block.fenced.code.string.quote#98C379
markup.fenced_code.block.markdown keyword.operator, markup.fenced_code.block.markdown keyword.operator.logical.python, markup.fenced.code.block.markdown keyword.operator, markup.fenced_code.block.markdown keyword.control, markup.fenced.code.block.markdown keyword.control, markup.fenced_code.block.markdown storage.type, markup.fenced_code.block.markdown storage.type.function.lambda, markdown.block.fenced.code.lambda.storage.type#61AFEF
markdown.block.fenced.code.operator.assignment#ABB2BF
markdown.block.variable.parameter#D19A66
meta.diff, meta.diff.header#75715E
markup.deleted#F92672
markup.inserted#A6E22E
markup.changed#E6DB74
constant.numeric.line-number.find-in-files - match#AE81FFA0
entity.name.filename.find-in-files#E6DB74
jinja.statement.begin.sql, jinja.statement.end.sql#61AFEF
jinja.expression.begin.sql, jinja.expression.end.sql#61AFEF
jinja.keyword.control.sql#E06C75
jinja.object.sql#E5C07B
jinja.operator.accessor.sql#61AFEF
jinja.object.function.sql, jinja.object.property.sql, jinja.function.sql#56B6C2
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
text.html.markdown.journal.task.open.bullet#FFFF00
text.html.markdown.journal.task.open.marker#FFFF00
text.html.markdown.journal.task.open.keyworditalic
text.html.markdown.journal.task.open.text
text.html.markdown.journal.task.completed.keyworditalic
text.html.markdown.journal.task.completed.marker#AAAAAA
text.html.markdown.journal.task.completed.text#AAAAAA
text.html.markdown.journal.memo.keyworditalic
text.html.markdown.journal.link.keyworditalic
source, punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python, keyword.operator.comparison.python, keyword.operator.arithmetic.python, variable.parameter.function-call.python, variable.parameter.function.language.special.self.python#cbd1db
source.python
variable.parameter.function-call.python, variable.parameter.function.language.special.self.python#D19A66
meta.function-call
meta.function-call.arguments.python
support.type.python, support.variable.magic.python#56b6c2
markup.italic#cd83e1italic
markup.bold#d6a270bold
entity.other.attribute-name.html#D19A66

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Arkademy - Odoo Technical Training - Coding Theme