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#f5f5f5
  • activityBar.border#5F657333
  • activityBar.dropBackground#5F657333
  • activityBar.foreground#5F6573
  • activityBarBadge.background#DFE0E3
  • activityBarBadge.foreground#5F6573
  • badge.background#5F657333
  • badge.foreground#5F6573
  • button.background#5F657333
  • button.foreground#5F6573
  • button.hoverBackground#5F65737F
  • debugToolBar.background#F7F7F7
  • debugToolBar.border#00000000
  • diffEditor.insertedTextBackground#1FA03226
  • diffEditor.insertedTextBorder#1FA03226
  • diffEditor.removedTextBackground#D2474126
  • diffEditor.removedTextBorder#D2474126
  • dropdown.background#F7F7F7
  • dropdown.border#5F657333
  • dropdown.foreground#5F6573
  • editor.background#ceffe4
  • editor.findMatchBackground#5F657333
  • editor.findMatchHighlightBackground#5F657333
  • editor.findRangeHighlightBackground#5F657333
  • editor.foreground#333333
  • editor.inactiveSelectionBackground#5F65734C
  • editor.lineHighlightBackground#5F657333
  • editor.lineHighlightBorder#5F65737F
  • editor.selectionBackground#5F65734C
  • editor.selectionForeground#5F6573
  • editor.selectionHighlightBackground#5F65737F
  • editorBracketMatch.background#5F657333
  • editorBracketMatch.border#5F65737F
  • editorCodeLens.foreground#5F65737F
  • editorCursor.background#f5f5f5
  • editorCursor.foreground#5F6573
  • editorError.foreground#D24741
  • editorGroup.border#5F657333
  • editorGroup.dropBackground#5F657333
  • editorGroup.emptyBackground#00000000
  • editorGroupHeader.noTabsBackground#f5f5f5
  • editorGroupHeader.tabsBackground#f5f5f5
  • editorGroupHeader.tabsBorder#5F657333
  • editorIndentGuide.background#5F657333
  • editorInfo.foreground#1FA032
  • editorLineNumber.foreground#5F65737F
  • editorLink.activeForeground#109FD7
  • editorOverviewRuler.addedForeground#1FA032
  • editorOverviewRuler.border#5F657333
  • editorOverviewRuler.bracketMatchForeground#5F65737F
  • editorOverviewRuler.commonContentForeground#5F65737F
  • editorOverviewRuler.currentContentForeground#1FA032
  • editorOverviewRuler.deletedForeground#D24741
  • editorOverviewRuler.errorForeground#D24741
  • editorOverviewRuler.findMatchForeground#5F65737F
  • editorOverviewRuler.incomingContentForeground#D29C23
  • editorOverviewRuler.infoForeground#5F65737F
  • editorOverviewRuler.modifiedForeground#4985BD
  • editorOverviewRuler.rangeHighlightForeground#5F65737F
  • editorOverviewRuler.selectionHighlightForeground#5F65737F
  • editorOverviewRuler.warningForeground#D29C23
  • editorOverviewRuler.wordHighlightForeground#5F65737F
  • editorOverviewRuler.wordHighlightStrongForeground#5F65737F
  • editorWhitespace.foreground#5F657333
  • editorWidget.background#F7F7F7
  • editorWidget.border#5F657333
  • extensionButton.prominentBackground#5F657333
  • extensionButton.prominentForeground#5F6573
  • extensionButton.prominentHoverBackground#5F65737F
  • focusBorder#00000000
  • foreground#5F6573
  • gitDecoration.conflictingResourceForeground#D24741
  • gitDecoration.deletedResourceForeground#D24741
  • gitDecoration.ignoredResourceForeground#5F65737F
  • gitDecoration.modifiedResourceForeground#D29C23
  • gitDecoration.submoduleResourceForeground#4985BD
  • gitDecoration.untrackedResourceForeground#1FA032
  • input.background#00000000
  • input.border#5F657333
  • input.foreground#5F6573
  • input.placeholderForeground#5F65737F
  • inputOption.activeBorder#5F65737F
  • inputValidation.errorBackground#F7F7F7
  • inputValidation.errorBorder#D24741
  • inputValidation.infoBackground#F7F7F7
  • inputValidation.infoBorder#DFE0E3
  • inputValidation.warningBackground#F7F7F7
  • inputValidation.warningBorder#D29C23
  • list.activeSelectionBackground#5F657333
  • list.activeSelectionForeground#5F6573
  • list.dropBackground#5F657333
  • list.focusBackground#5F657333
  • list.focusForeground#5F6573
  • list.highlightForeground#5F6573
  • list.hoverBackground#5F657333
  • list.hoverForeground#5F6573
  • list.inactiveFocusBackground#5F657333
  • list.inactiveSelectionBackground#5F657333
  • list.inactiveSelectionForeground#5F6573
  • list.invalidItemForeground#5F6573
  • panel.background#f5f5f5
  • panel.border#5F657333
  • panel.dropBackground#5F657333
  • panelTitle.activeBorder#00000000
  • panelTitle.activeForeground#5F6573
  • panelTitle.inactiveForeground#5F65737F
  • peekView.border#5F657333
  • peekViewEditor.background#f5f5f5
  • peekViewEditor.matchHighlightBackground#5F657333
  • peekViewEditorGutter.background#f5f5f5
  • peekViewResult.background#f5f5f5
  • peekViewResult.fileForeground#5F6573
  • peekViewResult.lineForeground#5F6573
  • peekViewResult.matchHighlightBackground#5F657333
  • peekViewResult.selectionBackground#5F657333
  • peekViewResult.selectionForeground#5F6573
  • peekViewTitle.background#f5f5f5
  • peekViewTitleDescription.foreground#5F65737F
  • peekViewTitleLabel.foreground#5F6573
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#5F657333
  • scrollbarSlider.background#5F657333
  • scrollbarSlider.hoverBackground#5F657333
  • selection.background#5F65734C
  • sideBar.background#f5f5f5
  • sideBar.border#5F657333
  • sideBar.dropBackground#5F657333
  • sideBar.foreground#5F6573
  • sideBarSectionHeader.background#5F657333
  • sideBarSectionHeader.foreground#5F6573
  • sideBarTitle.foreground#5F6573
  • statusBar.background#f5f5f5
  • statusBar.border#5F657333
  • statusBar.debuggingBackground#f5f5f5
  • statusBar.debuggingBorder#5F657333
  • statusBar.debuggingForeground#5F6573
  • statusBar.foreground#5F6573
  • statusBar.noFolderBackground#f5f5f5
  • statusBar.noFolderBorder#5F657333
  • statusBar.noFolderForeground#5F6573
  • statusBarItem.activeBackground#f5f5f5
  • statusBarItem.hoverBackground#5F657333
  • statusBarItem.prominentBackground#f5f5f5
  • statusBarItem.prominentHoverBackground#5F657333
  • tab.activeBackground#5F657311
  • tab.activeBorder#00000000
  • tab.activeForeground#5F6573
  • tab.border#5F657333
  • tab.hoverBackground#5F65730A
  • tab.hoverBorder#00000000
  • tab.inactiveBackground#00000000
  • tab.inactiveForeground#5F65737F
  • tab.unfocusedActiveBorder#00000000
  • tab.unfocusedActiveForeground#5F65737F
  • tab.unfocusedHoverBackground#5F65730A
  • tab.unfocusedHoverBorder#00000000
  • tab.unfocusedInactiveForeground#5F65737F
  • terminal.background#f5f5f5
  • terminal.foreground#5F6573
  • terminal.selectionBackground#5F65737F
  • terminalCursor.background#f5f5f5
  • terminalCursor.foreground#5F6573
  • titleBar.activeBackground#f5f5f5
  • titleBar.activeForeground#5F6573
  • titleBar.border#5F657333
  • titleBar.inactiveBackground#f5f5f5
  • titleBar.inactiveForeground#5F6573
  • welcomePage.buttonBackground#5F657333
  • welcomePage.buttonHoverBackground#5F65737F
  • widget.shadow#00000019

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#333333
emphasisitalic
strongbold
header#000080
comment#2B6E0F
constant.language#1F6096
constant.numeric#4E8D2D
constant.regexp#646695
entity.name.tag#1F6096
entity.name.tag.css#AC7B15
entity.other.attribute-name#137DB5
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#AC7B15
invalid#F44747
markup.underlineunderline
markup.bold#1F6096bold
markup.heading#1F6096bold
markup.italicitalic
markup.inserted#4E8D2D
markup.deleted#A65736
markup.changed#1F6096
beginning.punctuation.definition.quote.markdown#2B6E0F
beginning.punctuation.definition.list.markdown#1F6096
markup.inline.raw#A65736
meta.selector#AC7B15
punctuation.definition.tag#3333337F
meta.preprocessor#1F6096
meta.preprocessor.string#A65736
meta.preprocessor.numeric#4E8D2D
meta.structure.dictionary.key.python#137DB5
meta.diff.header#1F6096
storage#1F6096
storage.type#1F6096
storage.modifier#1F6096
string#A65736
string.tag#A65736
string.value#A65736
string.regexp#972424
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#1F6096
meta.template.expression#333333
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#137DB5
keyword#1F6096
keyword.control#1F6096
keyword.operator#333333
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python#1F6096
keyword.other.unit#4E8D2D
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#1F6096
support.function.git-rebase#137DB5
constant.sha.git-rebase#4E8D2D
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#333333
variable.language#1F6096
entity.name.function, support.function, support.constant.handlebars#8B8B13
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#119479
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#119479
keyword.control#9A4293
variable, meta.definition.variable.name, support.variable#137DB5
meta.object-literal.key#137DB5
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#A65736
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#A65736
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#972424
keyword.operator.or.regexp, keyword.control.anchor.regexp#8B8B13
keyword.operator.quantifier.regexp#AC7B15
constant.character#1F6096
constant.character.escape#AC7B15
Eye Relax Theme Old by carvenski - VS Code Theme