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#DDD6C1
  • activityBar.dropBackground#f1e9d2
  • activityBar.foreground#584c27
  • activityBarBadge.background#ac8300
  • badge.background#ac8300AA
  • button.background#AC9D57
  • debugExceptionWidget.background#DDD6C1
  • debugExceptionWidget.border#AB395B
  • debugToolBar.background#DDD6C1
  • dropdown.background#f1e9d2
  • dropdown.border#D3AF86
  • editor.background#f8f5ec
  • editor.findMatchBackground#8195004D
  • editor.findMatchHighlightBackground#81950033
  • editor.findRangeHighlightBackground#7d80d133
  • editor.foreground#657377
  • editor.hoverHighlightBackground#259d941A
  • editor.inactiveSelectionBackground#8faaab26
  • editor.lineHighlightBackground#3F3D3812
  • editor.rangeHighlightBackground#7d80d11A
  • editor.selectionBackground#8faaab40
  • editor.selectionHighlightBackground#259d941A
  • editor.wordHighlightBackground#dd459d1A
  • editor.wordHighlightStrongBackground#dd459d33
  • editorCursor.foreground#657377
  • editorGroup.border#DDD6C1
  • editorGroup.dropBackground#DDD6C1AA
  • editorGroup.emptyBackground#FFFBF2
  • editorGroupHeader.tabsBackground#D9D2C2
  • editorHoverWidget.background#CCC4B0
  • editorIndentGuide.background#3F3D3812
  • editorLink.activeForeground#2b90d8
  • editorWhitespace.foreground#f1e9d2
  • editorWidget.background#f1e9d2
  • extensionButton.prominentBackground#ac8300
  • extensionButton.prominentHoverBackground#584c27aa
  • focusBorder#D3AF86
  • input.background#DDD6C1
  • input.foreground#5b7279
  • input.placeholderForeground#5b7279AA
  • inputOption.activeBorder#D3AF86
  • list.activeSelectionBackground#DFCA88
  • list.activeSelectionForeground#6C6C6C
  • list.focusBackground#DFCA8866
  • list.highlightForeground#ac8300
  • list.hoverBackground#DFCA8844
  • list.inactiveSelectionBackground#D1CBB8
  • panel.border#DDD6C1
  • peekView.border#ac8300
  • peekViewEditor.background#FFFBF2
  • peekViewEditor.matchHighlightBackground#7744AA40
  • peekViewResult.background#f1e9d2
  • peekViewTitle.background#f1e9d2
  • pickerGroup.border#259d9499
  • pickerGroup.foreground#259d9499
  • progressBar.background#ac8300
  • selection.background#CCC4B0
  • sideBar.background#f1e9d2
  • sideBarTitle.foreground#5b7279
  • statusBar.background#f1e9d2
  • statusBar.debuggingBackground#f1e9d2
  • statusBar.foreground#5b7279
  • statusBar.noFolderBackground#f1e9d2
  • statusBarItem.prominentBackground#DDD6C1
  • statusBarItem.prominentHoverBackground#DDD6C199
  • tab.activeBackground#f8f5ec
  • tab.border#DDD6C1
  • tab.inactiveBackground#D3CBB7
  • tab.inactiveForeground#5b7279
  • terminal.ansiBlack#093946
  • terminal.ansiBlue#2b90d8
  • terminal.ansiBrightBlack#5b7279
  • terminal.ansiBrightBlue#98a8a8
  • terminal.ansiBrightCyan#8faaab
  • terminal.ansiBrightGreen#5b7279
  • terminal.ansiBrightMagenta#7d80d1
  • terminal.ansiBrightRed#d56500
  • terminal.ansiBrightWhite#f1e9d2
  • terminal.ansiBrightYellow#657377
  • terminal.ansiCyan#259d94
  • terminal.ansiGreen#819500
  • terminal.ansiMagenta#dd459d
  • terminal.ansiRed#f23749
  • terminal.ansiWhite#f1e9d2
  • terminal.ansiYellow#ac8300
  • titleBar.activeBackground#f1e9d2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, meta.documentation#8faaab
string#259d94
string.regexp#259d94
constant.character.escape#f23749
constant.numeric#7d80d1
variable#2b90d8
variable.other.readwrite, variable.other.object, variable.other.constant#657377
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#8faaab
support.function#819500
punctuation.separator.continuation#f23749
storage.type#2b90d8
support.type.exception#d56500
keyword.other.special-method#d56500
invalid#ec9489
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.quoted.other.lt-gt.include.c, meta.preprocessor.c.include punctuation.definition.string.begin.c, meta.preprocessor.c.include punctuation.definition.string.end.c#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#5b7279
support.function.perl#2b90d8
meta.diff, meta.diff.header#8faaab
meta.diff.range#2b90d8
markup.deleted#f23749
markup.changed#259d94
markup.inserted#819500
markup.heading, punctuation.definition.heading.markdown#ac8300
markup.quote#819500
markup.italicitalic
markup.boldbold
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#f1e9d2
sublimelinter.notes#f1e9d2
sublimelinter.outline.illegal#8faaab
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#8faaab
entity.name.filename.find-in-files#259d94
constant.numeric.line-number.find-in-files#8faaab
markup.deleted.git_gutter#f23749
markup.inserted.git_gutter#819500
markup.changed.git_gutter#ac8300
meta.class punctuation#657377

Shiki preview

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

Loading...