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.background#003847
  • badge.background#047aa6
  • button.background#259d9499
  • debugExceptionWidget.background#00212B
  • debugExceptionWidget.border#AB395B
  • debugToolBar.background#00212B
  • dropdown.background#00212B
  • dropdown.border#259d9499
  • editor.background#002d38
  • editor.findMatchBackground#81950059
  • editor.findMatchHighlightBackground#81950033
  • editor.findRangeHighlightBackground#7d80d133
  • editor.foreground#98a8a8
  • editor.hoverHighlightBackground#259d9426
  • editor.inactiveSelectionBackground#5b727940
  • editor.lineHighlightBackground#1CD1FF12
  • editor.rangeHighlightBackground#7d80d11A
  • editor.selectionBackground#5b727959
  • editor.selectionHighlightBackground#259d9426
  • editor.wordHighlightBackground#7d80d133
  • editor.wordHighlightStrongBackground#7d80d166
  • editorCursor.foreground#D30102
  • editorGroup.border#00212B
  • editorGroup.dropBackground#259d9444
  • editorGroup.emptyBackground#011b23
  • editorGroupHeader.tabsBackground#004052
  • editorHoverWidget.background#004052
  • editorIndentGuide.background#1CD1FF12
  • editorLink.activeForeground#2b90d8
  • editorMarkerNavigationError.background#AB395B
  • editorMarkerNavigationWarning.background#5B7E7A
  • editorWhitespace.foreground#5b7279
  • editorWidget.background#00212B
  • errorForeground#ffeaea
  • focusBorder#259d9499
  • input.background#003847
  • input.foreground#8faaab
  • input.placeholderForeground#8faaabAA
  • inputOption.activeBorder#259d9499
  • inputValidation.errorBackground#571b26
  • inputValidation.errorBorder#a92049
  • inputValidation.infoBackground#052730
  • inputValidation.infoBorder#363b5f
  • inputValidation.warningBackground#5d5938
  • inputValidation.warningBorder#9d8a5e
  • list.activeSelectionBackground#005A6F
  • list.dropBackground#00445488
  • list.focusBackground#005A6F
  • list.highlightForeground#1ebcc5
  • list.hoverBackground#004454AA
  • list.inactiveSelectionBackground#00445488
  • panel.border#2b2b4a
  • peekView.border#2b2b4a
  • peekViewEditor.background#10192c
  • peekViewEditor.matchHighlightBackground#7744AA40
  • peekViewResult.background#00212B
  • peekViewTitle.background#00212B
  • pickerGroup.border#259d9499
  • pickerGroup.foreground#259d9499
  • progressBar.background#047aa6
  • selection.background#259d9499
  • sideBar.background#00212B
  • sideBarTitle.foreground#8faaab
  • statusBar.background#00212B
  • statusBar.debuggingBackground#00212B
  • statusBar.foreground#8faaab
  • statusBar.noFolderBackground#00212B
  • statusBarItem.prominentBackground#003847
  • statusBarItem.prominentHoverBackground#003847
  • tab.activeBackground#002B37
  • tab.activeForeground#d6dbdb
  • tab.border#003847
  • tab.inactiveBackground#004052
  • tab.inactiveForeground#8faaab
  • terminal.ansiBlack#093946
  • terminal.ansiBlue#2b90d8
  • terminal.ansiBrightBlack#002d38
  • terminal.ansiBrightBlue#98a8a8
  • terminal.ansiBrightCyan#8faaab
  • terminal.ansiBrightGreen#5b7279
  • terminal.ansiBrightMagenta#7d80d1
  • terminal.ansiBrightRed#d56500
  • terminal.ansiBrightWhite#f8f5ec
  • terminal.ansiBrightYellow#657377
  • terminal.ansiCyan#259d94
  • terminal.ansiGreen#819500
  • terminal.ansiMagenta#dd459d
  • terminal.ansiRed#f23749
  • terminal.ansiWhite#f1e9d2
  • terminal.ansiYellow#ac8300
  • terminal.background#002d38
  • terminal.foreground#98a8a8
  • titleBar.activeBackground#002C39

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, meta.documentation#5b7279—
string#259d94—
string.regexp#259d94—
constant.character.escape#f23749—
constant.numeric#7d80d1—
variable#2b90d8—
variable.other.readwrite, variable.other.object, variable.other.constant#98a8a8—
variable.function#ac8300—
variable.language.this, variable.language.super#dd459d—
keyword#819500—
meta.import keyword, keyword.control.import, keyword.control.import.from, keyword.other.import, keyword.control.at-rule.include, keyword.control.at-rule.import#d56500—
keyword.operator.comparison, keyword.operator.assignment, keyword.operator.arithmetic#657377—
storage#819500—
keyword.control.class, meta.class, entity.name.class, entity.name.type.class#ac8300—
support.type, support.class#819500—
entity.name.function#ac8300—
punctuation.definition.variable#819500—
constant.language, meta.preprocessor#ac8300—
support.function.construct, keyword.other.new#f23749—
constant.character, constant.other#d56500—
entity.name.tag#2b90d8—
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#5b7279—
support.function#819500—
punctuation.separator.continuation#f23749—
storage.type#2b90d8—
support.type.exception#d56500—
keyword.other.special-method#d56500—
invalid#6e2e32—
string.quoted.double, string.quoted.single#259d94—
punctuation.definition.string.begin, punctuation.definition.string.end#98a8a8—
meta.brace.square#2b90d8—
meta.brace.round, punctuation.definition.parameters.begin, punctuation.definition.parameters.end#657377—
meta.brace.curly#657377—
support.constant.color, invalid.deprecated.color.w3c-non-standard-color-name.scss#ac8300—
meta.selector.css#657377—
entity.name.tag.css, entity.name.tag.scss, source.less keyword.control.html.elements, source.sass keyword.control.untitled#ac8300—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.sass#ac8300—
source.css entity.other.attribute-name.id, source.less entity.other.attribute-name.id, source.scss entity.other.attribute-name.id, source.sass entity.other.attribute-name.id#ac8300—
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.tag.pseudo-class#2b90d8—
text.html.basic meta.tag.other.html, text.html.basic meta.tag.any.html, text.html.basic meta.tag.block.any, text.html.basic meta.tag.inline.any, text.html.basic meta.tag.structure.any.html, text.html.basic source.js.embedded.html, punctuation.separator.key-value.html#657377—
text.html.basic entity.other.attribute-name.html, meta.tag.xml entity.other.attribute-name#ac8300—
keyword.other.special-method.ruby#819500—
variable.other.constant.ruby#ac8300—
constant.other.symbol.ruby#259d94—
keyword.other.special-method.ruby#d56500—
meta.array support.function.construct.php#ac8300—
entity.name.function.preprocessor.c, meta.preprocessor.c.include, meta.preprocessor.macro.c#d56500—
meta.preprocessor.c.include string, meta.preprocessor.c.include punctuation.definition.string.begin, meta.preprocessor.c.include punctuation.definition.string.end#259d94—
other.package.exclude, other.remove#f23749—
other.add#259d94—
punctuation.section.group.tex, punctuation.definition.arguments.begin.latex, punctuation.definition.arguments.end.latex, punctuation.definition.arguments.latex#f23749—
meta.group.braces.tex#ac8300—
string.other.math.tex#ac8300—
variable.parameter.function.latex#d56500—
punctuation.definition.constant.math.tex#f23749—
text.tex.latex constant.other.math.tex, constant.other.general.math.tex, constant.other.general.math.tex, constant.character.math.tex#259d94—
string.other.math.tex#ac8300—
punctuation.definition.string.begin.tex, punctuation.definition.string.end.tex#f23749—
keyword.control.label.latex, text.tex.latex constant.other.general.math.tex#259d94—
variable.parameter.definition.label.latex#f23749—
support.function.be.latex#819500—
support.function.section.latex#d56500—
support.function.general.tex#259d94—
keyword.control.ref.latex#259d94—
storage.type.class.python, storage.type.function.python, storage.modifier.global.python#819500—
support.type.exception.python#ac8300—
meta.scope.for-in-loop.shell, variable.other.loop.shell#5b7279—
meta.scope.case-block.shell, meta.scope.case-body.shell#5b7279—
punctuation.definition.logical-expression.shell#f23749—
storage.modifier.import.java#8faaab—
support.function.perl#2b90d8—
meta.diff, meta.diff.header#5b7279—
meta.diff.range#2b90d8—
markup.deleted#f23749—
markup.changed#259d94—
markup.inserted#819500—
markup.heading, punctuation.definition.heading.markdown#ac8300—
markup.quote#819500—
markup.italic—italic
markup.bold—bold
markup.underline.link.markdown, meta.link.reference constant.other.reference.link.markdown#259d94—
constant.other.reference.link.markdown#7d80d1—
meta.paragraph.markdown meta.dummy.line-break#5b7279—
sublimelinter.notes#5b7279—
sublimelinter.outline.illegal#5b7279—
sublimelinter.underline.illegal#f23749—
sublimelinter.outline.warning#98a8a8—
sublimelinter.underline.warning#ac8300—
sublimelinter.outline.violation#657377—
sublimelinter.underline.violation#d56500—
sublimelinter.mark.warning#ac8300—
sublimelinter.mark.error#f23749—
sublimelinter.gutter-mark#657377—
brackethighlighter.all#5b7279—
entity.name.filename.find-in-files#259d94—
constant.numeric.line-number.find-in-files#5b7279—
markup.deleted.git_gutter#f23749—
markup.inserted.git_gutter#819500—
markup.changed.git_gutter#ac8300—
meta.class punctuation#98a8a8—