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—
emphasis—italic
strong—bold
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.underline—underline
markup.bold#77aaffbold
markup.heading#77aaffbold
markup.italic—italic
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—