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.

  • actionBar.toggledBackground#352845
  • activityBar.activeBorder#22ff99
  • activityBar.background#1a1225
  • activityBar.foreground#d0c8e0
  • activityBarBadge.background#22ff99
  • activityBarBadge.foreground#1a1225
  • breadcrumbs.activeSelectionForeground#d0c8e0
  • breadcrumbs.background#1a1225
  • breadcrumbs.focusForeground#d0c8e0
  • breadcrumbs.foreground#9088a0
  • button.background#22ff9940
  • button.foreground#d0c8e0
  • button.hoverBackground#22ff9960
  • debugConsole.fontFamilyMenlo, Monaco, 'Courier New', monospace
  • debugConsole.fontSize14
  • debugExceptionWidget.background#ff557720
  • debugExceptionWidget.border#ff557720
  • dropdown.background#120d1a
  • dropdown.border#352845
  • dropdown.foreground#d0c8e0
  • editor.background#1a1225
  • editor.findMatchHighlightBackground#ffffff20
  • editor.foreground#d0c8e0
  • editor.hoverHighlightBackground#22ff9930
  • editor.lineHighlightBackground#2a1d38
  • editor.selectionBackground#3a2a48
  • editor.stackFrameHighlightBackground#ffdd5530
  • editorBracketMatch.background#22ff9930
  • editorBracketMatch.border#22ff99
  • editorCursor.foreground#22ff99
  • editorError.foreground#ff6688
  • editorGroup.emptyBackground#1a1225
  • editorGroupHeader.border#352845
  • editorGroupHeader.noTabsBackground#1a1225
  • editorGroupHeader.tabsBackground#120d1a
  • editorGutter.addedBackground#55ff88
  • editorGutter.background#1a1225
  • editorGutter.deletedBackground#ff6688
  • editorGutter.modifiedBackground#ffdd55
  • editorHoverWidget.background#1a1225
  • editorHoverWidget.border#352845
  • editorHoverWidget.foreground#d0c8e0
  • editorIndentGuide.activeBackground#504060
  • editorIndentGuide.background#352845
  • editorInfo.foreground#77aaff
  • editorLineNumber.activeForeground#9088a0
  • editorLineNumber.foreground#504060
  • editorOverviewRuler.errorForeground#ff6688
  • editorOverviewRuler.infoForeground#77aaff
  • editorOverviewRuler.warningForeground#ffdd55
  • editorPane.background#1a1225
  • editorSuggestWidget.background#1a1225
  • editorSuggestWidget.border#352845
  • editorSuggestWidget.highlightForeground#22ff99
  • editorSuggestWidget.selectedBackground#352845
  • editorWarning.foreground#ffdd55
  • editorWidget.background#1a1225
  • editorWidget.border#352845
  • editorWordHighlightBackground#22ff9920
  • editorWordHighlightStrongBackground#22ff9940
  • extensionBadge.previewForeground#22ff99
  • extensionBadge.remoteForeground#ff6688
  • gitDecoration.addedResourceForeground#55ff88
  • gitDecoration.ignoredResourceForeground#605070
  • gitDecoration.modifiedResourceForeground#ffdd55
  • icon.foreground#9088a0
  • icon.hoverForeground#d0c8e0
  • input.background#120d1a
  • input.border#352845
  • input.foreground#d0c8e0
  • input.placeholderForeground#706088
  • list.activeSelectionBackground#352845
  • list.errorForeground#ff6655
  • list.hoverBackground#251a35
  • menu.background#1a1225
  • menu.foreground#d0c8e0
  • menubar.selectionBackground#352845
  • menubar.selectionForeground#d0c8e0
  • minimap.background#120d1a
  • minimapSlider.activeBackground#60507080
  • minimapSlider.background#35284580
  • minimapSlider.hoverBackground#50406080
  • panel.background#120d1a
  • panelSectionHeader.background#1a1225
  • panelTitle.activeBorder#ff5577
  • peekView.border#ff5577
  • peekViewEditor.background#1a1225
  • peekViewEditorGutter.background#ff5577
  • peekViewResult.background#120d1a
  • peekViewResult.selectionBackground#352845
  • quickInput.background#120d1a
  • quickInput.foreground#d0c8e0
  • quickInputList.focusBackground#352845
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#60507080
  • scrollbarSlider.background#35284580
  • scrollbarSlider.hoverBackground#50406080
  • sideBar.background#120d1a
  • sidebars.background#120d1a
  • sideBarSectionHeader.background#1a1225
  • sideBarTitle.foreground#9088a0
  • statusBar.background#1a1225
  • statusBar.debuggingBackground#ffbb33
  • statusBar.debuggingForeground#1a1225
  • statusBar.foreground#d0c8e0
  • statusBar.noFolderBackground#120d1a
  • statusBar.noFolderForeground#d0c8e0
  • tab.actionBarBackground#1a1225
  • tab.activeBackground#1a1225
  • tab.activeBorder#22ff99
  • tab.activeHorizontalBorder#352845
  • tab.hoverBackground#251a35
  • tab.hoverForeground#d0c8e0
  • tab.inactiveBackground#120d1a
  • tab.lastPinnedBorder#352845
  • tab.pinnedBackground#1a1225
  • tab.pinnedBorder#352845
  • tab.pinnedForeground#9088a0
  • tab.unfocusedActiveBorder#352845
  • tab.unfocusedHoverBackground#1a1225
  • tab.unfocusedHoverForeground#9088a0
  • tab.verticalDividerBorder#352845
  • terminal.ansiBlack#120d1a
  • terminal.ansiBlue#77aaff
  • terminal.ansiBrightBlack#352845
  • terminal.ansiBrightBlue#99bbff
  • terminal.ansiBrightCyan#55ffcc
  • terminal.ansiBrightGreen#88ffaa
  • terminal.ansiBrightMagenta#ddaaff
  • terminal.ansiBrightRed#ff99aa
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffee88
  • terminal.ansiCyan#22ffbb
  • terminal.ansiGreen#55ff88
  • terminal.ansiMagenta#cc88ff
  • terminal.ansiRed#ff6688
  • terminal.ansiWhite#d0c8e0
  • terminal.ansiYellow#ffdd55
  • terminal.foreground#b0a8c0
  • titleBar.activeBackground#1a1225
  • titleBar.activeForeground#d0c8e0
  • toolbar.activeBackground#352845
  • toolbar.hoverBackground#251a35
  • workbench.background#1a1225

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#cc88ff
emphasisitalic
strongbold
header#77aaff
comment#706088
constant.language#77aaff
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#ffbb55
constant.regexp#55ff88
entity.name.tag#77aaff
entity.name.tag.css#55ff88
entity.other.attribute-name#66ccff
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#55ff88
invalid#ff6688
markup.underlineunderline
markup.bold#77aaffbold
markup.heading#77aaffbold
markup.italicitalic
markup.inserted#ffbb55
markup.deleted#ff99aa
markup.changed#77aaff
punctuation.definition.quote.begin.markdown#706088
punctuation.definition.list.begin.markdown#77aaff
markup.inline.raw#ff99aa
punctuation.definition.tag#706088
meta.preprocessor, entity.name.function.preprocessor#77aaff
meta.preprocessor.string#ff99aa
meta.preprocessor.numeric#ffbb55
meta.structure.dictionary.key.python#66ccff
meta.diff.header#77aaff
storage#77aaff
storage.type#77aaff
storage.modifier, keyword.operator.noexcept#77aaff
string, meta.embedded.assembly#ffaa77
string.tag#ffaa77
string.value#ffaa77
string.regexp#55ff88
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#77aaff
meta.template.expression#cc88ff
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#66ccff
keyword#cc88ff
keyword.control#cc88ff
keyword.operator#22ff99
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#77aaff
keyword.other.unit#ffbb55
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#77aaff
support.function.git-rebase#66ccff
constant.sha.git-rebase#ffbb55
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#cc88ff
variable.language#77aaff
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#22ff99
meta.return-type, 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#22ffbb
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#22ffbb
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#cc88ff
variable, meta.definition.variable.name, support.variable, entity.name.variable#66ccff
variable.other.constant, variable.other.enummember#66ccff
meta.object-literal.key#66ccff
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#ffaa77
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#ffaa77
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#55ff88
keyword.operator.or.regexp, keyword.control.anchor.regexp#55ff88
keyword.operator.quantifier.regexp#ffbb55
constant.character#77aaff
constant.character.escape#ffbb55
entity.name.label#d0c8e0
token.info-token#77aaff
token.warn-token#ffdd55
token.error-token#ff6688
token.debug-token#cc88ff