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#0a0c42
  • activityBar.border#1a1e8f
  • activityBar.foreground#fff2b9
  • activityBar.inactiveForeground#ffffff
  • activityBarBadge.background#3a40ec
  • activityBarBadge.foreground#ffffff
  • badge.background#3a40ec
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#fff2b9
  • breadcrumb.focusForeground#fff2b9
  • breadcrumb.foreground#ffffff
  • breadcrumbPicker.background#1b1836
  • button.background#282879
  • button.foreground#ffffff
  • button.hoverBackground#4c4c88
  • button.secondaryBackground#282879
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#4c4c88
  • checkbox.background#0e193a
  • checkbox.border#888aff
  • checkbox.foreground#ffffff
  • debugConsole.errorForeground#f85656
  • debugConsole.infoForeground#ffffff
  • debugConsole.sourceForeground#ffffff
  • debugConsole.warningForeground#ffc252
  • debugExceptionWidget.background#151a63
  • debugExceptionWidget.border#151a63
  • debugIcon.continueForeground#ffb867
  • debugIcon.stepIntoForeground#ffffff
  • debugIcon.stepOutForeground#ffffff
  • debugIcon.stepOverForeground#ffffff
  • debugToolBar.background#151a63
  • descriptionForeground#ffffff
  • diffEditor.border#1a1e8f
  • diffEditor.diagonalFill#0c0d30
  • diffEditor.insertedLineBackground#59ce35bd
  • diffEditor.insertedTextBackground#000213
  • diffEditor.removedLineBackground#ce3535bd
  • diffEditor.removedTextBackground#ff004c
  • dropdown.background#212246
  • dropdown.listBackground#212246
  • editor.background#000213
  • editor.findMatchHighlightBackground#7775a77e
  • editor.findRangeHighlightBackground#8f9be9
  • editor.foreground#6b94ec
  • editor.lineHighlightBackground#0f1455
  • editor.lineHighlightBorder#0f1455
  • editor.selectionBackground#1b0d58
  • editor.selectionHighlightBackground#7775a77e
  • editor.wordHighlightBackground#7775a77e
  • editor.wordHighlightStrongBackground#7775a77e
  • editorBracketMatch.background#ff005533
  • editorBracketMatch.border#ff004c
  • editorCursor.foreground#ff004c
  • editorError.foreground#ff0000
  • editorGroup.border#1a1e8f
  • editorGroupHeader.tabsBackground#110f22
  • editorHoverWidget.background#060936
  • editorIndentGuide.activeBackground1#50bdfc5b
  • editorIndentGuide.background1#34759b5b
  • editorInfo.border#8f9be9
  • editorLineNumber.activeForeground#ececec
  • editorLineNumber.foreground#707070
  • editorSuggestWidget.background#060936
  • editorSuggestWidget.foreground#ffffff
  • editorWarning.foreground#ffa600
  • editorWidget.background#060936
  • errorForeground#ff3270
  • extensionButton.prominentBackground#8f9be9
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#8f9be9
  • focusBorder#888aff
  • foreground#ffffff
  • gitDecoration.addedResourceForeground#00ff22
  • gitDecoration.stageModifiedResourceForeground#8f9be9
  • gitDecoration.untrackedResourceForeground#00ffffd5
  • icon.foreground#ffffff
  • input.background#212246
  • list.activeSelectionBackground#00063b
  • list.activeSelectionForeground#ffffff
  • list.errorForeground#f85656
  • list.focusForeground#ffffff
  • list.hoverBackground#00063b
  • list.hoverForeground#ffffff
  • list.inactiveFocusBackground#060936
  • list.inactiveSelectionForeground#ffffff
  • list.warningForeground#ffc252
  • menu.background#0e193a
  • menu.border#0e193a
  • menu.selectionBackground#1b2c61
  • menubar.selectionBackground#2c3142
  • merge.commonContentBackground#192b17
  • merge.commonHeaderBackground#98ff8f
  • merge.currentContentBackground#000213
  • merge.currentHeaderBackground#000a64
  • merge.incomingContentBackground#493c2a
  • merge.incomingHeaderBackground#ffce8f
  • minimapSlider.activeBackground#ffffff7e
  • notificationCenter.border#3a40ec
  • notificationCenterHeader.background#3a40ec
  • notificationLink.foreground#8fb6ff
  • notifications.background#3a40ec
  • notifications.foreground#ffffff
  • notificationsErrorIcon.foreground#f85656
  • notificationsInfoIcon.foreground#ffffff
  • notificationsWarningIcon.foreground#ffc252
  • panel.background#00010f
  • panel.border#1a1e8f
  • panel.dropBorder#8f9be9
  • panelTitle.activeBorder#fff2b9
  • panelTitle.activeForeground#fff2b9
  • panelTitle.inactiveForeground#ffffff
  • peekView.border#2024ac
  • peekViewEditor.background#000213
  • peekViewEditor.matchHighlightBackground#7775a77e
  • peekViewResult.background#05061f
  • peekViewResult.lineForeground#ffffff
  • peekViewResult.selectionBackground#0c0f4b
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#000213
  • peekViewTitleDescription.foreground#ffffffd5
  • peekViewTitleLabel.foreground#ffffffd5
  • progressBar.background#ffffff
  • scrollbarSlider.activeBackground#b4b8ffb2
  • scrollbarSlider.background#b4b9fd8c
  • scrollbarSlider.hoverBackground#b4b8ffb2
  • sideBar.background#05061f
  • sideBar.border#05061f
  • sideBar.dropBackground#8f9be9
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#212246
  • sideBarTitle.background#05061f
  • sideBarTitle.foreground#ffffff
  • statusBar.background#0e193a
  • statusBar.debuggingBackground#0e193a
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#0e193a
  • statusBarItem.activeBackground#ffffff8e
  • tab.activeBackground#000213
  • tab.activeBorderTop#000213
  • tab.border#12163d
  • tab.dragAndDropBorder#888aff
  • tab.hoverBackground#090b1b
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#0e122b
  • tab.inactiveForeground#ffffff
  • terminal.ansiBrightYellow#ffffff
  • terminal.ansiCyan#818181
  • terminal.background#00010f
  • terminal.foreground#ffffff
  • terminal.selectionBackground#311b92
  • terminal.selectionForeground#ffffff
  • terminalCursor.foreground#ffffff
  • textBlockQuote.background#071636
  • textBlockQuote.border#2369ff
  • textCodeBlock.background#102f72
  • textLink.activeForeground#2369ff
  • textLink.foreground#2369ff
  • titleBar.activeBackground#0e193a
  • titleBar.activeForeground#e2e2e2
  • titleBar.border#1a1e8f
  • titleBar.inactiveForeground#e2e2e2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6f6f94
variable.parameter#4f94ff
constant#ff76d3
entity.name.function#ffffd3
string.quoted.double, string.quoted.single.python#69e7c3
keyword.operator#3a6eab
entity.name.class#9e527d
keyword, storage.type.primitive#9b4bff
punctuation.separator, punctuation.terminator#e4e4e4
meta.method.body.java#4f94ff
meta.package.java#f0b3d7
storage.modifier.import.java#d97efb
variable.language.this.java#a1c5ff
entity.name.class, variable.other.object.java, entity.name.type.class.java, storage.type.object.array.java, storage.type.java#9e527d
meta.function-call.java, meta.method-call.java#578fe7
storage.modifier.java#9b4bff
meta.definition.variable.java, variable.other.object.property.java, meta.method.body.java#7b9ff7
punctuation.separator.period.java, punctuation.separator.delimiter.java#e4e4e4
meta.function-call.python, support.function.magic.python#ffffd3
variable.language.special.self.python#a1c5ff
entity.name.type.class.python#9e527d
meta.function-call.arguments.python, meta.class.inheritance.python#578fe7
meta.function.python, keyword.operator.logical.python, meta.class.python, punctuation.separator.colon.python#9b4bff
punctuation.section.function.begin.python#ffffd3
punctuation.section.class.begin.python#9e527d
punctuation.separator.period.python, punctuation.separator.arguments.python#e4e4e4
entity.name.function.rust#ffffd3
meta.function.call.rust#ffffd3
punctuation.semi.rust#e4e4e4
entity.name.function.macro.rust#ffffd3
meta.macro.invocation.rust#8e4d88
entity.name.function.macro#f0b3d7
keyword.operator.rust, keyword.rust, storage.type.rust, variable.language.rust#9b4bff
entity.name.type.struct.rust, entity.name.type.enum.rust#9e527d
entity.name.tag.vue#e0a9e4
variable.parameter.vue#4f94ff
entity.name.tag.html#e0a9e4
entity.other.attribute-name.html#578fe7
entity.name.selector.class.css, entity.name.selector.id.css, entity.name.selector.pseudo-class.css#9e527d
support.type.property-name.css#ffffd3
constant.other.css#ff76d3
support.type.property-name.json#578fe7
string.quoted.double.json, constant.numeric.json, constant.language.boolean.json#69e7c3
entity.name.function.javascript, support.function.magic.javascript#ffffd3
variable.other.local.javascript, variable.other.js#4f94ff
entity.name.type.class.javascript#9e527d
keyword.operator.logical.javascript, keyword.control.javascript#9b4bff
entity.name.function.c, entity.name.function.cpp#ffffd3
variable.other.c, variable.other.local.c#4f94ff
keyword.operator.c, keyword.control.c, storage.type.c#9b4bff
entity.name.function.csharp#ffffd3
entity.name.type.class.csharp#9e527d
keyword.operator.csharp, keyword.control.csharp, storage.type.csharp#9b4bff
markup.heading.markdown#e0a9e4
markup.underline.link.markdown#578fe7
markup..markdown#ffffd3
markup.italic.markdown#69e7c3italic
markup.list.ordered.markdown, markup.list.unordered.markdown#56c7f4
markup.quote.markdown#4f939bitalic
markup.inline.raw.markdown#9d7e8a
markup.raw.block.markdown#7f457b
punctuation.separator.table.markdown#6b94ec
Aether Blue by wosh - VS Code Theme