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#1a242d
  • activityBar.border#283c4c
  • activityBar.foreground#a5bee3
  • activityBar.inactiveForeground#cad4e0
  • activityBarBadge.background#7289ab
  • activityBarBadge.foreground#ffffff
  • badge.background#2e3b47
  • badge.foreground#cad4e0
  • breadcrumb.activeSelectionForeground#e4dccc
  • breadcrumb.focusForeground#e4dccc
  • breadcrumb.foreground#b2c4c4
  • breadcrumbPicker.background#202c37
  • button.background#2e3b47
  • button.foreground#cad4e0
  • button.hoverBackground#3c4d5c
  • button.secondaryBackground#2e3b47
  • button.secondaryForeground#cad4e0
  • button.secondaryHoverBackground#3c4d5c
  • checkbox.background#2e3b47
  • checkbox.border#647885
  • checkbox.foreground#cad4e0
  • debugConsole.errorForeground#ff6961
  • debugConsole.infoForeground#d8dee9
  • debugConsole.sourceForeground#d8dee9
  • debugConsole.warningForeground#ffb347
  • debugExceptionWidget.background#293d4f
  • debugExceptionWidget.border#293d4f
  • debugIcon.continueForeground#ffcc66
  • debugIcon.stepIntoForeground#d8dee9
  • debugIcon.stepOutForeground#d8dee9
  • debugIcon.stepOverForeground#d8dee9
  • debugToolBar.background#293d4f
  • descriptionForeground#cad4e0
  • diffEditor.border#2e3b47
  • diffEditor.diagonalFill#16222f
  • diffEditor.insertedLineBackground#64788588
  • diffEditor.insertedTextBackground#16222f
  • diffEditor.removedLineBackground#64788588
  • diffEditor.removedTextBackground#7d8b8b4d
  • dropdown.background#2e3b47
  • dropdown.listBackground#2e3b47
  • editor.background#0b1016
  • editor.findMatchHighlightBackground#64788588
  • editor.findRangeHighlightBackground#7289ab
  • editor.foreground#cad4e0
  • editor.lineHighlightBackground#16222f
  • editor.lineHighlightBorder#16222f
  • editor.selectionBackground#2e3b47
  • editor.selectionHighlightBackground#64788588
  • editor.wordHighlightBackground#64788588
  • editor.wordHighlightStrongBackground#64788588
  • editorBracketMatch.background#7d8b8b4d
  • editorBracketMatch.border#50a9a94d
  • editorCursor.foreground#d7eef2
  • editorError.foreground#ff6961
  • editorGroup.border#283c4c
  • editorGroupHeader.tabsBackground#1a242d
  • editorHoverWidget.background#1c2833
  • editorIndentGuide.activeBackground1#bbddd47e
  • editorIndentGuide.background1#6b7b705b
  • editorInfo.border#7289ab
  • editorLineNumber.activeForeground#e0e8ee
  • editorLineNumber.foreground#8fa4ae
  • editorSuggestWidget.background#1c2833
  • editorSuggestWidget.foreground#d8dee9
  • editorWarning.foreground#ffb347
  • editorWidget.background#1c2833
  • errorForeground#ff6961
  • extensionButton.prominentBackground#647885
  • extensionButton.prominentForeground#cad4e0
  • extensionButton.prominentHoverBackground#647885
  • focusBorder#7289ab
  • foreground#d8dee9
  • gitDecoration.addedResourceForeground#50a9a9
  • gitDecoration.stageModifiedResourceForeground#647885
  • gitDecoration.untrackedResourceForeground#50a9a9
  • icon.foreground#cad4e0
  • input.background#2e3b47
  • list.activeSelectionBackground#2e3b47
  • list.activeSelectionForeground#cad4e0
  • list.errorForeground#ff6961
  • list.focusForeground#cad4e0
  • list.hoverBackground#2e3b47
  • list.hoverForeground#cad4e0
  • list.inactiveFocusBackground#2e3b47
  • list.inactiveSelectionBackground#2e3b47
  • list.inactiveSelectionForeground#cad4e0
  • list.warningForeground#ffb347
  • menu.background#16222f
  • menu.border#16222f
  • menu.selectionBackground#2e3b47
  • menubar.selectionBackground#2e3b47
  • merge.commonContentBackground#1a242d
  • merge.commonHeaderBackground#647885
  • merge.currentContentBackground#16222f
  • merge.currentHeaderBackground#2e3b47
  • merge.incomingContentBackground#2e3b47
  • merge.incomingHeaderBackground#647885
  • minimapSlider.activeBackground#d8dee988
  • notificationCenter.border#2e3b47
  • notificationCenterHeader.background#2e3b47
  • notificationLink.foreground#50a9a9
  • notifications.background#2e3b47
  • notifications.foreground#cad4e0
  • notificationsErrorIcon.foreground#ff6961
  • notificationsInfoIcon.foreground#cad4e0
  • notificationsWarningIcon.foreground#ffb347
  • panel.background#0b1016
  • panel.border#283c4c
  • panel.dropBorder#7289ab
  • panelTitle.activeBorder#9dbae6
  • panelTitle.activeForeground#9dbae6
  • panelTitle.inactiveForeground#cad4e0
  • peekView.border#3b4f5f
  • peekViewEditor.background#0b1016
  • peekViewEditor.matchHighlightBackground#64788588
  • peekViewResult.background#131f26
  • peekViewResult.lineForeground#ffffff
  • peekViewResult.selectionBackground#1f2a33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#0b1016
  • peekViewTitleDescription.foreground#d0d6df
  • peekViewTitleLabel.foreground#d0d6df
  • progressBar.background#cad4e0
  • scrollbarSlider.activeBackground#2e3b47cc
  • scrollbarSlider.background#2e3b4788
  • scrollbarSlider.hoverBackground#2e3b47cc
  • sideBar.background#131f26
  • sideBar.border#131f26
  • sideBar.dropBackground#7289ab
  • sideBar.foreground#cad4e0
  • sideBarSectionHeader.background#1a242d
  • sideBarTitle.background#131f26
  • sideBarTitle.foreground#cad4e0
  • statusBar.background#16222f
  • statusBar.debuggingBackground#16222f
  • statusBar.debuggingForeground#cad4e0
  • statusBar.foreground#cad4e0
  • statusBar.noFolderBackground#16222f
  • statusBarItem.activeBackground#64788588
  • tab.activeBackground#0b1016
  • tab.activeBorderTop#16222f
  • tab.border#16222f
  • tab.dragAndDropBorder#64788588
  • tab.hoverBackground#2e3b47
  • tab.hoverForeground#cad4e0
  • tab.inactiveBackground#16222f
  • tab.inactiveForeground#8fa4ae
  • terminal.ansiBrightYellow#e4dccc
  • terminal.ansiCyan#89b8a5
  • terminal.background#0b1016
  • terminal.foreground#d8dee9
  • terminal.selectionBackground#2e3b47
  • terminal.selectionForeground#ffffff
  • terminalCursor.foreground#d8dee9
  • textBlockQuote.background#16222f
  • textBlockQuote.border#50a9a9
  • textCodeBlock.background#2e3b47
  • textLink.activeForeground#50a9a9
  • textLink.foreground#50a9a9
  • titleBar.activeBackground#1a242d
  • titleBar.activeForeground#cad4e0
  • titleBar.border#283c4c
  • titleBar.inactiveForeground#cad4e0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6e948c
variable.parameter#4e88ff
constant#ae85c9
entity.name.function#6a6152
string.quoted.double#89c7a7italic
keyword.operator#3b6eab
entity.name.class#9f72e3bold
keyword, storage.type.primitive#9baf6f
punctuation.separator, punctuation.terminator#d6d6d6
meta.method.body.java, variable.parameter.java#d6d6d6
storage.type.function.arrow.java#3b6eab
meta.package.java#c6a7beitalic
storage.modifier.import.java#9678bfitalic underline
variable.language.this.java#4e88ff
entity.name.class, entity.name.type.class.java, storage.type.object.array.java, storage.type.java, entity.other.inherited-class.java, storage.type.generic.java#7a9adfbold underline
entity.name.type.class.java, entity.name.type.enum.java#7a9adfbold underline
meta.function-call.java, meta.method-call.java#d6d6d6
storage.modifier.java, storage.modifier.extends.java, keyword.other.import.java, keyword.control.java, keyword.control.new.java, keyword.control.try.java, keyword.control.catch.java, keyword.control.finally.java#9baf6fitalic
storage.type.primitive.java, storage.type.primitive.array.java, storage.type.generic.wildcard.java#9f72e3italic
meta.definition.variable.java, variable.other.object.property.java, meta.method.body.java, variable.other.object.java#d6d6d6
punctuation.separator.period.java, punctuation.separator.delimiter.java, punctuation.terminator, punctuation.separator.java, keyword.control.ternary.java#d6d6d6
storage.type.annotation.java, punctuation.definition.annotation.java#868585
meta.function-call.python, support.function.magic.python, support.function.builtin.python#6a6152
variable.language.special.self.python#4e88ff
entity.name.type.class.python#7a9adfbold underline
punctuation.separator.annotation.result.python, storage.type.function.lambda.python#3b6eab
meta.function.python, keyword.operator.logical.python, meta.class.python, punctuation.separator.colon.python, keyword.control.flow.python, keyword.control.import.python#9baf6fitalic
punctuation.section.function.begin.python#6a6152
punctuation.section.class.begin.python#7a9adf
support.type.python, storage.modifier.declaration.python#9f72e3italic
punctuation.separator.period.python, punctuation.separator.arguments.python, punctuation.definition.decorator.python#d6d6d6
meta.fstring.python#d6d6d6italic
string.quoted.docstring.multi.python#89c7a7italic
entity.name.function.decorator.python#868585
variable.parameter.function.language.python, source.python, meta.function-call.arguments.python, meta.item-access.arguments.python, meta.function.parameters.python, meta.indexed-name.python#d6d6d6
support.type.exception.python#ab9f62
string.quoted.single.python#89c7a7italic
entity.name.function.rust#6a6152
meta.function.call.rust#6a6152
punctuation.semi.rust#d6d6d6
keyword.other.rust, keyword.control.rust, keyword.other.fn.rust#9baf6fitalic
storage.type.rust, storage.modifier.mut.rust#9f72e3italic
entity.name.type.rust, entity.name.type.trait.rust, entity.name.type.enum.rust, entity.name.type.struct.rust#7a9adf
variable.language.self.rust#4e88ff
variable.other.rust#d6d6d6
entity.name.tag.vue#ae85c9
variable.parameter.vue#4e88ff
entity.name.tag.html#6a6152
entity.other.attribute-name.html#89c7a7
entity.name.tag.css#d6d6d6italic
entity.name.selector.css#4e88ff
support.type.property-name.css#6e948c
constant.other.css#9baf6f
support.function.misc.css, support.function.transform.css#6a6152
entity.name.tag.css, entity.name.tag.wildcard.css, entity.other.attribute-name.class.css#d6d6d6italic
string.quoted.double.json#65a9f1
punctuation.section.braces.begin.json, punctuation.section.braces.end.json#76f4d8
entity.name.function.javascript#6a6152
variable.other.javascript#4e88ff
entity.name.type.class.javascript, entity.name.type.class.js#7a9adfbold underline
support.class.promise.js, entity.other.inherited-class.js#7a9adfbold underline
storage.type.class.js, storage.type.function.js, keyword.control.flow.js, keyword.control.conditional.js, keyword.control.trycatch.js, storage.modifier.js, storage.modifier.async.js, keyword.control.loop.js#9baf6fitalic
keyword.operator.new.js, keyword.operator.expression.typeof.js, storage.type.js#9f72e3italic
string.template.js, string.quoted.single.js, punctuation.definition.string.begin.js#89c7a7italic
punctuation.accessor.js, punctuation.terminator.statement.js, punctuation.separator.comma.js#d6d6d6
storage.type.function.arrow.js#3b6eab
variable.other.readwrite.js, variable.other.property.js, variable.other.object.js, variable.parameter.js#d6d6d6
variable.language.this.js#4e88ff
entity.name.function.c, entity.name.function.cpp, keyword.operator.sizeof.c, entity.name.function.preprocessor.c#6a6152
source.c, variable.other.c, variable.parameter.preprocessor.c, meta.function.definition.parameters.c, variable.parameter.probably.c#d6d6d6
entity.name.function.preprocessor.c#4e88ff
keyword.control.c, storage.modifier.c, keyword.other.typedef.c, keyword.control.directive.define.c, keyword.control.directive.include.c#9baf6fitalic
storage.type.built-in.primitive.c, storage.type.struct.c, storage.type.enum.c#9f72e3italic
punctuation.separator.pointer-access.c#3b6eab
string.quoted.other.lt-gt.include.c#9678bf
entity.name.function.cpp, meta.function.call.cpp, support.function.cpp#6a6152
variable.other.cpp, variable.other.member.cpp, variable.other.object.cpp#4e88ff
keyword.control.cpp, keyword.operator.new.cpp, keyword.operator.delete.cpp, keyword.operator.cast.cpp, keyword.other.using.cpp, storage.modifier.cpp, keyword.other.typedef.cpp#9baf6fitalic
storage.type.built-in.primitive.cpp, storage.type.cpp, storage.type.class.cpp, storage.type.struct.cpp, storage.type.enum.cpp, storage.type.union.cpp#9f72e3italic
entity.name.class.cpp, entity.name.type.cpp, entity.name.type.class.cpp, entity.name.struct.cpp, entity.name.enum.cpp, entity.name.union.cpp#9f72e3bold
entity.name.namespace.cpp, entity.name.scope-resolution.cpp#ae85c9
keyword.operator.cpp, punctuation.separator.pointer-access.cpp, punctuation.separator.scope-resolution.cpp, keyword.operator.arithmetic.cpp, keyword.operator.comparison.cpp, keyword.operator.bitwise.shift.cpp, storage.modifier.reference.cpp#3b6eab
string.quoted.other.lt-gt.include.cpp, keyword.control.directive.include.cpp#9678bf
keyword.control.directive.cpp, keyword.control.directive.define.cpp, keyword.control.directive.conditional.cpp#9baf6fitalic
storage.type.template.cpp, keyword.other.template.cpp, entity.name.type.template.cpp#ae85c9italic
variable.language.this.cpp#9baf6fitalic
constant.language.cpp, constant.language.nullptr.cpp#ae85c9
entity.name.function.csharp#6a6152
entity.name.type.class.csharp, entity.name.type.class.cs, entity.name.type.cs, entity.name.type.interface.cs, entity.name.type.namespace.cs, entity.name.variable.property.cs, entity.name.type.type-parameter.cs, entity.name.type.struct.cs#7a9adfbold underline
keyword.operator.csharp, keyword.control.csharp, keyword.other.directive.using.cs, storage.modifier.public.cs, storage.modifier.abstract.cs, storage.modifier.override.cs, storage.modifier.static.cs, storage.modifier.async.cs#9baf6fitalic
storage.type.interface.cs, storage.type.namespace.cs, storage.type.class.cs, storage.type.struct.cs, keyword.type.string.cs, keyword.type.void.cs, storage.type.var.cs, keyword.type.int.cs#9f72e3italic
variable.other.readwrite.cs#d6d6d6
markup.heading.markdown#ae85c9bold
markup.underline.link.markdown#4e88ff
markup..markdown#6e948c
markup.italic.markdown#89c7a7italic
Everwinter by wosh - VS Code Theme