Skip to main content
Coding Theme

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#242627DD
  • activityBar.foreground#E79750
  • activityBarBadge.background#B04025
  • activityBarBadge.foreground#FFECBB
  • badge.background#B04025
  • badge.foreground#FFECBB
  • button.background#E2812A
  • button.foreground#181A1B
  • button.hoverBackground#FAC439
  • debugIcon.breakpointForeground#D64E2C
  • debugToolBar.background#242627DD
  • diffEditor.insertedTextBackground#02f79922
  • diffEditor.removedTextBackground#D64E2C55
  • dropdown.background#242627DD
  • dropdown.foreground#CDBD96
  • editor.background#181A1B
  • editor.findMatchBackground#E2812A22
  • editor.findMatchBorder#E2812A88
  • editor.findMatchHighlightBackground#00000000
  • editor.findMatchHighlightBorder#F9B70E88
  • editor.foreground#CDBD96
  • editor.inactiveSelectionBackground#F9B70E08
  • editor.lineHighlightBackground#FFFF8804
  • editor.selectionBackground#E2812A33
  • editor.selectionHighlightBackground#FFFF8811
  • editor.wordHighlightBackground#00000000
  • editor.wordHighlightBorder#00000000
  • editor.wordHighlightStrongBackground#00000000
  • editor.wordHighlightStrongBorder#00000000
  • editor.wordHighlightTextBackground#00000000
  • editor.wordHighlightTextBorder#00000000
  • editorBracketMatch.background#ffffff22
  • editorBracketMatch.border#00000000
  • editorCursor.foreground#F9B70EDD
  • editorError.foreground#D64E2C
  • editorGroupHeader.noTabsBackground#00000000
  • editorGroupHeader.tabsBackground#242627
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#CDBD9688
  • editorGutter.deletedBackground#E79750
  • editorGutter.modifiedBackground#CDBD9622
  • editorHint.foreground#58A75E
  • editorHoverWidget.background#242627DD
  • editorHoverWidget.border#E2812A
  • editorIndentGuide.activeBackground1#ffffff11
  • editorIndentGuide.activeBackground2#ffffff11
  • editorIndentGuide.activeBackground3#ffffff11
  • editorIndentGuide.activeBackground4#ffffff11
  • editorIndentGuide.activeBackground5#ffffff11
  • editorIndentGuide.activeBackground6#ffffff11
  • editorIndentGuide.background1#272427
  • editorIndentGuide.background2#272427
  • editorIndentGuide.background3#272427
  • editorIndentGuide.background4#272427
  • editorIndentGuide.background5#272427
  • editorIndentGuide.background6#272427
  • editorInfo.foreground#F9B70E
  • editorLightBulb.foreground#F9B70E88
  • editorLightBulbAutoFix.foreground#F9B70E88
  • editorLineNumber.activeForeground#DD6E52
  • editorLineNumber.foreground#CDBD9644
  • editorRuler.foreground#49343d
  • editorSuggestWidget.background#242627DD
  • editorSuggestWidget.border#E79750
  • editorSuggestWidget.highlightForeground#E79750
  • editorWarning.foreground#E79750
  • editorWhitespace.foreground#363036
  • editorWidget.background#242627DD
  • editorWidget.border#D64E2C
  • extensionButton.prominentBackground#E2812A
  • extensionButton.prominentForeground#181A1B
  • extensionButton.prominentHoverBackground#FAC439
  • focusBorder#E2812A
  • foreground#CDBD96
  • gitDecoration.addedResourceForeground#FFECBB
  • gitDecoration.conflictingResourceForeground#D64E2C
  • gitDecoration.deletedResourceForeground#D64E2C
  • gitDecoration.ignoredResourceForeground#CDBD9688
  • gitDecoration.untrackedResourceForeground#FFECBB
  • icon.foreground#E79750
  • input.background#242627DD
  • input.border#00000000
  • input.foreground#CDBD96
  • input.placeholderForeground#CDBD9644
  • inputValidation.errorBackground#D64E2C44
  • inputValidation.errorBorder#D64E2C
  • inputValidation.errorForeground#D64E2C
  • list.activeSelectionBackground#F9B70E44
  • list.activeSelectionForeground#FFECBB
  • list.focusBackground#E2812A33
  • list.focusForeground#FFECBB
  • list.hoverForeground#FFECBB
  • list.inactiveSelectionBackground#FFFFFF11
  • menu.selectionBackground#FFFFFF11
  • menu.separatorBackground#CDBD9644
  • menubar.selectionBackground#FFFFFF11
  • menubar.selectionForeground#CDBD96
  • notifications.background#242627DD
  • panel.background#242627DD
  • panel.border#242627
  • panelTitle.activeBorder#E79750
  • panelTitle.activeForeground#E79750
  • panelTitle.inactiveForeground#CDBD9688
  • peekView.border#E2812A
  • peekViewEditor.background#242627DD
  • peekViewResult.background#ffffff22
  • peekViewResult.selectionBackground#242627
  • peekViewResult.selectionForeground#CDBD96
  • peekViewTitle.background#E2812A
  • peekViewTitleDescription.foreground#242627
  • peekViewTitleLabel.foreground#242627
  • pickerGroup.border#CDBD9644
  • pickerGroup.foreground#E2812A
  • progressBar.background#E2812A
  • quickInput.background#242627DD
  • scrollbar.shadow#ffffff00
  • scrollbarSlider.activeBackground#FAC43988
  • scrollbarSlider.background#E2812A88
  • scrollbarSlider.hoverBackground#FAC43988
  • selection.background#E2812A44
  • settings.checkboxForeground#F9B70E
  • settings.dropdownListBorder#E2812A
  • settings.headerForeground#E2812A
  • settings.modifiedItemIndicator#D64E2C
  • settings.numberInputBorder#00000000
  • settings.textInputBorder#00000000
  • sideBar.background#242627DD
  • sideBar.border#181A1B
  • sideBarSectionHeader.background#E2812A
  • sideBarSectionHeader.border#242627DD
  • sideBarSectionHeader.foreground#242627
  • sideBarTitle.foreground#CDBD9644
  • statusBar.background#242627
  • statusBar.border#242627
  • statusBar.debuggingBackground#E2812A
  • statusBar.debuggingBorder#242627
  • statusBar.debuggingForeground#242627
  • statusBar.foreground#CDBD96
  • statusBar.noFolderBackground#242627
  • statusBar.noFolderBorder#242627
  • statusBar.noFolderForeground#CDBD96
  • statusBarItem.remoteBackground#242627
  • statusBarItem.remoteForeground#CDBD96
  • tab.activeBackground#181A1B
  • tab.activeForeground#CDBD96
  • tab.activeModifiedBorder#F9B70E
  • tab.border#181A1B
  • tab.inactiveBackground#242627DD
  • tab.inactiveForeground#CDBD9688
  • terminal.background#242627
  • terminal.border#181A1B
  • terminal.foreground#CDBD96
  • terminal.selectionBackground#E2812A33
  • terminalCursor.foreground#F9B70EDD
  • textLink.activeForeground#FAC439
  • textLink.foreground#E79750
  • titleBar.activeBackground#242627
  • titleBar.activeForeground#CDBD9688
  • titleBar.inactiveBackground#242627
  • welcomePage.background#181A1B
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#CDBD96—
emphasis—italic
strong—bold
invalid, constant.other, markup.list, meta, meta.parens, meta.definition.function, variable.other.object, storage.modifier.import, storage.modifier.import.java, storage.modifier.package, storage.modifier.package.java, support.type.vendored.property-name, variable.other.jsdoc#CDBD96
markup.bold#CDBD96bold
markup.italic#CDBD96italic
comment, constant.character.escape.line-continuation, storage.type, invalid.deprecated, entity.other.attribute-name.localname.cs, entity.name.tag.localname.cs, meta.brace, meta.tag.block.any.html, meta.tag.inline.any.html, keyword.control.ternary, keyword.operator, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.bitwise, keyword.operator.spread, keyword.operator.at.batchfile, keyword.operator.assignment, keyword.codetag.notation, keyword.command.rem, keyword.other.unit, keyword.operator.new, punctuation.dot, punctuation.comma, punctuation.accessor, punctuation.separator, punctuation.terminator, punctuation.support.type.property-name, punctuation.section.block, punctuation.section.parens, punctuation.section.parameters, punctuation.section.arguments, punctuation.section.function, punctuation.section.media, punctuation.section.property-list, punctuation.section.embedded, punctuation.definition.metadata, punctuation.definition.constant, punctuation.definition.array, punctuation.definition.dictionary, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.binding-pattern, punctuation.definition.tag, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.html, punctuation.definition.template-expression, meta.type.annotation, support.type.primitive, punctuation.definition.typeparameters#CDBD9666
storage, variable.language.this, variable.language.super, keyword.control.new, keyword.control.directive, keyword.control.import, keyword.control.break, keyword.control.continue, keyword.other.import, keyword.other.package, keyword.other.special-method, keyword.other.using, keyword.other.important, keyword.preprocessor, keyword.operator.expression, punctuation.definition.directive, punctuation.separator.hash, support.class.builtin, support.constant, support.constant.media, entity.other.attribute-name.pseudo-class.css#D64E2Cbold
keyword.control.flow, keyword.control.return, keyword.control.trycatch, keyword.control.loop#D64E2C
meta.class.body.java, meta.attribute, meta.object-literal.key, keyword.control, keyword.operator.logical.python, keyword.operator.sizeof, keyword.control.loop.js.for, punctuation.definition.annotation, punctuation.definition.storage.type.objc, punctuation.definition.keyword, support.type.property-name, support.type.vendored.property-name, variable.language, variable.other.java, variable.other.readwrite.batchfile, variable.parameter.function.language.special.self, entity.name.class, entity.name.function.decorator, entity.name.section.group-title.ini, entity.other.attribute-name.tsx, entity.other.attribute-name.id.css, entity.other.inherited-class, string.quoted.docstring, storage.type.annotation, storage.type.annotation.java, storage.type.cs, storage.type.generic, storage.type.generic.java, storage.type.java, storage.type.object, storage.type.object.array.java#F9B70E
meta.selector, meta.function-call, entity.name.function.call, entity.name.tag, entity.name.tag.css, markup.heading, storage.modifier, storage.type.primitive, storage.type.primitive.java, keyword.declaration, keyword.command.batchfile#E2812A
constant.language.boolean.false, constant.language.undefined, constant.language.null#3C7140
meta.preprocessor, meta.preprocessor.macro, meta.property-value, meta.link.inline, meta.image.inline, entity.name.function.preprocessor, variable.parameter.preprocessor, variable.other.constant.property, source.ini, markup.inline.raw, markup.underline.link, constant.language, constant.numeric, constant.character.escape, constant.other.color, constant.other.color.rgb-value, string, string.quoted.double.html, string.quoted.single.html, string.unquoted.preprocessor, storage.type.number, storage.type.string#58A75E
support.constant.property-value.css#58A75Ebold
constant.language.boolean.true, string.regexp, meta.group.regexp, punctuation.parenthesis.begin.regexp, punctuation.parenthesis.end.regexp, punctuation.parenthesis.non-capturing.begin.regexp, punctuation.parenthesis.non-capturing.end.regexp, constant.character.escape.backslash.regexp, constant.other.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.range.regexp, constant.character.numeric.regexp, keyword.control.anchor.regexp, keyword.operator.or.regexp, keyword.operator.disjunction.regexp, keyword.operator.quantifier.regexp, keyword.operator.negation.regexp#76B77B
comment.block.documentation, comment.block.triple-slash#76B77Bbold
meta.example.jsdoc#CDBD96AA
meta.tag.sgml.doctype, punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc#CDBD9644
samus theme by mrwilford - VS Code Theme