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.activeBorder#8a9a5b
  • activityBar.background#232323
  • activityBar.border#ffffff15
  • activityBar.foreground#d0d0d0
  • activityBarBadge.background#8a9a5b
  • activityBarBadge.foreground#1e1e1e
  • badge.background#8a9a5b
  • badge.foreground#1e1e1e
  • banner.background#3a3a3a
  • banner.foreground#ffffff
  • breadcrumb.foreground#666666
  • button.background#8a9a5b7f
  • button.hoverBackground#8a9a5baa
  • commandCenter.activeBackground#ffffff0a
  • commandCenter.activeBorder#ffffff15
  • commandCenter.border#ffffff15
  • diffEditor.border#ffffff15
  • diffEditor.diagonalFill#ffffff15
  • diffEditor.insertedLineBackground#8a9a5b25
  • diffEditor.insertedTextBackground#8a9a5b25
  • diffEditor.removedLineBackground#b87c7c25
  • diffEditor.removedTextBackground#b87c7c25
  • disabledForeground#666666
  • dropdown.background#1e1e1e
  • dropdown.border#ffffff15
  • editor.background#232323
  • editor.findMatchBackground#8a9a5b3f
  • editor.findMatchBorder#8a9a5b
  • editor.findMatchHighlightBackground#8a9a5b2f
  • editor.findMatchHighlightBorder#8a9a5b4f
  • editor.foreground#c8c8c8
  • editor.hoverHighlightBackground#ffffff0a
  • editor.lineHighlightBackground#2d2d2d
  • editor.selectionBackground#ffffff15
  • editor.selectionHighlightBorder#ffffff2a
  • editor.wordHighlightBackground#ffffff15
  • editor.wordHighlightBorder#a2b565
  • editor.wordHighlightStrongBackground#ffffff15
  • editor.wordHighlightStrongBorder#a2b565
  • editorBracketHighlight.foreground1#8a9a5b
  • editorBracketHighlight.foreground2#6b8c9d
  • editorBracketHighlight.foreground3#9a8a5b
  • editorBracketHighlight.foreground4#8a6b9d
  • editorBracketHighlight.foreground5#b87c7c
  • editorBracketHighlight.foreground6#9d8a6b
  • editorCodeLens.foreground#666666
  • editorCursor.foreground#a2b565
  • editorError.foreground#b87c7c
  • editorGroupHeader.tabsBackground#232323
  • editorGroupHeader.tabsBorder#ffffff15
  • editorGutter.addedBackground#8a9a5baf
  • editorGutter.deletedBackground#b87c7caf
  • editorGutter.modifiedBackground#6b8c9daf
  • editorIndentGuide.activeBackground1#ffffff2a
  • editorIndentGuide.background1#ffffff0a
  • editorInfo.foreground#6b8c9d
  • editorInlayHint.background#ffffff0a
  • editorInlayHint.foreground#ffffff5f
  • editorLineNumber.activeForeground#a8a8a8
  • editorLineNumber.foreground#707070
  • editorLink.activeForeground#8a9a5b
  • editorStickyScrollHover.background#2a2a2a
  • editorSuggestWidget.background#1e1e1e
  • editorSuggestWidget.selectedBackground#2a2a2a
  • editorWarning.foreground#b8a76b
  • editorWhitespace.foreground#ffffff15
  • editorWidget.background#252525
  • focusBorder#ffffff33
  • foreground#b8b8b8
  • gitDecoration.addedResourceForeground#8a9a5b
  • gitDecoration.conflictingResourceForeground#b89d6b
  • gitDecoration.deletedResourceForeground#b87c7c
  • gitDecoration.ignoredResourceForeground#ffffff3f
  • gitDecoration.modifiedResourceForeground#b8a76b
  • gitDecoration.renamedResourceForeground#6b9d9d
  • input.background#ffffff0a
  • input.border#ffffff0a
  • inputOption.activeBackground#3a3a3a
  • inputOption.activeBorder#666666
  • inputOption.activeForeground#e0e0e0
  • list.activeSelectionBackground#2a2a2a
  • list.activeSelectionForeground#d0d0d0
  • list.dropBackground#ffffff15
  • list.filterMatchBackground#8a9a5b25
  • list.filterMatchBorder#8a9a5b
  • list.focusBackground#ffffff15
  • list.focusHighlightForeground#8a9a5b
  • list.focusOutline#ffffff15
  • list.highlightForeground#8a9a5b
  • list.hoverBackground#2a2a2a
  • list.inactiveSelectionBackground#2a2a2a
  • menu.background#232323
  • menu.foreground#d0d0d0
  • menu.separatorBackground#ffffff10
  • merge.currentContentBackground#8a9a5b3f
  • merge.currentHeaderBackground#8a9a5b7f
  • merge.incomingContentBackground#6b8c9d3f
  • merge.incomingHeaderBackground#6b8c9d7f
  • minimap.background#252525
  • minimap.errorHighlight#b87c7c
  • minimap.findMatchHighlight#8a9a5b8f
  • minimap.selectionHighlight#6b8c9d8f
  • minimapSlider.activeBackground#ffffff2a
  • minimapSlider.background#ffffff15
  • minimapSlider.hoverBackground#ffffff25
  • panel.background#232323
  • peekView.border#666666
  • peekViewEditor.background#2a2a2a
  • peekViewEditor.matchHighlightBackground#8a9a5b3f
  • peekViewEditor.matchHighlightBorder#8a9a5b
  • peekViewResult.background#252525
  • peekViewResult.matchHighlightBackground#8a9a5b3f
  • peekViewResult.selectionBackground#8a9a5b3f
  • peekViewTitle.background#2a2a2a
  • pickerGroup.foreground#8a9a5b
  • progressBar.background#8a9a5b
  • quickInput.background#232323
  • sash.hoverBorder#8a9a5b
  • scrollbar.shadow#1e1e1e
  • scrollbarSlider.activeBackground#ffffff2a
  • scrollbarSlider.background#ffffff15
  • scrollbarSlider.hoverBackground#ffffff25
  • searchEditor.findMatchBorder#8a9a5b
  • selection.background#3a3a3a
  • sideBar.background#232323
  • sideBar.border#ffffff15
  • sideBarSectionHeader.background#2d2d2d
  • sideBarSectionHeader.border#ffffff15
  • statusBar.background#2d2d2d
  • statusBar.border#ffffff15
  • statusBar.debuggingBackground#8a9a5b
  • statusBar.debuggingForeground#1e1e1e
  • statusBar.focusBorder#00000000
  • statusBar.foreground#b8b8b8
  • statusBar.noFolderBackground#2d2d2d
  • statusBar.noFolderForeground#b8b8b8
  • statusBarItem.errorBackground#b87c7c
  • statusBarItem.errorForeground#1e1e1e
  • statusBarItem.prominentBackground#8a9a5b
  • statusBarItem.prominentForeground#1e1e1e
  • statusBarItem.remoteBackground#8a9a5b
  • statusBarItem.remoteForeground#1e1e1e
  • statusBarItem.warningBackground#b8a76b
  • statusBarItem.warningForeground#1e1e1e
  • tab.activeBackground#2d2d2d
  • tab.activeBorder#a2b565
  • tab.border#ffffff10
  • tab.inactiveBackground#232323
  • terminal.ansiBlack#1e1e1e
  • terminal.ansiBlue#6b8c9d
  • terminal.ansiBrightBlack#1e1e1e
  • terminal.ansiBrightBlue#6b8c9d
  • terminal.ansiBrightCyan#6b9d9d
  • terminal.ansiBrightGreen#8a9a5b
  • terminal.ansiBrightMagenta#9d6b9d
  • terminal.ansiBrightRed#b87c7c
  • terminal.ansiBrightWhite#e0e0e0
  • terminal.ansiBrightYellow#b8a76b
  • terminal.ansiCyan#6b9d9d
  • terminal.ansiGreen#8a9a5b
  • terminal.ansiMagenta#9d6b9d
  • terminal.ansiRed#b87c7c
  • terminal.ansiWhite#e0e0e0
  • terminal.ansiYellow#b8a76b
  • terminal.background#232323
  • terminal.foreground#c8c8c8
  • terminal.selectionBackground#3a3a3a
  • terminal.tab.activeBorder#8a9a5b
  • textCodeBlock.background#2a2a2a
  • textLink.activeForeground#8a9a5b
  • textLink.foreground#8a9a5bcc
  • titleBar.activeBackground#232323
  • titleBar.border#ffffff0a
  • titleBar.inactiveBackground#2d2d2d
  • toolbar.hoverBackground#3a3a3a
  • widget.shadow#00000022

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#d0d0d0
emphasisitalic
strongbold
header#6b9d9d
comment, punctuation.definition.comment#748a6b
punctuation.definition, punctuation.definition.quote.begin.markdown, punctuation.definition.tag, punctuation.section.embedded#808080
constant.language#d4a35a
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#d4a35a
constant.regexp#e89660
entity.name.tag, entity.name.tag.css, support.class.component#d88e8e
entity.other.attribute-name#7db5b5
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.scss#6b9d9d
invalid#b87c7c
markup.underlineunderline
string.other.link#6b9d9d
markup.underline.link#808080
markup.bold#9d9d6bbold
markup.heading#8a9a5bbold
markup.italic#9d9d6bitalic
markup.strikethroughstrikethrough
markup.quote#808080italic
markup.inserted#8a9a5b
markup.deleted#b87c7c
markup.changed#6b9d9d
punctuation.definition.list.begin.markdown#6b9d9d
markup.inline.raw#b8a76b
meta.preprocessor, entity.name.function.preprocessor#6b9d9d
meta.preprocessor.string#8a9a5b
meta.preprocessor.numeric#b8a76b
meta.structure.dictionary.key.python#9d9d6b
meta.diff.header#6b9d9d
storage#b87c7c
storage.type#b87c7c
storage.modifier, keyword.operator.noexcept#b87c7c
string, meta.embedded.assembly, punctuation.definition.string#a2b565
string.tag#8a9a5b
string.value#8a9a5b
string.regexp#e89660
meta.template.expression#d0d0d0
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#9d9d6b
keyword#d88e8e
keyword.control#d88e8e
keyword.operator#cc8080
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#b87c7c
keyword.other.unit#b87c7c
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#b87c7c
support.function.git-rebase#6b9d9d
constant.sha.git-rebase#b8a76b
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#8a9a5b
variable.language#b87c7citalic
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#7db5b5
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, 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.error.go, storage.type.rune.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#d4b775
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#b89d6b
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#b87c7c
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#b5b575
variable.other.constant, variable.other.enummember#9d9d6b
meta.object-literal.key#9d9d6b
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#8a9a5b
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#8a9a5b
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#b8a76b
keyword.operator.or.regexp, keyword.control.anchor.regexp#6b9d9d
keyword.operator.quantifier.regexp#6b9d9d
constant.character#b8a76b
constant.character.escape#6b9d9d
entity.name.label#b8b8b8
vscode-happy-theme by lynnjinjie - VS Code Theme