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#0F1A1F
  • activityBar.foreground#80E0F5
  • activityBarBadge.background#5AC8A8
  • activityBarBadge.foreground#0A1118
  • badge.background#5AC8A8
  • badge.foreground#0A1118
  • breadcrumb.activeSelectionForeground#80E0F5
  • breadcrumb.background#0A1118
  • breadcrumb.focusForeground#D8E8EE
  • breadcrumb.foreground#8AAAAA
  • button.background#5AC8A8
  • button.hoverBackground#6AD8B8
  • button.secondaryBackground#2A3A4A
  • button.secondaryForeground#D8E8EE
  • button.secondaryHoverBackground#3A4A5A
  • chat.requestBackground#0F1A1F
  • chat.responseBackground#0A1118
  • chat.slashCommandBackground#1A3A42
  • chat.slashCommandForeground#D8E8EE
  • debugExceptionWidget.background#1A3A42
  • debugExceptionWidget.border#E08080
  • debugToolBar.background#0A1118
  • debugToolBar.border#1A3A42
  • diffEditor.border#2A4A52
  • diffEditor.insertedTextBackground#80E0B033
  • diffEditor.insertedTextBorder#80E0B0
  • diffEditor.removedTextBackground#E0808033
  • diffEditor.removedTextBorder#E08080
  • dropdown.background#0A1118
  • dropdown.border#2A4A52
  • dropdown.foreground#D8E8EE
  • editor.background#0A1118
  • editor.foreground#D8E8EE
  • editor.selectionBackground#1A3A42
  • editor.wordHighlightBackground#122A30
  • editorBracketHighlight.foreground1#5AC8A8
  • editorBracketHighlight.foreground2#80E0F5
  • editorBracketHighlight.foreground3#90E8C0
  • editorBracketHighlight.foreground4#E8D080
  • editorBracketHighlight.foreground5#E0A0B8
  • editorBracketHighlight.foreground6#8A8AD8
  • editorBracketMatch.background#1A3A42
  • editorBracketMatch.border#2A4A52
  • editorCodeLens.foreground#4A7A7A
  • editorGroup.dropBackground#1A3A4233
  • editorGroupHeader.tabsBackground#0F1A1F
  • editorGutter.addedBackground#80E0B0
  • editorGutter.deletedBackground#E08080
  • editorGutter.modifiedBackground#80E0F5
  • editorHoverWidget.background#0F1A1F
  • editorHoverWidget.border#2A4A52
  • editorHoverWidget.foreground#D8E8EE
  • editorInlayHint.background#1A2A2A
  • editorInlayHint.foreground#4A7A7A
  • editorInlayHint.parameterForeground#E0B090
  • editorInlayHint.typeForeground#D4A0E0
  • editorLineNumber.activeForeground#80E0F5
  • editorLineNumber.foreground#2A4A52
  • editorOverviewRuler.background#0A1118
  • editorOverviewRuler.border#1A3A42
  • editorOverviewRuler.errorForeground#E07070
  • editorOverviewRuler.infoForeground#70C8E0
  • editorOverviewRuler.warningForeground#D8D890
  • editorSuggestWidget.background#0F1A1F
  • editorSuggestWidget.foreground#D8E8EE
  • editorSuggestWidget.highlightForeground#5AC8A8
  • editorSuggestWidget.selectedBackground#1A3A42
  • editorWidget.resizeBorder#5AC8A8
  • focusBorder#6AD8B8
  • gitDecoration.addedResourceForeground#80E0B0
  • gitDecoration.conflictingResourceForeground#D06060
  • gitDecoration.deletedResourceForeground#E08080
  • gitDecoration.ignoredResourceForeground#4A6A6A
  • gitDecoration.modifiedResourceForeground#D8D890
  • gitDecoration.untrackedResourceForeground#5AC8A8
  • input.background#0A1118
  • input.border#2A4A52
  • input.foreground#D8E8EE
  • input.placeholderForeground#4A7A7A
  • list.activeSelectionBackground#1A3A42
  • list.activeSelectionForeground#D8E8EE
  • list.highlightForeground#5AC8A8
  • list.hoverBackground#1A3A42
  • list.hoverForeground#D8E8EE
  • list.inactiveSelectionBackground#122A30
  • list.inactiveSelectionForeground#D8E8EE
  • listFilterWidget.background#0F1A1F
  • listFilterWidget.noMatchesOutline#E08080
  • listFilterWidget.outline#5AC8A8
  • menu.background#0F1A1F
  • menu.border#1A3A42
  • menu.foreground#D8E8EE
  • menu.selectionBackground#1A3A42
  • menu.separatorBackground#2A4A52
  • merge.commonContentBackground#0A0A0A
  • merge.commonHeaderBackground#1A1A1A
  • merge.currentContentBackground#122A30
  • merge.currentHeaderBackground#1A3A42
  • merge.incomingContentBackground#122A30
  • merge.incomingHeaderBackground#2A3A52
  • minimap.background#0A1118
  • minimap.errorHighlight#E0808033
  • minimap.findMatchHighlight#5AC8A833
  • minimap.selectionHighlight#80E0F533
  • minimapGutter.addedBackground#80E0B0
  • minimapGutter.deletedBackground#E08080
  • minimapGutter.modifiedBackground#80E0F5
  • notifications.background#0F1A1F
  • notifications.foreground#D8E8EE
  • notificationToast.border#2A4A52
  • panel.background#0A1118
  • panel.border#1A3A42
  • peekView.border#5AC8A8
  • peekViewEditor.background#0A1118
  • peekViewEditor.matchHighlightBackground#5AC8A833
  • peekViewEditor.matchHighlightBorder#5AC8A8
  • peekViewEditorGutter.background#0A1118
  • peekViewResult.background#0F1A1F
  • peekViewResult.fileForeground#D8E8EE
  • peekViewResult.lineForeground#4A7A7A
  • peekViewResult.matchHighlightBackground#5AC8A833
  • peekViewResult.selectionBackground#1A3A42
  • peekViewTitle.background#0F1A1F
  • peekViewTitleLabel.foreground#D8E8EE
  • ports.iconRunningProcessForeground#5AC8A8
  • progressBar.background#6AD8B8
  • scrollbar.shadow#0A1118
  • scrollbarSlider.background#1A2A3A
  • scrollbarSlider.hoverBackground#2A3A4A
  • settings.focusedRowBackground#1A3A42
  • settings.headerForeground#D8E8EE
  • sideBar.background#0A1118
  • sideBarSectionHeader.background#0A1118
  • sideBarSectionHeader.border#1A3A42
  • sideBarSectionHeader.foreground#D8E8EE
  • sideBarTitle.foreground#80E0F5
  • statusBar.background#0F1A1F
  • statusBar.border#1A3A42
  • statusBar.foreground#D8E8EE
  • statusBarItem.activeBackground#1A3A42
  • statusBarItem.hoverBackground#1A3A42
  • statusBarItem.remoteBackground#5AC8A8
  • statusBarItem.remoteForeground#0A1118
  • tab.activeBackground#0A1118
  • tab.activeBorder#5AC8A8
  • tab.inactiveBackground#0F1A1F
  • tab.unfocusedActiveBorder#5AC8A8
  • tab.unfocusedInactiveBackground#0F1A1F
  • terminal.ansiBlack#0A1118
  • terminal.ansiBlue#5AC8A8
  • terminal.ansiBrightBlue#80E0F5
  • terminal.ansiBrightGreen#80E0B0
  • terminal.ansiBrightRed#E08080
  • terminal.ansiBrightYellow#D8D890
  • terminal.ansiCyan#6AB8B8
  • terminal.ansiGreen#5AC8A8
  • terminal.ansiRed#E08080
  • terminal.ansiWhite#D8E8EE
  • terminal.ansiYellow#D8D890
  • terminal.background#0A1118
  • terminal.foreground#D8E8EE
  • textLink.foreground#5AC8A8
  • titleBar.activeBackground#0A1118
  • tree.indentGuidesStroke#2A4A52

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A9A7Aitalic
keyword, storage.type, storage.modifier#4AAA8A
support.type, entity.name.type, keyword.other.type.php#5AAAB8
storage.modifier#6ABA8A
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#70C8E0
keyword.function.go#70C8E0
storage.type.function.js#70C8E0
keyword.control.lua#70C8E0
storage.type.function.php#70C8E0
meta.function.c,meta.function.cpp#70C8E0
entity.name.function.cs#70C8E0
entity.name.function.java#70C8E0
keyword.control.import, keyword.control.import.ts, keyword.control.import.swift, keyword.control.import.js, keyword.control.import.go, keyword.other.import.dart, keyword.control.at-rule.import.css, storage.modifier.import, storage.modifier.import.java, keyword.control.export#6AB8B8
keyword.control.import.from.python#6AB8B8
keyword.control.import.as.python#6AB8B8
keyword.control.directive.include.c, keyword.control.directive.include.cpp, keyword.control.import.include.php#6AB8B8
keyword.other.special-method.ruby#6AB8B8
string, constant.other.symbol, constant.other.key, markup.heading#7AD0A0
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter#E0B090
meta.function-call.arguments, meta.function-call.arguments.python, meta.function-call.js variable.other.readwrite.js, meta.argument.shell#E8C860
entity.name, support.type, support.class, entity.name.class#E8D080
entity.name.tag, meta.tag.sgml#4AAA8A
entity.other.attribute-name#70C8E0
keyword.control, punctuation, meta.tag, punctuation.definition.tag#6AA8A8bold
variable, variable.assignment, string constant.other.placeholder#E6EDF3
meta.decorator, entity.name.function.decorator#E0A0B8bold
meta.function.decorator.python, entity.name.function.decorator.python#E0A0B8bold
meta.decorator.ts entity.name.function.ts#E0A0B8bold
storage.type.annotation.java#E0A0B8bold
support.attribute.php#E0A0B8bold
support.attribute.builtin.php#E0A0B8bold
storage.type.annotation.dart#E0A0B8bold
storage.type.annotation.groovy#E0A0B8bold
storage.modifier.attribute.swift#E0A0B8bold
punctuation.definition.decorator#E0A0B8bold
support.variable.magic.python#E0B090italic
variable.parameter.function.language.special.self.python#8A8AD8italic
storage.modifier.lifetime.rust#6AA8A8
entity.name.lifetime.rust#D4A0E0italic
entity.name.package.go#E8D080
support.type.go#5AAAB8
keyword.other.sql#4AAA8A
support.function.sql#70C8E0
entity.name.tag.yaml#70C8E0
string.quoted.double.yaml#7AD0A0
entity.name.tag.toml#70C8E0
string.quoted.double.toml#7AD0A0
variable.other.normal.shell#E6EDF3
support.function.shell#70C8E0
keyword.control.dockerfile#4AAA8A
support.function.dockerfile#70C8E0
invalid, invalid.illegal#E06060
string.regexp#70C8E0
*url*, *link*, *uri*#70C8E0underline
markup.bold#E8D080bold
markup.italic#7AD0A0italic
string.other.link.title.markdown#70C8E0
support.type.property-name.json#70C8E0
support.type.property-name#E8D080
entity.other.attribute-name.class, entity.other.attribute-name.id, entity.name.tag.css#7AD0A0
keyword.other.unit.css#E0B090
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#6AA8A8italic
support.constant.color.w3c-standard-color-name.css#D4A0E0
support.type, constant.language, meta.type.annotation#D4A0E0italic
support.type.exception, entity.other.inherited-class.java#E07070bold
variable.parameter.function.language.special.self.python, variable.language.special.self.python, variable.language.this#8A8AD8italic
variable.language.this.java#8A8AD8italic
variable.language.this.cpp#8A8AD8italic
variable.language.this.php#8A8AD8italic
variable.language.this.js#8A8AD8italic
variable.language.this.ts#8A8AD8italic
variable.language.self.ruby#8A8AD8italic
variable.language.self.rust#8A8AD8italic
keyword.operator.new.js#7A8AC8italic
keyword.operator.new.ts#7A8AC8italic
keyword.control.new.java#7A8AC8italic
keyword.operator.new.cpp#7A8AC8italic
keyword.operator.expression.new.cs#7A8AC8italic
keyword.other.new.php#7A8AC8italic
keyword.new.dart#7A8AC8italic
keyword.control.new.groovy#7A8AC8italic
support.function.magic#70C8E0italic
markup.heading#E8D080bold
markup.bold.markdown#E8D080bold
markup.italic.markdown#7AD0A0italic
markup.bold.markdown markup.italic.markdown#E0A0B8italic bold
markup.underline.link.markdown#70C8E0underline
markup.quote.markdown#6AA8A8italic
markup.fenced_code.block.markdown#E6EDF3
markup.list.markdown#4AAA8A
meta.embedded.line.css support.type.property-name.css#E8D080
meta.embedded.line.css support.constant.property-value.css#7AD0A0
keyword.operator.expression.instanceof#4AAA8A
keyword.operator.instanceof.java#4AAA8A
keyword.operator.expression.instanceof.js#4AAA8A
markup.inserted.diff#80E0B0
markup.deleted.diff#E08080
markup.changed.diff#D8D890
punctuation.definition.parameters.begin.python, punctuation.definition.parameters.end.python, punctuation.separator.parameters.python#6AA8A8
punctuation.definition.parameters.begin.java, punctuation.definition.parameters.end.java, punctuation.separator.parameters.java#6AA8A8
punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js, punctuation.separator.parameters.js#6AA8A8
Menthol Theme by UltraKostik - VS Code Theme