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.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#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—