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.foreground#584c27
  • activityBar.inactiveForeground#584c2750
  • activityBarBadge.background#584c27
  • activityBarBadge.foreground#eee8d5
  • badge.background#584c27
  • badge.foreground#eee8d5
  • button.background#b58900
  • button.foreground#eee8d5
  • debugExceptionWidget.background#ddd6c1
  • debugExceptionWidget.border#ab395b
  • debugToolBar.background#ddd6c1
  • descriptionForeground#584c27
  • disabledForeground#657b83
  • dropdown.background#fdf6e3
  • dropdown.border#ddd6c1
  • dropdown.foreground#586e75
  • editor.background#fdf6e3
  • editor.findMatchBackground#85990033
  • editor.findMatchHighlightBackground#8599001A
  • editor.findRangeHighlightBackground#6c71c433
  • editor.foldBackground#3f3d380A
  • editor.foreground#657b83
  • editor.hoverHighlightBackground#2aa1981A
  • editor.inactiveSelectionBackground#93a1a126
  • editor.lineHighlightBackground#3f3d380A
  • editor.rangeHighlightBackground#6c71c41A
  • editor.selectionBackground#93a1a140
  • editor.selectionHighlightBackground#2aa1981A
  • editor.wordHighlightBackground#268bd21A
  • editor.wordHighlightStrongBackground#268bd233
  • editorActionList.background#ddd6c1
  • editorActionList.focusBackground#ddd6c1
  • editorActionList.focusForeground#b58900
  • editorActionList.foreground#584c27
  • editorCursor.foreground#657b83
  • editorGroup.border#ddd6c1
  • editorGroup.dropBackground#ddd6c1AA
  • editorGroup.emptyBackground#fffbf2
  • editorGroupHeader.tabsBackground#ddd6c1
  • editorHoverWidget.background#eee8d5
  • editorHoverWidget.border#ddd6c1
  • editorIndentGuide.activeBackground1#ddd6c1
  • editorIndentGuide.background1#3f3d3812
  • editorLineNumber.activeForeground#657b83
  • editorLineNumber.dimmedForeground#ddd6c1
  • editorLineNumber.foreground#93a1a1
  • editorLink.activeForeground#268bd2
  • editorRuler.foreground#3f3d3812
  • editorStickyScrollHover.background#eee8d5
  • editorSuggestWidget.background#eee8d5
  • editorSuggestWidget.border#ddd6c1
  • editorWhitespace.foreground#ddd6c1
  • editorWidget.background#eee8d5
  • editorWidget.border#ddd6c1
  • errorForeground#dc322f
  • extensionButton.prominentBackground#b58900
  • extensionButton.prominentHoverBackground#584c27aa
  • focusBorder#b58900
  • foreground#584c27
  • icon.foreground#584c27
  • input.background#fdf6e3
  • input.border#ddd6c1
  • input.foreground#586e75
  • input.placeholderForeground#586e75AA
  • inputOption.activeBorder#b58900
  • list.activeSelectionBackground#ddd6c1
  • list.activeSelectionForeground#584c27
  • list.focusBackground#ddd6c1
  • list.highlightForeground#b58900
  • list.hoverBackground#ddd6c1AA
  • list.inactiveSelectionBackground#ddd6c1AA
  • notebook.cellEditorBackground#fdf6e3
  • panel.border#ddd6c1
  • peekView.border#ddd6c1
  • peekViewEditor.background#fdf6e3
  • peekViewEditor.matchHighlightBackground#d336821A
  • peekViewResult.background#eee8d5
  • peekViewResult.fileForeground#584c27
  • peekViewResult.lineForeground#584c27
  • peekViewResult.matchHighlightBackground#d336821A
  • peekViewResult.selectionBackground#ddd6c1
  • peekViewTitle.background#eee8d5
  • peekViewTitleDescription.foreground#584c27
  • peekViewTitleLabel.foreground#584c27
  • pickerGroup.border#2aa19899
  • pickerGroup.foreground#2aa19899
  • ports.iconRunningProcessForeground#2aa198
  • progressBar.background#b58900
  • quickInputList.focusBackground#dfca8866
  • scrollbarSlider.activeBackground#b58900
  • scrollbarSlider.background#ddd6c1
  • scrollbarSlider.hoverBackground#b58900
  • selection.background#dfca8866
  • sideBar.background#eee8d5
  • sideBarSectionHeader.background#ddd6c1
  • sideBarTitle.foreground#586e75
  • statusBar.background#ddd6c1
  • statusBar.debuggingBackground#b58900
  • statusBar.debuggingForeground#fffbf2
  • statusBar.focusBorder#b58900
  • statusBar.foreground#584c27
  • statusBar.noFolderBackground#eee8d5
  • statusBarItem.compactHoverBackground#ddd6c1
  • statusBarItem.focusBorder#b58900
  • statusBarItem.hoverBackground#ddd6c1
  • statusBarItem.hoverForeground#b58900
  • statusBarItem.remoteBackground#584c2799
  • tab.activeBackground#fdf6e3
  • tab.activeModifiedBorder#268bd2
  • tab.border#ddd6c199
  • tab.dragAndDropBorder#b58900
  • tab.inactiveBackground#eee8d5
  • tab.inactiveForeground#586e75
  • tab.lastPinnedBorder#ddd6c1
  • terminal.ansiBlack#073642
  • terminal.ansiBlue#268bd2
  • terminal.ansiBrightBlack#002b36
  • terminal.ansiBrightBlue#839496
  • terminal.ansiBrightCyan#93a1a1
  • terminal.ansiBrightGreen#586e75
  • terminal.ansiBrightMagenta#6c71c4
  • terminal.ansiBrightRed#cb4b16
  • terminal.ansiBrightWhite#fdf6e3
  • terminal.ansiBrightYellow#657b83
  • terminal.ansiCyan#2aa198
  • terminal.ansiGreen#859900
  • terminal.ansiMagenta#d33682
  • terminal.ansiRed#dc322f
  • terminal.ansiWhite#eee8d5
  • terminal.ansiYellow#b58900
  • terminal.background#FDF6E3
  • titleBar.activeBackground#ddd6c1
  • titleBar.activeForeground#584c27
  • titleBar.inactiveBackground#ddd6c1
  • titleBar.inactiveForeground#584c2799
  • toolbar.activeBackground#ddd6c1
  • toolbar.hoverBackground#ddd6c1
  • toolbar.hoverOutline#b58900
  • walkThrough.embeddedEditorBackground#00000014
  • widget.border#ddd6c1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, meta.documentation#93a1a1
string#2aa198
string.regexp#2aa198
constant.character.escape#dc322f
constant.numeric#6c71c4
variable#268bd2
variable.other.readwrite, variable.other.object, variable.other.constant#657b83
variable.function#b58900
variable.language.this, variable.language.super#d33682
keyword#859900
meta.import keyword, keyword.control.import, keyword.control.import.from, keyword.other.import, keyword.control.at-rule.include, keyword.control.at-rule.import#cb4b16
keyword.operator.comparison, keyword.operator.assignment, keyword.operator.arithmetic#657b83
storage#859900
keyword.control.class, meta.class, entity.name.class, entity.name.type.class#b58900
support.type, support.class#859900
entity.name.function#b58900
punctuation.definition.variable#859900
constant.language, meta.preprocessor#b58900
support.function.construct, keyword.other.new#dc322f
constant.character, constant.other#cb4b16
entity.name.tag#268bd2
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#93a1a1
support.function#859900
punctuation.separator.continuation#dc322f
storage.type#268bd2
support.type.exception#cb4b16
keyword.other.special-method#cb4b16
invalid#ec9489
string.quoted.double, string.quoted.single#2aa198
punctuation.definition.string.begin, punctuation.definition.string.end#839496
meta.brace.square#268bd2
meta.brace.round, punctuation.definition.parameters.begin, punctuation.definition.parameters.end#657b83
meta.brace.curly#657b83
support.constant.color, invalid.deprecated.color.w3c-non-standard-color-name.scss#b58900
meta.selector.css#657b83
entity.name.tag.css, entity.name.tag.scss, source.less keyword.control.html.elements, source.sass keyword.control.untitled#b58900
entity.other.attribute-name.class.css, entity.other.attribute-name.class.sass#b58900
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#b58900
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.tag.pseudo-class#268bd2
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#657b83
text.html.basic entity.other.attribute-name.html, meta.tag.xml entity.other.attribute-name#b58900
keyword.other.special-method.ruby#859900
variable.other.constant.ruby#b58900
constant.other.symbol.ruby#2aa198
keyword.other.special-method.ruby#cb4b16
meta.array support.function.construct.php#b58900
entity.name.function.preprocessor.c, meta.preprocessor.c.include, meta.preprocessor.macro.c#cb4b16
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#2aa198
other.package.exclude, other.remove#dc322f
other.add#2aa198
punctuation.section.group.tex, punctuation.definition.arguments.begin.latex, punctuation.definition.arguments.end.latex, punctuation.definition.arguments.latex#dc322f
meta.group.braces.tex#b58900
string.other.math.tex#b58900
variable.parameter.function.latex#cb4b16
punctuation.definition.constant.math.tex#dc322f
text.tex.latex constant.other.math.tex, constant.other.general.math.tex, constant.other.general.math.tex, constant.character.math.tex#2aa198
string.other.math.tex#b58900
punctuation.definition.string.begin.tex, punctuation.definition.string.end.tex#dc322f
keyword.control.label.latex, text.tex.latex constant.other.general.math.tex#2aa198
variable.parameter.definition.label.latex#dc322f
support.function.be.latex#859900
support.function.section.latex#cb4b16
support.function.general.tex#2aa198
keyword.control.ref.latex#2aa198
storage.type.class.python, storage.type.function.python, storage.modifier.global.python#859900
support.type.exception.python#b58900
meta.scope.for-in-loop.shell, variable.other.loop.shell#586e75
meta.scope.case-block.shell, meta.scope.case-body.shell#586e75
punctuation.definition.logical-expression.shell#dc322f
storage.modifier.import.java#586e75
support.function.perl#268bd2
meta.diff, meta.diff.header#93a1a1
meta.diff.range#268bd2
markup.deleted#dc322f
markup.changed#2aa198
markup.inserted#859900
markup.heading, punctuation.definition.heading.markdown#b58900
markup.quote#859900
markup.italicitalic
markup.boldbold
markup.underline.link.markdown, meta.link.reference constant.other.reference.link.markdown#2aa198
constant.other.reference.link.markdown#6c71c4
meta.paragraph.markdown meta.dummy.line-break#eee8d5
meta.class punctuation#657b83

Shiki preview

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

Loading...