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#6AAB73
  • activityBar.background#1E1F22
  • activityBar.foreground#CED0D6
  • activityBarBadge.background#6AAB73
  • activityBarBadge.foreground#1E1F22
  • debugTokenExpression.boolean#2AACB8
  • debugTokenExpression.error#CF8E6D
  • debugTokenExpression.name#56A8F5
  • debugTokenExpression.number#B3AE60
  • debugTokenExpression.string#CE9178
  • debugTokenExpression.value#6AAB73
  • diffEditor.diagonalFill#3C3F41
  • diffEditor.insertedTextBackground#6AAB7320
  • diffEditor.removedTextBackground#CF8E6D20
  • editor.background#1E1F22
  • editor.focusedStackFrameHighlightBackground#3C3F41
  • editor.foreground#CED0D6
  • editor.inactiveSelectionBackground#2A3B4E99
  • editor.lineHighlightBackground#2A2D2E
  • editor.selectionBackground#2A3B4E
  • editor.stackFrameHighlightBackground#2A3B4E
  • editorBracketMatch.background#3C3F41
  • editorBracketMatch.border#CED0D6
  • editorCursor.foreground#CED0D6
  • editorGutter.addedBackground#6AAB73
  • editorGutter.background#1E1F22
  • editorGutter.deletedBackground#D16969
  • editorGutter.modifiedBackground#CF8E6D
  • editorIndentGuide.activeBackground#4B4D52
  • editorIndentGuide.activeBackground1#4B4D52
  • editorIndentGuide.background#2F3136
  • editorIndentGuide.background1#2F3136
  • editorWhitespace.foreground#3C3F41
  • gitDecoration.addedResourceForeground#6AAB73
  • gitDecoration.deletedResourceForeground#D16969
  • gitDecoration.modifiedResourceForeground#CF8E6D
  • input.background#2A2D2E
  • input.border#3C3F41
  • input.foreground#CED0D6
  • list.activeSelectionBackground#2A3B4E
  • list.hoverBackground#3C3F41
  • list.inactiveSelectionBackground#2A3B4E99
  • quickInput.background#2A2D2E
  • quickInput.foreground#CED0D6
  • quickInputList.focusBackground#3C3F41
  • scrollbarSlider.background#3C3F41AA
  • scrollbarSlider.hoverBackground#4B4D52AA
  • sideBar.background#2A2D2E
  • sideBar.border#3C3F41
  • sideBar.foreground#CED0D6
  • sideBarSectionHeader.background#2A2D2E
  • sideBarSectionHeader.foreground#CED0D6
  • sideBarTitle.foreground#CED0D6
  • statusBar.background#1E1F22
  • statusBar.debuggingBackground#CF8E6D
  • statusBar.debuggingForeground#1E1F22
  • statusBar.foreground#CED0D6
  • tab.activeBackground#2A2D2E
  • tab.activeBorderTop#6AAB73
  • tab.activeForeground#CED0D6
  • tab.border#3C3F41
  • tab.hoverBackground#3C3F41
  • tab.inactiveBackground#1E1F22
  • tab.inactiveForeground#7A7E85
  • tab.unfocusedActiveForeground#CED0D6
  • terminal.ansiBlue#56A8F5
  • terminal.ansiGreen#6AAB73
  • terminal.ansiRed#CF8E6D
  • terminal.ansiYellow#B3AE60
  • terminal.background#1E1F22
  • terminal.foreground#CED0D6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7E85italic
keyword, storage.type, storage.modifier#CF8E6D
string, constant.other.symbol#6AAB73
variable, identifier#CED0D6
constant.numeric, constant.language.boolean#2AACB8
entity.name.function, support.function, meta.function-call#56A8F5
entity.name.type, support.type, storage.type.class#B3AE60
meta.class, meta.interface, meta.struct#B3AE60
constant.language, variable.language#C77DBB
punctuation.separator, punctuation.terminator#CED0D6
meta.annotation, storage.type.annotation#B3AE60
entity.name.tag, support.class.component#D5B778
meta.tag.attributes, entity.other.attribute-name#BCBEC4
constant.character.escape#42C3D4
source.json meta.structure.dictionary.json support.type.property-name.json#BCBEC4
source.json string.quoted#6AAB73
source.json constant.numeric, source.json constant.language.boolean#2AACB8
source.yaml entity.name.tag.yaml#BCBEC4
source.yaml string.unquoted, source.yaml string.quoted#6AAB73
source.yaml constant.language.anchor, source.yaml constant.language.alias#C77DBB
source.tsx entity.name.tag, source.jsx entity.name.tag#D5B778
source.tsx entity.other.attribute-name, source.jsx entity.other.attribute-name#BCBEC4
source.tsx string.quoted, source.jsx string.quoted#6AAB73
source.vue entity.name.tag, source.vue support.attribute.vue#CF8E6D
source.vue string.quoted#6AAB73
source.vue keyword.control.directive.vue#CF8E6D
source.css support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name#CED0D6
source.css support.constant.property-value, source.scss support.constant.property-value, source.less support.constant.property-value#6AAB73
support.variable.node, support.constant.node#C77DBB
markup.heading.markdown#56A8F5bold
markup.bold.markdown#CF8E6Dbold
markup.italic.markdown#6AAB73italic
markup.inline.raw.markdown#B3AE60italic
markup.link.markdown#42C3D4underline
source.js keyword, source.ts keyword#CF8E6D
source.js variable.other, source.ts variable.other#CED0D6
source.js string.quoted, source.ts string.quoted#6AAB73
source.js constant.numeric, source.ts constant.numeric#2AACB8
source.js entity.name.function, source.ts entity.name.function#56A8F5
variable.other.property, meta.property.object, meta.object-literal.key, support.type.property-name#BCBEC4
invalid, invalid.illegal#FFFFFF
Goland Dark Theme by diamond2221 - VS Code Theme