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.activeBorder#9dff00
  • activityBar.background#222227
  • activityBar.border#000000
  • activityBar.foreground#9dff00
  • activityBar.inactiveForeground#ffffff22
  • breadcrumb.background#141417
  • breadcrumb.focusForeground#DDDDDE
  • breadcrumb.foreground#ffffff42
  • dart.closingLabels#FFFFFF25
  • editor.background#25252A
  • editor.foreground#FFFFFFD8
  • editor.lineHighlightBackground#2F3239
  • editor.selectionBackground#9dff0020
  • editorBracketHighlight.foreground1#DFDFDF
  • editorBracketHighlight.foreground2#ff57b9dd
  • editorBracketHighlight.foreground3#beff55dd
  • editorBracketHighlight.foreground4#4afffcdd
  • editorBracketHighlight.unexpectedBracket.foreground#ea5c2c
  • editorCursor.background#292A30
  • editorCursor.foreground#FFFFFF
  • editorGroupHeader.border#36373B
  • editorGroupHeader.noTabsBackground#202125
  • editorGroupHeader.tabsBackground#202125
  • editorIndentGuide.background1#4e4b5b44
  • editorInlayHint.background#FFFFFF11
  • editorInlayHint.foreground#7F8C98
  • editorLineNumber.activeForeground#E0E0E1
  • editorLineNumber.foreground#747478
  • editorSuggestWidget.foreground#FFFFFFBB
  • editorSuggestWidget.selectedForeground#FFFFFFBB
  • editorWhitespace.foreground#53606E
  • editorWidget.background#1E2023
  • editorWidget.border#36373B
  • focusBorder#9dff00
  • foreground#DDDDDE
  • input.background#1E1E1E
  • input.border#36373B
  • input.placeholderForeground#727272
  • list.activeSelectionBackground#9dff0053
  • list.activeSelectionForeground#ffffff
  • list.focusHighlightForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#00000000
  • panel.background#1E2023
  • panel.border#000000
  • quickInput.foreground#FFFFFFBB
  • quickInputList.focusForeground#ffffff
  • scrollbar.shadow#00000000
  • selection.background#9dff003f
  • sideBar.background#141417
  • sideBar.border#000000
  • sideBar.foreground#a4a4a4
  • statusBar.background#202124
  • statusBar.debuggingBackground#ff00629f
  • statusBar.debuggingForeground#000000ac
  • statusBar.foreground#9A9A9C
  • statusBar.noFolderBackground#9dff00b0
  • statusBar.noFolderForeground#0000009e
  • tab.activeBackground#141417
  • tab.activeForeground#9d9d9d
  • tab.border#36373B
  • tab.inactiveBackground#25252A
  • tab.inactiveForeground#a9a9aa
  • tab.unfocusedActiveBackground#505050
  • terminalCursor.background#292A30
  • terminalCursor.foreground#FFFFFF
  • titleBar.activeBackground#37383B
  • titleBar.activeForeground#EBEBEB
  • titleBar.border#000000
  • titleBar.inactiveBackground#27292C
  • titleBar.inactiveForeground#686A6D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7F8C98
string, punctuation.definition.string#FF8170
support.type.property-name.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#ab79ed
constant.numeric#D9C97C
constant.other.placeholder, constant.character.escape#FFFFFFD8
keyword, keyword.operator.new, keyword.operator.wordlike, keyword.operator.logical.and, keyword.operator.sizeof, storage, variable.language, constant.language, punctuation.definition.keyword#FF7AB2bold
keyword.control.directive, punctuation.definition.directive#FFA14F
entity.name.type.class.php#6BDFFF
variable.parameter, meta.parameter.dart, variable.parameter.name.dart, variable.parameter.dart#86D5EC
entity.name.type, entity.other.inherited-class, storage.type.haskell, support.type.primitive.ts, support.type.primitive.tsx#C9A0FF
support.class, entity.other.inherited-class.php#DABAFF
support.class.component#ACF2E4
keyword.type.cs, 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#DABAFF
entity.name.function#78C2B3
support.function#B281EB
constant.other#B281EB
variable.other.property, variable.other.object.property, entity.name.variable.field#78C2B3
meta.object-literal.key#78C2B3
entity.name.function.preprocessor#FFA14F
entity.name.tag#DABAFF
entity.other.attribute-name, support.type.property-name.css, support.type.property-name.media.css, meta.property-name.css#B281EB
constant.other.color, support.constant.color, punctuation.definition.constant.css, keyword.other.unit#D9C97C
support.constant.property-value, support.constant.font-name#FF7AB2bold
support.constant.media.css#78C2B3
keyword.control.at-rule.css, punctuation.definition.keyword.css#FFA14F
variable.css, variable.argument.css#4EB0CC
support.function.misc.css, support.function.gradient.css, support.function.transform.css#B281EB
punctuation.definition.heading.markdown, meta.separator.markdown, punctuation.definition.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.raw.markdown, fenced_code.block.language.markdown, markup.heading.marker.asciidoc, markup.heading.block-attribute.asciidoc, punctuation.separator.asciidoc, constant.asciidoc, punctuation.definition.asciidoc#78C2B3
markup.headingbold
markup.boldbold
markup.italicitalic
magit.header#DABAFF
magit.subheader#B281EB
magit.entity#D9C97C
meta.diff.range.unified, punctuation.definition.range.diff#7F8C98
markup.inserted, punctuation.definition.inserted#ACF2E4
markup.deleted, punctuation.definition.deleted#FF8170
variable#AEEEE0
keyword.operator, storage.modifier.pointer#FFFFFFD8
meta.declaration.annotation.dart, punctuation.definition.annotation.dart#FFA14F
Neon Void by Autthawigorn Yortpiboot - VS Code Theme